Ember & Electron for Desktop Apps

Ben Orozco
Aug 25, 2016 · 4 min read
Image for post
Image for post

Recently at Nimbo X we realised our end users would greatly benefit from having a “Desktop-like experience” when using our app, so we set ourselves to produce a first version of it. In this post we’ll explain our experience from a technical point of view.

Download it now for OS X & Windows

Publishing it to the “App Stores” distribution channels is still a work in progress, which deserves a post for itself, where we’ll narrate the bureaucratic experience while submitting the app.

Meet Electron ⚛

Image for post
Image for post
electron.atom.io

Electron is a runtime environment based on Node.js & Chromium. It allows creating desktop applications using regular web technologies, giving them access to the filesystem, hardware, OS notifications, etc.

Ember + Electron

The awesome ember-electron addon by Felix Rieseberg allowed us to quickly build app executables for major platforms by simply running:

ember electron:package

It wraps other amazing tools, like ember-packager and electron-osx-sign, into a single easy-to-use package. Other tools we relied on were:

Getting rid of browser modals, once and for all

Our biggest headache turned out to be good ol’ browser popups. We had several window.confirm, window.prompt and window.alert modals throughout our application that we needed to get rid of, since these are not available in Electron.

At first glance this seemed to be rather easy, but as it turns out the modal window abstraction doesn’t play well with a component-based app like ours.

Image for post
Image for post

We had already been using ember-modal-dialog for some modals, and since it’s still the first result in ember observer it was our natural choice.

Specially tricky were the modals which needed to hold some kind of state and pass data from/to the underlying route or component, such as a window.prompt and window.confirm.

This got even more complicated when having several levels of nested components while following DDAU (data down, actions up), thus data-related actions reside in the parent routes, and actions are bubbled up from nested components. This created a situation where we ended up polluting many components with modal’s logic/markup, ugly!!!!

Image for post
Image for post
We agree Erlich!

We also considered ember-remodal, the second-best rated addon in ember observer, but it felt over-engineered and having to install yet another modal addon was not a particularly attractive choice.

In the end we decided to stick with ember-modal-dialog and get our hands dirty by crafting a solution of our own. Following this awesome screencast (suggested by Esteban Lara) was a great starting point for cleaning-up our code.

First we decided to encapsulate all the three modal-variants in a single component called modal-message, which reused ember-modal-dialog and would be rendered only once at top application-level:

The tricky part was to consume the logic from other controllers/components and passing data, while keeping the context, using closure actions:

This kinda breaks DDAU pattern!!!! But in the end is a tradeoff we’re willing to take, since modals themselves break component-based paradigm too, being more like a necessary evil in modern single-page applications UX metaphors.

Next Steps: Automating the process

If reception is good for our desktop apps we’ll keep iterating and improving the Electron builds. The next logical step would be to automate the process via auto-updates (hint: using Gitbook’s Nuts server), but that’s material for another post.

Resources

The Backlog by Ecaresoft

Sharing our journey: from software development to company…

Thanks to Jorge Camargo and Rodrigo Camargo

Ben Orozco

Written by

Healthtech Hacker — Full Stack Dev — Open Source & Crypto Enthusiast — CTO 🌳 @HealthTreeNet — Previously @ecaresoft & @Nimbo_X

The Backlog by Ecaresoft

Sharing our journey: from software development to company culture and productivity hacks.

Ben Orozco

Written by

Healthtech Hacker — Full Stack Dev — Open Source & Crypto Enthusiast — CTO 🌳 @HealthTreeNet — Previously @ecaresoft & @Nimbo_X

The Backlog by Ecaresoft

Sharing our journey: from software development to company culture and productivity hacks.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store