Why Electron is the best development platform?

A year ago, when I was making a choice between development environments to develop Zector, I evaluated three options Javascript on Electron, Python3 with PyQt, pure C++ 11. I’ve developed on Electron for over a year now and I’m convinced it was the right choice. Here are things I learnt and you will find useful while evaluating Electron for your needs.

ES6

Javascript is not my favorite language. Python is. One of the reasons I love python is for its syntax perks. Lambda functions, list iterations, named arguments - to name a few of my favorites. They make writing code very efficient. However, circa early 2016, both Javascript and C++ have features that match Python on this front.

  • The arrow functions and array iterations (for..of loops) in ES6 make writing Javascript a lot more fluid than before.
  • The arrow functions with correct semantics of this reduces the cognitive load further, saving some extra code one had to write in pre-ES6 Javascript.
  • Destructuring is a huge bonus. ES6 has gone further in incorporating destructuring in number of places - declarations, assignment, function arguments. I remember discovering some of these things without knowing that they are actually supported by the new syntax. When I tried and saw them working, it felt like magic. That’s the definition of intuitive syntax.
  • Finally there’s support for class in the language syntax with ES6
  • ES6 modules make your code organization easy. You have to use WebPack-Babel though, if you want to use them.

When you use Electron you can use ES6 for development without worrying about browser support, because you ship your browser+node environment with your app itself. (Pro tip: Use babili to minify your ES6 without compiling).

C++ 11 also has friendlier syntax with lambda functions, auto type, for(:) syntax. But it’s not comparable to ES6 improvements. C++ is stil more rigid than Javascript. You get advantages of static typing and native performance, but they aren’t reason to sacrifice faster development times of scripting languages.

GUI Widgets

The biggest downside of using Python for desktop apps is GUI framework. The most mature option is PyQt. It’s mature because it has been around for a while, but that also makes it rigid. You have to learn traditional View framework of GUI widgets. It’s a far cry from the fluidity of HTML DOM. Although the DOM wasn’t designed for desktop apps, it has evolved and now offers the best of both worlds. If you don’t want to reinvent the wheel then you can use built-in widgets, or various jQuery UI plugins for more customizable ones. But if you want to try something new, say a different layout or animated panels you can totally do it. That’s very hard to do in frameworks like PyQt (that’s why Qt has also adopted some form of DOM in its framework, but then that defeats the point of using Python). Moreover, PyQt is developed by a relatively obscure company with some not-so-clear licensing options for commercial usage.

Debugging GUI written over DOM is also tremendously easy, thanks to Chrome DevTools that is incidentally part of Electron. (more on that later)

Native addons

When you use an interpreted language like Python or Javascript, you are bound to hit performance issues at some point. These languages are good to write 99% of the application code, but eventually you can find 1% of the code that is called a billion times and can make the whole application faster if written in C/C++. In other cases, there are legacy native libraries that provide the functionality you need and it would be too much work to re-implement it in Javascript. When you are developing for pure Web, you have no choice but to reimplement them (I’ve had to do that in my past projects). But with Electron you can write native add-ons to use these native libraries from your Javascript application code.

Technically, it’s the node.js environment that provides the add-on functionality. I’ve written many add-ons or plugins for Python and Node.js environment in past few years. I’ll say it’s not without pain in both cases. However it has gotten a lot better with node.js in past few years. I doubt there are any recent improvements in writing Python native modules (although Cython and cffi give good alternatives), but back when I used to write them I remember switching between Swig or hand-written C structures with function pointers. It wasn’t fun.

Node.js addon development on the other hand is well documented. You basically have to deal with v8 data structures, which have one-stop documentation. They are a bit awkward many times, where you have to write code whose purpose is not exactly clear. However you start identifying boilerplate patterns in the code and can easily macro-fy them. In fact the nodejs developers made this official with the Nan library, which is a must if you are writing node addons today. Electron embraces all this by design, because nodejs is part of it.

There is still some room for improvement in node.js addon development. One of them being node-gyp. It’s a non-standard build system, with awkward declarative syntax. They really should use CMake. (I know there’s a solution, but cmake should be the native build mechanism for node addons)

Debugging tools

I started my career while debugging operating systems. So print statements have been the best way of debugging for me. Although I’ve tried all kinds of debuggers (Eclipse Java, Visual Studio, GDB, PDB, Vim with debugger plugins), they could never beat the simplicity and pervasive applicability of print statements when it came to debugging. However my experience with Chrome DevTools for the past 6 years, makes me name it the best Debugger I’ve ever used. Again, it’s part of the package when you use Electron.

What makes Chrome DevTools best is, its developers went beyond just the break-points and watch-variables functionality of a debugger. They built the capability to inspect every aspect of HTML5 application. Javascript is the most imporant aspect, and GUI layout is the next. Python or C++ based GUI systems are at enormous disadvantage here. In Chrome DevTools you can drill down the GUI hierarchy, inspect it, change its style dynamically, add breakpoints on DOM modification events and even copy-paste the DOM into another standalone file (because it’s just text). Such versatility is not available in any other GUI development environment.

