Click here to Skip to main content
12,500,761 members (45,378 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

5.3K views
6 bookmarked
Posted

Electron ES6 Aurelia MongoDB

, 27 Nov 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
Electron ES6 Aurelia MongoDB

For a thousand reasons, I wanted to entitle this post, “The Bleeding Edge is Bloody.”

If you are not familiar with Electron, ES6, Aurelia, or MongoDB, this post may not make much sense to you. However, you can read the post, and head over to the github repro and browse the code. You’ll see that it's clean and simple. I actually wrote this using the Atom editor on my Mac. FYI:  Atom is an Electron app.

There are links to resources in the github repro README.md for getting up to speed on these technologies if you have not seen them before or are just getting ramped up.

Introduction

It’s taken me 3 long weeks, giving up weekends and nights to finally figure out how to use Electron, ES6, Aurelia, and MongoDB in a Thick-Client application. This blog post starts with my painful journey and then dives into how easy the solution really is. Truest me, it's so easy now that I know how to put the pieces together.

Where do I start? Why did I need to write an Electron app?

I’ve used my Crank Meta-data Code Generation App for years to radically speed up development time building .NET Applications. It generates all stored procs, class entities, XAML forms, XAML Infragistics Data Grids, SQL Server TVPs, code snippets, etc.

Now that I’m doing a good bit of development on Mac (yes, Karl is still writing C# on an almost daily basis), I wanted to leverage the same tools I’ve had for years on Windows.

The requirements for my new Crank App are:

  1. Desktop app
  2. Run on Windows
  3. Run on Mac
  4. Run on Linux
  5. Local database that runs on the above platforms.
  6. Works for a single developer or a team of developers.
  7. Allow team developers to work on a machine of their choosing: Windows, Mac, or Linux.
  8. No investment cost for anything including the data store and this app.
  9. Not a SAS app that requires me to host the application or user data.
  10. No software license fees, keys, etc. (I didn’t want this headache)
  11. (Fine print: to get some dollars for all my time and other investments, I’ll publish a book and videos on Leanpub. The book is the instruction manual for the application and code generation.)

I chose Electron because in my opinion, it is the best tool for available writing and maintaining a cross-platform apps. I allows me to use my HTML, CSS, and JavaScript skills I have.

I chose ES6-ES2015 because it is the latest JavaScript standard that enables me to write clean code using the latest features of the language like Promises.

I chose Aurelia because I believe that frameworks should not get in the way of the developer and not require constant ceremony code to leverage their features and capabilities.

I’ve written production apps using Ionic, AngularJS, and Angular Material. These apps were all successful, customers happy. BUT, the development cost and in some cases, the learning curve was high when you didn’t follow the frameworks prescribed happy path. When I compare the how much less code and ceremony I have to endure, then writing an Aurelia apps compared to an AngularJS 2 app, I’m so glad Rob Eisenburg and his team wrote Aurelia. Is Aurelia perfect, not yet, but for a Beta 1 product, I’m having zero issues.

I chose MongoDB because it runs locally on Windows, Mac, or Linux, and also runs on on premise or cloud servers. I need to support a wide range of install scenarios ranging from, single user on Mac, to large development teams with developers on various platforms. MongoDB provides this capability.

Data Store Journey

Initially, I had selected MongoDB but couldn’t get it to work inside an Aurelia app. I kept getting a missing Kerberos.js file when System.js was trying to load the MongoDB ES6 module. I spent a lot of time trying to get this to work to no avail.

I then looked at Azure DocumentDB. I really like DocumentDB. Simple SQL like syntax for querying the database. It didn’t have a ES6 module for accessing the database so I wrote my own in ES6 using Promises. I was ready to go with this but then finally figured out how much it really costs. $25 per month, per collection. This was an immediate non-starter for my scenario. Great service with very cool capabilities, but too costly for this small app.

I then looked at Firebase. Like DocumentDB, Firebase simply rocks. A 1GB or less production database is only $5 per month. No other cloud service even comes close to this number. My initial pain points was figuring out how to write ES6 code and leverage Promises. I wrote myself a ES6 wrapper and got this working, but the cost thing for the user was nagging me.

Giving up my Black Friday day off and motorcycle riding, I when back to give MongoDB one more try. It was by accident that I finally figured out that System.js module loading was the problem, and not Electron or Aurelia.

Why Not Just Use a Web Service?

Yep, several developers asked me the same question.

In the current development world, there are many requirements, scenarios and solutions for them. There are no silver bullets, or one size fits all. The cloud is not the answer for every application.

I like Thick-Client, two-tier applications and write them when appropriate.

Also, didn’t want to write a webapi or MEAN Stack Express API for this app. I could of and almost did. But, that’s a lot more code I have to write and maintain without any payback whatsoever.

The Application and Solution

The application is hosted on my github Oceanware account.

I’ve provided an easy to follow readme to get you up and running on Mac or Windows. I need to spin up a Ubuntu VM for testing on Linux. Have not had the time yet. If you’re on Linux, this app will run and build on that platform as well (thanks to Electron and Chromium).

The application is the simplest Electron, Aurelia app I could write. When you run the app, you’ll see a brief spinner and message and then the Home view.

“We are connected” is your success message. You have connected to you MongoDB server from with an Electron, ES6, Aurelia app.

 screenshot

MongoService

This class was the reason I was struggling for 3 weeks. Before I found the solution, I was using the imports statement to bring in the mongodb module. You see an example of using imports in the next section below.

This simple starter code is straight from the MongoDB documentation that is written in ES5.

Below, I’ve crafted an ES6 class that first brings in mongodb using the familiar node.js required(…) method instead of using imports.

The testConnection method leverages the ES6 Promises, wrapping the MongoClient.connect method.

IMO: Promises make the method consumer code much easier to read and write, i.e., no callback hell.

export default class MongoService {
 constructor() {
  this.MongoClient = require('mongodb').MongoClient;
 }
 testConnection() {
  return new Promise((resolve, reject) => {
   this.MongoClient.connect("mongodb://localhost:27017/test", function(err, db) {
    if(!err) {
     resolve("We are connected");
    } else {
     reject(err);
    }
   });
  });
 }
}

Home

The below Home class is an example of an Aurelia view model. Except for the inject feature, there is no Aurelia framework goo or ceremony, just ES6.

Modules are imported into a class by using the import statement. The System.js module loader does all the heavy lifting. As I’ve stated above, I tried using import and System.js to bring in mongodb, but it always failed.

The constructor takes a single argument that is injected in. I’m injecting in the above MongoService.

The activate method is one that you would expect any navigation or routing framework to have, but not all do. This method is invoked by the Aurelia router as part of the routing lifecycle.

You can see my super simple code for calling testConnection. Once you’ve used Promises, you love and use them. Clean code.

import {inject} from 'aurelia-framework';
import MongoService from './mongoService'
@inject(MongoService)
export class Home {
  constructor(db) {
   this.db = db;
   this.title = "Home";
   this.connectionResults = "";
  }
  activate() {
   this.db.testConnection()
    .then((promise) => this.connectionResults = promise)
    .catch((err) => this.connectionResults = err);
  }
}

MongoDB Node Module

An Electron App is actually simple once you understand the folder structure. Everything in the root folder belongs to the Electron portion of your application.

Everything in the /src folder belongs to the app that Electron is hosting, in our example, its an Aurelia app.

You’ll quickly notice that there is a package.json file in the root and /src folders. The one in the /src folder is for application dependencies that can’t be loaded using jspm from the root folder. MongoDB is the only node module I’ve had to load in this manner. That’s why I’ve got two package.json files.

screenshotDirectory

Close

I know that I have not done any application how to teach, or framework explanations. The real purpose of this blog post was to demonstrate that you can write an Electron, ES6, Aurelia, and MongoDB Thick-Client application.

Have a great day,

Just a grain of sand on the worlds beaches.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Karl Shifflett
Architect Infragistics
United States United States

I’m a passionate Platform Architect at Infragistics.

I’m a long-time WPF-Prism fanatic who enjoys writing developer tools and line of business applications.

My current front end passions are: XAML platforms (Xamarin.Forms, Xamarin, UWP, and WPF), Electron, ES2015 (ES6), Node.js, Aurelia, and AngularJS (Angular 1.5.x).

For the back end I use what is appropriate for the project: SQL Server and ASP.NET WebAPI, MongoDB, Express, Azure, Firebase, etc.

I am very pragmatic software engineer and strive to write simple, maintainable, and testable code. Simple code allows for solving complex problems in a maintainable way.

My Blog

My Github Repros

My YouTube Videos

Just a grain of sand on the worlds beaches.


You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Santhk4-Dec-15 8:05
professionalSanthk4-Dec-15 8:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160919.1 | Last Updated 28 Nov 2015
Article Copyright 2015 by Karl Shifflett
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid