A pretty cool and ambitious idea of writing non-web applications with web technologies is all over the place nowadays. We’ve got React Native for developing mobile apps with JavaScript, there are NW.js (formerly node-webkit) and Electron (formerly atom-shell) for building desktop applications with HTML, CSS and JavaScript, and many other smaller efforts to bring web technologies to native world.
There were times when writing a code editor based on browser window sounded strange and many developers considered it an experiment which could not lead to success. But despite that, Atom editor from GitHub became widely popular because it’s easy for everyone to develop plugins and extensions by simply writing some Javascript. Later, Electron framework was extracted from the core of Atom editor to help developers create their own cross-platform desktop applications. And Slack is now a really cool success example, as are many other closed- and open-sourced applications.
Developing a desktop application with Electron is a fun thing. It really allows you to run your web-based code as a native desktop application via chromium engine. However, there’s a lot you need to filter through in active electron community to get an idea of how to build an app. There are quite a few “getting-started” boilerplates that allow you to run your first ‘Hello world’ app, but no clue on how to move forward. There are multiple tools for building and packaging applications, making installers, and handling millions of different tasks. But what do I really need for my app? What code structure should I set up for a project? There’s not a single approach out there.
Bozon command line tool
Dealing with all these tasks and questions, we came up with idea of a single tool that can handle most of these issues. We built Bozon to make it easier to bootstrap new Electron applications, run the package and test with one single command line tool. So now you don’t need to search for right scaffold generator, proper testing framework and task runner. Everything is already baked in! Under the hood, Bozon uses all these tools we all know and love. It uses Gulp as a task runner to build and application, Webpack – to get all scripts for renderer process packed and ready.
First of all, Bozon can generate Electron app scaffold with environment and platform targeted configuration, with scripts logically split into the main process and renderer process, and testing framework already set up. Simply run:
bozon new ironman
Follow the dialog, answer some basic questions about your app, and once auto-running node_modules installed your new Electron application is ready for your input. This generates basic application skeleton which is pretty straightforward:
|--app/ | |--images/ | |--javascripts/ | | |--renderer/ | | |--main/ | |--stylesheets/ | |--index.html | |--package.json |--config/ |--spec/ |--gulpfile.js |--package.json
app/ directory is where all your code will go. All the images, stylesheets and other possible assets should be placed here under relevant directories. With javascript files it is a bit trickier. The whole javascript code within electron app is divided into 2 sections main and renderer as they will be run in different processes. Check out electron documentation for more info about this.
config/ directory to contain `settings.json` and other env specific and platform specific configuration files.
There are two package.json files. First one is for development and is placed under the path: `ironman/package.json`. Here you declare dependencies for your development environment and build scripts. This file is not distributed with real application.
Second one is a real application manifest that can be found under the path: `ironman/app/package.json`. It gets updated with settings hash generated from configuration and distributed with real application.
At this point you can easily run application with:
bozon start
This will simply compile your app code and launch electron-prebuilt with it inside.
Testing
Bozon is using spectron framework and mocha spec runner for feature testing Electron applications. All unit and feature tests live under./specs directory and can be run all at once or individually. Simply run tests with:
bozon test
or
bozon test spec/unit/storage_spec.js
Note that feature tests are performed on real packaged applications; that’s why it requires code compiling and packaging the app to `.tmp/` directory and could take some time. While running simple unit tests is a lot faster, because all you need to do is simply require a module you want to test.
Packaging
In order to package your Electron application into a real desktop application, bozon uses electron-builder. Settings for electron-builder (like resources for different platforms) are defined in main package.json file under **build** section. It takes only one simple step for developers to package their application:
bozon package osx
And bozon does the rest for you. First, application source code is compiled for a defined platform with specific settings. You can find the build under `./builds/production` directory. Then, bozon uses electron-builder to package platform build to `./packages` directory.
To make this work like a charm, bozon uses **two package.json structure** as it is also recommended by electron-builder.The concept is pretty simple:
– **package.json** in root directory is for development. Here you declare dependencies for your development environment, build scripts and runtime dependencies to run your app in development mode with `bozon start`.
– **app/package.json** is meant to be used at application runtime. `App` directory is the only one distributed with real application, thus this is the place where you define your runtime dependencies for production before packaging application.
Of course, this leads to some duplication (you’ll have to define runtime dependencies in both files), but this also provides flexibility and allows to configure which node modules should be packaged to application, instead of distributing entire node_modules directory with all dependencies that are used for development.
Conclusion
Electron is pretty young technology – stable version 1.0 was released less than a month ago – and a lot of improvements and infrastructural tools are still to come. But it already allows building quite cool desktop applications and community is doing great progress on making setup and development even more easy and interesting. Try starting your new Electron application with bozon and tell us what you think. Feedback is really appreciated!