In addition you have a REPL in the form of Console which is indispensable. You can inspect the network activity (although it’s not so frequently used in desktop app development, but that depends on use case), do performance analysis. There’s also an Electron extension to Chrome Devtools - Devtron - but I don’t have much experience with it.

NPM eco system

Node.js has a vast community of developers who have written libraries for all sorts of things and published them on NPM. Between npm cli tool, package.json choices and ability to install packages from file system or github repo URLs; Electron offers the most accessible dependency fulfillment eco system (via npm). Most of the functionality your application needs is probably implemented by someone and is available as NPM package.

Cross platform integration

Node.js and Chrome being already available on the big three desktop platforms, makes Electron the most appealing write-once-run-anywhere solution. However that’s just the beginning.

The Electron developers have taken the cross-platform notion beyond just the runnability of code. They have incorporated support for all the native aspects of the desktop environments on all platforms. Wherever possible they have created common abstractions that automatically adapt to the right environment, for example application menus or desktop notifications. But Electron also supports the features that only available on Windows or OSX or Ubuntu Unity. And they have all these methods well documented complete with example code. I was once quite surprised to find how easy it’s with Electron to create a headless application that only shows an icon in the tray.

Packaging

I’ve never before created package installers in my life (maybe I’ve, but that was back in last millenium I think, so that’s too old to count). So that was one thing I was dreading when I decided to develop Zector tools as desktop applications instead of Web apps. But I needn’t have worried. Electron has very good packaging solution that creates platform specific installers for you. I use electron-builder, although there are other solutions too. Electron-builder is well documented and I use it to build NullSoft installer on Windows and DMG installer on Mac for Zector Trace. It also supports platform specific code signing mechanisms (although I haven’t tried them yet). There are some rough edges yet, but I think they will even out with time.

Static Typing

Javascript doesn’t offer static typing. Recent advancements in Python3 are offering it. Static typing can be useful and sometimes indispensible for large projects. In Electron environment you could use TypeScript, which has static typing and compiles to Javascript. Or you could use Flow. Or if your project is not too big, and you only want type checking for a limited API, then try joi for manual runtime type checking.

Electron has been already adopted by many mainstream apps. Thanks to it, I was able to deliver Zector Trace across three major platforms in record time.

If you have any comments, write them on Twitter to @jyro. If you are from Montreal, join the Montreal ElectronJS Meetup group.


Home


Archive

2018

Lessons for Solo Enterpreneur from "Structure of Scientific Revolutions"

Bicycle pedals

Insanity and Software

Playing games, Doing Mathematics

Violet end of spectrum

Vipassana Meditation

Why gamers like pixelated games

2017

Collecting Vs Hoarding Netflix

Game Design tip for Programmers - Less Automation

Review Ghost In The Shell - The blinds scene

Why Electron is the best development platform?

Project Dialog

2016

Don't Panic

The Entanglement Pattern

The flying cars analogy

Road Trip of Atlantic Canada

Having done attitude

2015

Before fixing performance issues

No Exams, Yes Video games

Podcasts Français

2014

Quotable Quotes

Conned?!

2013

Uruguay's President

New rules for Formula 1

Software Engineering Code of Ethics and Professional Practice

Something's missing

2012

Coffeescript: To switch or not to switch

Water from air

The single most reason that keeps me using Vim

Time travel fiction

When your git branch diverges from your remote

Something like Olivia - John Mayer

Online courses - New technology, Old rules

Kelsey Grammer is spectacular

Why Patriotism doesn't make sense

Why sea steading is important to pursue?

Prometheus

Rolling back latest git commit

Google Lunar X Prize

iTunes Download stopped (err =9006)

Good essay on user centric software design

Why we need to explore Seasteading?

2011

Master pieces from screen

How to write interactive CLI utility in node.js

The Gods Themselves by Isaac Asimov

Why OpenGL ES is so hard?

How to print stack trace anywhere in Javascript

It's not fair to compare Android with Internet Explorer

How to debug WebWorker threads?

Why can't I criticize Government if I don't vote? I sure can.

Elon Musk quote

Don't label yourself

Why the hi-tech minds are writing Social apps?

Truce with exercise

JavaScript is the next C

Ever growing todo list is a good sign for creative projects

Lesser women in tech... So what?

HTML5 offline cache - use swapCache carefully

How Wikipedia and Flattr can together change the World

2010

Discovering LastPass

Functional programming in Javascipt using Underscore.js

Youtube ETA - Chrome extension

Why secure airports when it's planes that fly?

Mac book red light audio jack problem on Linux

How to save HTML5 canvas image to Google App Engine

Why don't they publish eBooks for free but with embedded ads?

Silicon Valley and Hi-tech

Reality distortion field around

Indirect experiments

Music sharing

ReaderScope 2.0.6 - Find Comments

ReaderScope 2.0

predictably irrational

ReaderScope upcoming changes

Tuxmac

Why "Open" is not the first concern of user?

Mutt, Gmail, gdata, notify-send: A Perfect Email solution

Are you the Matt Damon of your game?

ReaderScope 1.9 - OAuth

New app "Find Comments"

@font-face-lift

ReaderScope 1.8.{2,3} - new authentication and global share

