Desktop apps with Electron

Learn how to use Electron to build native desktop applications for all major platforms.

Transcript

1. Desktop apps with Desktop apps with Electron Electron
2. Today's Menu Today's Menu What is Electron / Features Basic Concepts Hello World Handling Assets Databases Packaging Automatic Updates Reveal Case Study
3. Made with ♥ by GitHub.
4. Electron allows you to write Electron allows you to write native applications for native applications for desktop using Javascript desktop using Javascript and Node.js and Node.js
5. Electron works for Electron works for Windows OSX Linux
6. Electron features Electron features Automatic Updates Crash Reporting Native menu controls Native notifications OS specific components Simplified IPC communication
7. Built on Electron Built on Electron
8. Let's get down on it Let's get down on it
9. Basic Concepts Basic Concepts
10. The processes The processes The Main Process The Main Process In Electron, the process that runs package.json’s main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. tl;dr: This is the node.js application - the backend
11. The processes The processes The Renderer Process The Renderer Process Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. tl;dr: This is the frontend browser stuff
12. The Stack The Stack Chromium 49 Node.js 5.1.1 ...as of Mar 2016
13. The Stack The Stack deeper deeper Electron boots through node Hacked Chromium to have Node.js bindings on Renderer process (AKA can use FS, etc from frontapp)
14. Hello World Hello World
15. Basic boilerplate Basic boilerplate your-app/ ├── package.json ├── main.js └── index.html { "name" : "your-app", "version" : "0.1.0", "main" : "main.js" } npm start The package.json Start app with
16. The main module The main module 'use strict'; const electron = require('electron'); const app = electron.app; // Module to control application life. const BrowserWindow = electron.BrowserWindow; var mainWindow = null; // Quit when all windows are closed. app.on('window-all-closed', function() { app.quit(); }); // This method will be called when Electron has finished // initialization and is ready to create browser windows. app.on('ready', function() { // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}); // and load the index.html of the app. mainWindow.loadURL('file://' + __dirname + '/index.html'); });
17. Assets Assets
18. Frontend Assets Frontend Assets Position them wherever you want Reference is based on FS Use relative paths Use absolute FS paths ("/Applications/MyApp/...") Get absolute path from electron JS has commonJS built in, no need to browserify Single target browser
19. Binary Assets Binary Assets Position them wherever you want Reference is based on FS Prefer to submodule them Include all possible targets (win32, win64, etc) Delete not needed targets on build stage
20. NPM modules NPM modules The Native Node Modules problem is abstracted away from you during the build process. no sweat
21. Protecting Source Protecting Source Using the ASAR archiving package Atom Shell ARchive Requires special provisions Can no longer reference assets directly Special methods exist for reading raw files Application files are now a tarball and thus Read Only
22. Application Data Application Data $XDG_CONFIG_HOME or ~/.config on Linux ~/Library/Application Support on OS X %APPDATA% on Windows Actual App Path [appData]/[AppName] Where you can store application data
23. Databases Databases
24. Built In Built In Session Storage Key value store per user session Local Storage Persistent key value store IndexedDB Big data Since we use Chromium these APIs are guaranteed to be there and work
25. SQLite SQLite Use FS for storing the data SQLite compiled to JS https://github.com/kripken/sql.js
26. Bundle your own Bundle your own Mongo Couch Postgres Will significantly affect the size of your self-install package as static-built binaries are big
27. Packaging Packaging
28. Packaging Overview Packaging Overview 1. Finalize your app - build what you have to build 2. Copy whole app into the "build" directory 3. Delete and npm prune all development files and what doesn't need to be into the bundle 4. Run electron-packager to produce the executable 5. Run 'appdmg' to produce the self-installable
29. electron-packager electron-packager Simple setup Grunt / Gulp tasks But better to use the Node API directly Auto builds Native NPM Modules Produces executables for all OSes Manages Code Signing on osx
30. Automatic Updates Automatic Updates
31. Automatic Updates Setup Automatic Updates Setup Very simple implementation You create your own UI / UX Requires a server HTTP API { "url": "http://mycompany.com/latest", "name": "2.0.2", "notes": "Theses are some release notes innit", "pub_date": "2016-03-31T21:29:53+01:00" } Server Response
32. Auto Updates Flow Auto Updates Flow 1. Client sends its version to Server 2. Server determines if an update is needed If it is not it responds with 204 NO CONTENT If it is it returns the Server Response with the download url of the new version 3. Client automatically downloads the update 4. Once downloaded it installs and awaits next restart 5. Optionally you may force this via user input
33. Reveal Case Study Reveal Case Study
34. About Reveal About Reveal Reveal is Instant Replay for Sports It is used by coaches and athletes Elevator Pitch Operations External cameras stream video clips to the server The server makes the clips available to clients with tagging features Environment Local private WiFi network on Stadium Node.js Server on Macbook Air Burdenous install, onboarding and maintenance
35. The Reveal Stack The Reveal Stack Started development on June 2014 Node.js v0.12 Provides HTTP and Websockets API Express Built using Redis and Mongo
36. Migrating to Electron Migrating to Electron
37. Migrating to Electron Migrating to Electron All the electron files, back, forth, images, etc went to the new "electron/" folder Redis had to go Local pubsub via EventEmitter Created a custom runtime queueing system Mongo got bundled, osx binary Ffmpeg got bundled, osx binary Boot work, determining paths, rearranged staff a bit. Boom! It worked!
38. Thank you Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas
39. Questions? Thanasis Polychronakis @thanpolas https://speakerdeck.com/thanpolas