Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to get started with Electron

Jimmy Moon
September 19, 2015

How to get started with Electron

Describe essential knowledge for getting started Electron

Jimmy Moon

September 19, 2015


  1. Web Tech Use HTML, CSS, and JavaScript with Chromium and

    Node.js to build your app - Any Web Frameworks and Libraries - React, AngularJS, Polymer, WinJS, jQuery, Bootstrap, Photonkit … - Node integration issue [1], [2] - Latest Chromium via libchromiumcontent - Chromium Content API, Webkit API(V8) - Bumped new stable Chrome version within one or two weeks after release - Chromium: v47.0.2526.110, V8: v4.7.80.27 - Stable and Latest APIs on Node.js - Upgrading after a month to avoid bugs - Ready to latest features going with V8 upgrades - v5.1.1 (Node.js stable v5.4.1) - ES2015 shipping features is default - Supporting from over 200,000 npm packages by Electron v0.36.4 -2016/01/16
  2. Open Source Electron is open source; maintained by GitHub and

    an active community - Github !!! - Supporting from powerful-big-vendors - Many of Open source apps as a sample - Got blessed by npm module developers
  3. Cross Platform Electron apps build and run on Mac, Windows,

    and Linux - One-stop build for Electron apps - Auto update
 except Linux so far - MAS (Mac App Store) Submission - ARM devices support - Platform features
  4. - Squirrel/Squirrel.Windows · GitHub - https://goo.gl/O6nvbb
 - Squirrel/Squirrel.Mac: Cocoa framework

    for updating OS X apps - https://goo.gl/DvnGsa - atom/grunt-electron-installer: Grunt plugin to build Windows installers for Electron apps - https://goo.gl/1KerLO
  5. Electron Somethings we should know - Node.js, npm - Web

    technologies - Platform features - Electron Architecture - Running Electron app - Debugging and Testing Electron app - Packaging Electron app
  6. Electron Installation Get Electron - Build with source on Mac

    - Download released files - electron-prebuilt
  7. Electron, Hello Hello! - Project tree of Electron App ȍȇȇ

    index.js ȍȇȇ package.json ȍȇȇ index.html ȍȇȇ index.css ȍȇȇ license Ȍȇȇ readme.md - index.js is MUST. 
 Entry point of Electron app
 - package.json is SHOULD. 
 For dependencies and project info - index.html is.
 for view of Electron app but not requirement
  8. - Inspector via Chrome Dev Tools - node-inspector for Debugging

    on Main Process - console.log or LOG(INFO) - Automated testing - Chrome Driver for Electron - spectron Electron Testing npm test
  9. Electron Packaging Ready to shipping - Packaging via electron-packager -

    Installer via electron-builder - Signing helper for MAS - App packaging with asar - Like tar but no extract, random access - Avoiding of exposing app’s source code - Code protection? - Not supporting a way of code protection on Electron - mksnapshot, (V8) Snapshot for Electron - Packaging with asar - Using commercial software for protection - Using edge.js and edge-atom-shell for Windows (Slack) - Using dynamic library loader via node-ffi
  10. - Well-structured project - Up-to-date features and updates - Neat(-est)

    source code of boilerplate - Prepared configure and scripts sindresorhus/generator-electron: Scaffold out an Electron app boilerplate - https://goo.gl/rMOGCp