Portable apps for iPhone, Android, Pre, n900 - Can Processing.js help?

ReaderScope 1.8.1 - rethinking features

ReaderScope 1.8 - Random

Android fragmentation : How big a deal is it?

on Dropbox

iLikeIt

ReaderScope v1.7 - Widget, new Icons and .... Ads

on Git: tips for SVN users and Git in Dropbox cloud

How to do an online IDE for Android app development

Anti Asserts

Bono's top ten list

Make Android speak your Twits with "TwitSpeak"

2009

Reality of colors

Talking Twitter client

ReaderScope 1.5 - quicker, better, prettier

Preview android.R.drawable.* images

Is definition of "Evil" changing?

on Music: Battle Studies

ReaderScope 1.4 (with a Theme Pack)

On Chrome OS

Black on White

Android AsyncTask template

The AND-OR problem of laptop and mobile phone

ReaderScope v1.3.3 - offline podcasts

ReaderScope v1.3.2 - Social Channels

ReaderScope v1.3 - Beyond Google Reader

Frets on Fire for Maemo - Update

ReaderScope 1.2.7 - Podcasts, Expanded View

Sprint HTC Hero problems with ReaderScope

ReaderScope 1.2.3 - Search

ReaderScope 1.2.1 - Auto Login

ReaderScope v1.2

ReaderScope 1.1.3 - SDCard storage

Crash report for Android App

Wifi and Battery

ReaderScope 1.1.2

ReaderScope 1.1.1 quick-n-easy features

ReaderScope 1.1 - Social Beacons

ReaderScope 1.0.2 - making deep cache simple

ReaderScope 1.0.1

ReaderScope 1.0

Detecting HTC magic on Fedora

ReaderScope beta4 - offline fun

ReaderScope beta3 - Tweet the news

ReaderScope Beta2

ReaderScope beta1 is out

Intercepting Up/Down keys from bash script

Makeshift XML beautifier in python

HTC Magic (Indian version) - expectations and facts

using android AsyncTask

Android development with Vim + Eclim

Cutewit (preview)

Einstein's Dreams

Preprocessing the GUI

Evas + Inkface in v0.2.5

easy source

FoF - PyOpenGL = miniFoF (possibly for n810)

FoF update

Twitter client with inkface-pygame v0.2.2

Frets on Fire on Maemo 5 (Fremantle)

Static IP configuration on Fedora 10

Inkface+pygame v0.2.0

Smooth scrolling with Inkface+pygame

Inkface v0.2 update and automated GUI testing

Testing Android (Koolu Beta 3) on Openmoko Freerunner

Clutter animation paths with Inkscape+Inkface (v0.1.3)

Turning a page

Planning Inkface v0.2

Debian repository on Google App Engine

Inkface + Clutter

Inkface v0.1.2, Twitter-inkface client

2008

Inkface update

Debugging python reference counts

Paul Graham nails it again!

Fedora 10 on MacBook 2,1

A great essay

Thanksgiving at Crater Lake

Digital SLR buyer's guide

more fun with notify-send

(k)ubuntu 8.10 - not ready for my home yet

Migrating to Google App Engine

Android opened - first looks inside

Has it started?

Inkface v0.1

Musical discovery of the week

Die Berlin-Affäre

aus Berlin

Inkface - SVG based GUI design

Script fun

Visualizing source code

OpenMoko photo tour

New connection with the past

George Carlin - favorite clip

temperature

80-20 rule

Python fun

OSiM'08 Berlin, Germany

Of games

"Wine" tasting

Today's slashdot and open source

Cost of Open Source

Lions for Lambs

Ubuntu reviewed

Flickr uploads from n810

Cringely and Paul Graham

Accelerometer brainstorming

Clutter Webkit

OSiM USA 2008 - Day 2

OSiM USA 2008 - Day 1

Google code

Gr8 commercial

OSiM USA 2008, see you there

OpenMoko, Android and a great hacking post

two great videos

Blog from nokia tablets

2007

cool n770 hack

Picasso

Colbie Caillat

Firefox 3 is brilliant!!!

XML RPC server inside apache mod_python

best effort technologies

coding Monalisa

formula of a horror movie

next desktop jump

The "Screen"

Nice review article on virtualization technologies

Once again... a quote from 'Troy'

Story of a random number

quotes from George Carlin

"from time import sleep"

Sea surfing under the Golden Gate

Trip videos

2006

across two hours

What I read...

How do I backup to Amazon S3 storage service

Stranger than fiction

Gas prices... seems like big scam

Another nice quote

Hilarious nerd comment

Programming & Painting

Why do we like fiction?

Troy

If Harry Potter were a computer hacker ...

Gentoo, XGL, HGG

Henry Ford

VI - A capable IDE

New blog

Safari Bookshelf

2005

Back to the L4

Quotes

GCC 2.95 rpms

repeat (ps | grep) = filtered top

Halo fixed on ATI Mobility Radeon 9000

DirectX Installation Problem

Warning: const is a keyword in ANSI C

Not much on L4 front

Last two weeks

GRUBing

Stumbled on HURD

Installed HURD console

Make problem solved

2004

Handy way to create stack trace