I started this week on a journey to create a note-taking app using Ember and Electron in 3 days. It’s been a challenging yet highly rewarding week.
Here is a little info on the tech stack:
Ember
Ember is an open-source JavaScript framework developed in 2011 by Yehuda Katz and Tom Dale. It follows the MVC (Model, View, Controller) pattern of development for developers designing scalable single-page web apps.
The Ember stack includes:
Ember CLI: Build tools and command line utility. Like Rails, all you have to do is run ember new app-name to generate a new app with a standard file and directory structure, a testing framework, dependencies (managed by bower and npm), ES6 syntax support using Babel and asset management for minifying.
Ember Data: A data-persistence library. Ember Data can save records via a RESTful JSON API without any additional configuration.
Ember Inspector: An extension for Firefox and Chrome to help developers debug Ember apps.
Fastboot: An Ember CLI addon to allow developers the ability run their apps in Node.js.
Liquid Fire: Animation support.
Electron
Electron is an open-source framework for desktop GUI applications. Built by Github, Electron used to be known as Atom Shell and is the framework Atom was built with.
Electron uses Node.js, Chromium (the magic behind Chrome), HTML, CSS and JavaScript to build cross-platform apps — Electron apps can run on Mac, Windows and Linux.
Apps built on Electron include Slack, VisualStudio, Avocode, PopKey and GitKraken.
You can think of Electron as a mini Chrome browser, controlled by JavaScript. It uses Chromium to display web pages as its GUI.
There are two main processes: Main and Renderer. Main creates the web pages by using BrowserWindow instances. Renderer is the tool used to display web pages. But, unlike normal browsers, Electron apps have access to native resources. When a BrowserWindow instance is destroyed, the renderer process is also stopped.
Development Philosophy
Ember’s philosophy centers around the developer. Its creators used four ideas to drive the design:
Full package: Unlike most JavaScript frameworks, Ember provides the full MVC framework for ambitious client-side applications.
Productivity: Ember provides tools that make getting started fast. Ember CLI provides a standard architecture with countless options for enhancement.
Stability: Ember’s creators and maintainers recognize the importance of backward compatibility while continuing to innovate.
Flexibility: Yehuda Katz is a member of the committee responsible for creating future versions of JavaScript and made sure Ember was an early adopter of ES6.
Ember adheres to the Don’t Repeat Yourself (DRY) principle and prefers convention over configuration. It is opinionated but flexible, providing developers both freedom and guidance.
Electron is best thought of by its former name: it provides a shell that wraps around your JavaScript web app to provide it lower-level access to native processes and a desktop interface. It’s a fast, lightweight way to build a desktop app for any platform.
Why Ember + Electron?
Well, for one, it seems like it hasn’t been done a lot before. That’s kinda cool and leaves lots of room to learn through experimentation.
Initially I thought Electron would be the most heavily used because the app would be a desktop app. But again, it’s really just a wrapper.
Ember does most of the heavy lifting.
And, I’m sure there are some people who would argue I should have opted for a native app and not used a cross-platform tool like Electron. Seeing as though I’m most efficient with web development languages and tools, this combination of frameworks will allow me to jump right in and get building something without learning all about xCode, Swift, and Apple APIs.
While I think there’s a time and place for that, right now, I’m focused on learning. And I love that I’ll be able to deploy it for any system.
Challenges
One challenge I encountered was adding functionality to search a list of notes and actively show results in real-time based on the current query.
A feature that helped me in cleanly implementing a solution involved defining what ember calls a ‘component’. A component lets you encapsulate a group of attributes or data, similar to an object, that can be easily re-used in your project where ever it’s needed.
There are 2 parts to every component:
A handlebars template that defines how it will look.
A JavaScript source file that defines how it will behave.
For example, I created a component called ‘note-list’ which had a computed property on it that represented a filtered collection of notes based on the current search term the user entered. This property could then be iterated through in note-list.hbs and for each render a separate component called note-list-item which represented the data for an individual note.
Using these two components nicely abstracted the representation of each respective object to be reusable and ultimately helped in implementing the filtering functionality we were looking for.
Project in Review
This project was an interesting mix of two frameworks, ember for a web-style app wrapped in electron for a native OS experience. Some aspects of development went well, while others I would approach differently if starting it over.
Went smooth
Setting up the base CRUD functionality was pretty straight forward, the ember-cli gives you the generators to easily create components, routes, and models. The access to the filesystem was handled by a npm module called file-bin, which enabled easy finding, writing, reading, copying, and deletion of notes to/from the local filesystem.
Not so smooth
Initially I installed semantic-ui-ember to handle the app front-end styling. After styling a number of components and consulting the package README, I found it did not have support for large number of Semantic components, so I started looking for another framework that would give me more of the layouts I was looking for, while also still retaining a native-app appearance.
After a little bit of digging, I came across this library called Photon, which using html and css provides the appearance of many of the native OS X components and layouts. Next time I style an electron app I plan to load this in first knowing it will provide what I’m looking for.
Conclusion
It is a great feeling to create a native OS app using my current web-developer skill-set. Ember and Electron are both interesting and exciting frameworks that enable the creation of these awesome apps. I encourage you to give them a look and see what you can build!
Resources
Interested in learning either Ember or Electron? Here’s where to start.