Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron - Build cross platform desktop apps

2,758 views

Published on

Electron is an open-source framework developed by GitHub. It allows for the development of desktop GUI applications using the popular Node.js runtime. Electron is the main framework behind two notable open-source source code editors: GitHub's Atom and Microsoft's Visual Studio Code.

Published in: Technology

Electron - Build cross platform desktop apps

  1. 1. © 2016 Priramo © 2016 Priramo By Priyaranjan Mohanty
  2. 2. © 2016 Priramo2 Don’t Worry we are not going to talk Quantum Physics This is something which we will be using to create Desktop Applications
  3. 3. © 2016 Priramo3 But Why to create a Desktop App ?
  4. 4. © 2016 Priramo4 People are not constantly connected. They don’t want to compromise with their privacy. They like to experience faster performance. They would prefer to be the owner instead of a tenant. Sometimes there is a sophisticated client need. Most importantly its getting easier to create one now. Because
  5. 5. © 2016 Priramo5 Offline Printers, Devices & Other local hardware On-Premise Internal, LOB Edit Local Files App Store Kiosk Desktop > Intranet Sometimes it “just feels right” Some of the Business Needs
  6. 6. © 2016 Priramo6 Disconnected Data Entry Editor Time Management Media Player Email Client Messaging, Collaboration Mapping, Route Planner Social Media Client And many more that you can think of … Few Application Ideas Bulk Media Editor File Management, Backup Document Generation, Reading Audio, Video Conferencing Games Personal Assistant Database Client Calendar
  7. 7. © 2016 Priramo7
  8. 8. © 2016 Priramo8 Story of Electron Features Architecture Hello World Hello Universe Potential Roadmap Up Ahead
  9. 9. © 2016 Priramo9 Story of Electron The journey of an idea to make things simple and easy.
  10. 10. © 2016 Priramo10 It all started with the search for A foundation for Atom Github needed a tool to build the text editor on – with JavaScript, HTML and CSS
  11. 11. © 2016 Priramo11 Path to Electron node-webkit nw.js Chromium Embedded Framework Atom Shell Electron [now] Cheng Zhao Lead Electron Developer Contributor to nw.js Github [ @zcbenz ] Tokyo, Japan
  12. 12. © 2016 Priramo12 Journey of Electron so far Project Began January 2013 Open Sourced May 2014 Named Electron April 2015 Released API 1.0 June 2016
  13. 13. © 2016 Priramo13 Formal Introduction Electron A framework for building cross platform desktop applications with web technology
  14. 14. © 2016 Priramo14 An Artist’s Impression of Electron
  15. 15. © 2016 Priramo15 Features All the cool things that are happened to be provided with electron to achieve the native behaviors.
  16. 16. © 2016 Priramo16 Core Features Web Technology HTML, CSS, JS Latest & Greatest All the chrome goodies No Native Skills Unless you want to One Browser Design once
  17. 17. © 2016 Priramo17 Core Features File System All of Node.js APIs Three Platforms Windows, Mac OS X, Linux Modules npm ecosystem Native Menu Dialogs & Notifications
  18. 18. © 2016 Priramo18 Core Features Windows Installers No Configuration Automatic Updates Mac & Windows with Squirrel Crash Reporting Submit to Remote Server Debugging & Profiling Content tracing by Chromium
  19. 19. © 2016 Priramo19 Architecture Explore the magic box of electron to understand the components and processes underneath
  20. 20. © 2016 Priramo 5.3.332.37 6.5.0 1.4.0 53.0.2785.113 20 Under the Hood
  21. 21. © 2016 Priramo21 Chromium • The open-source web browser project from Google. • Provides tabbed window manager, or shell for the web. • Have a minimalist user interface. • Uses V8 as the JavaScript engine. • Uses Blink as the layout engine. • Electron uses content module/content API.
  22. 22. © 2016 Priramo22 Node JS • An open-source JavaScript runtime. • Uses V8 JavaScript engine. • Enables you to run JavaScript outside the browser. • Provides an interactive shell (REPL: read-eval-print-loop) where you can execute raw JavaScript code. • Uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. • Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
  23. 23. © 2016 Priramo23 V8 JavaScript Engine • An open-source JavaScript Engine developed by The Chromium Project. • Written in C++ and JavaScript. • Implements ECMAScript as specified in ECMA-262, 3rd edition. • Runs on Windows XP or later, Mac OS X 10.5+, and Linux systems that use IA-32, ARM or MIPS processors. • Compiles JavaScript into native machine codes.
  24. 24. © 2016 Priramo24 The Two Processes Main Application Lifecycle Renderer Web Page Node.js APIs ipc Electron APIs ipc DOM Node.js APIsElectron APIs Creates Communicates
  25. 25. © 2016 Priramo25 The Two Processes Main Renderer Renderer Renderer Renderer App Web Page
  26. 26. © 2016 Priramo26 The Two Processes Chrome File Edit View Main Chrome Renderer Each Tab Older Versions Newer Versions
  27. 27. © 2016 Priramo27 Hello World Let’s build the very first desktop application using electron and get started.
  28. 28. © 2016 Priramo28 Getting Started package.json main.js index.html
  29. 29. © 2016 Priramo29 package.json { "name" : "hello-world-app", "version": "0.1.0", "main" : "main.js" }
  30. 30. © 2016 Priramo30 main.js (Main Process) const electron = require('electron'); const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow = null; app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height:600}); mainWindow.loadURL('file://' + __dirname + '/index.html'); mainWindow.on('closed', function () { mainWindow = null }) })
  31. 31. © 2016 Priramo31 index.html (Renderer Process) <html> <head> <script> window.onload = function() { var fs = require('fs') var p = document.createElement('p') p.textContent = fs.readFileSync('dataFile.txt') document.body.appendChild(p) } </script> </head> <body> <h1>Hello World</h1> </body> </html>
  32. 32. © 2016 Priramo32 Global Electron npm install –g electron electron .
  33. 33. © 2016 Priramo33 Hurray !!!
  34. 34. © 2016 Priramo34 Power of Chrome to the App
  35. 35. © 2016 Priramo35 Hello Universe Deep dive into the electron ecosystem
  36. 36. © 2016 Priramo36 Electron APIs Main Process app BrowserWindow Dialog ipcMain MenuItem powerSaverBlocker systemPreferences Tray and more … Renderer Process desktopCapturer File Object ipcRenderer remote webFrame <webview> Tag window.open function Both Process clipboard crashReporter Environment Variables nativeImage Process screen shell Synopsis
  37. 37. © 2016 Priramo37 Hard Things Made Easy const {BrowserWindow} = require('electron') let win = new BrowserWindow({transparent: true, frame: false}) win.show() globalShortcut.register('CommandOrControl+Shift+J', () => { mainWindow.webContents.toggleDevTools(); }) app.on('will-quit', () => { globalShortcut.unregisterAll() }) Accelerators can contain multiple modifiers and key codes, combined by the + character.
  38. 38. © 2016 Priramo38 Hard Things Made Easy crashReporter.start({ productName: 'YourName', companyName: 'YourCompany', submitURL: 'https://your-domain.com/url-to-submit', autoSubmit: true }) shell.moveItemToTrash('someFile.txt') shell.openExternal('https://github.com')
  39. 39. © 2016 Priramo39 Hard Things Made Easy (ipc) // In main process. const {ipcMain} = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { console.log(arg) // prints "ping" event.sender.send('asynchronous-reply', 'pong') }) ipcMain.on('synchronous-message', (event, arg) => { console.log(arg) // prints "ping" event.returnValue = 'pong' }) ipcMain Communicate asynchronously from the main process to renderer processes.
  40. 40. © 2016 Priramo40 Hard Things Made Easy (ipc) ipcRenderer Communicate asynchronously from a renderer process to the main process. // In renderer process (web page). const {ipcRenderer} = require('electron') // prints "pong" to be returned from ipcMain console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) ipcRenderer.on('asynchronous-reply', (event, arg) => { console.log(arg) // prints "pong" }) ipcRenderer.send('asynchronous-message', 'ping')
  41. 41. © 2016 Priramo41 Electron Tools electron-prebuilt Install prebuilt Electron binaries for command-line use using npm. electron-compile Use ES2015, CoffeeScript, LESS, SCSS in your app without a pre-compilation step. electron-packager Package and distribute your app. devtron Official DevTools extension. Provides features to debug all electron components. spectron Test Electron apps using ChromeDriver.
  42. 42. © 2016 Priramo42 Bolierplates electron-quick-start Clone the repo to try a simple app. electron-boilerplate Comprehensive boilerplate by szwacz which even generates installers. bozon Scaffold, run, test, and package your app. SkelEktron A ready to go app template with some useful features built-in like logger, builder & updater etc. electron-react-boilerplate Boilerplate based on React and webpack.
  43. 43. © 2016 Priramo43 Useful Components React Desktop UI toolkit for macOS and Windows built with React. cookies Adds support for 'document.cookie'. chrome-tabs Chrome like tabs. menubar High-level way to create a menubar app. Photon UI toolkit for building beautiful apps.
  44. 44. © 2016 Priramo44 Electron API Demo App
  45. 45. © 2016 Priramo45 Potential Initially developed for GitHub's Atom editor, Electron has since been used to create applications by many.
  46. 46. © 2016 Priramo46 Impactful Footprints Atom By Github
  47. 47. © 2016 Priramo47 Impactful Footprints Slack Desktop App By Slack
  48. 48. © 2016 Priramo48 Impactful Footprints Visual Studio Code By Microsoft
  49. 49. © 2016 Priramo49 Impactful Footprints WordPress Desktop App By WordPress
  50. 50. © 2016 Priramo50 Impactful Footprints Postman
  51. 51. © 2016 Priramo51 Impactful Footprints WhatsApp
  52. 52. © 2016 Priramo52 Impactful Footprints Hive Kitematic Wagon ScreenCat Mojibar WebTorrent PhoneGap Ionic Lab Avocode Nuclide Pixate Tofino Play Music Netbeast Sencha Test Nylas N1 AirTame GitKraken Jibo Gif Maker
  53. 53. © 2016 Priramo53 Roadmap Present state and future scope of improvement
  54. 54. © 2016 Priramo54 Electron Downloads 500K 1M 1.2M 4.23.2015 Atom Shell get renamed to Electron 2016
  55. 55. © 2016 Priramo55 Github Stats as of now 8 branches 11,000+ commits 248 releases 450+ contributors 4,000+ forks 300+ open issues 10+ open pull requests 1,700+ watchers 35,900+ stars 4,500+ closed issues 2,300+ closed pull requests and counting…
  56. 56. © 2016 Priramo56 Items in line Chrome Web Push support. Google Cast (Chromecast) in Electron. Better support for Linux ARM machines. Implementation of V8 inspector '--inspect‘. Enhancements of dialog and menu management. APIs to control system's onscreen keyboard. Feature to add header and footer content for PDF. Run electron renderers inside chromium sandbox. And many more…
  57. 57. © 2016 Priramo57 References Chromium http://blog.chromium.org/ https://www.chromium.org/developers/design-documents https://chromium.googlesource.com/chromium/src/+/lkgr/docs Node.js https://en.wikipedia.org/wiki/Node.js#Technical_details https://nodejs.org/api/ http://blog.modulus.io/absolute-beginners-guide-to-nodejs V8 JavaScript Engine http://v8-io12.appspot.com/ http://thibaultlaurens.github.io/javascript/2013/04/29/how-the-v8-engine-works/ https://en.wikipedia.org/wiki/V8_(JavaScript_engine) https://github.com/eclipsesource/j2v8
  58. 58. © 2016 Priramo58 Resources Electron http://electron.atom.io/ https://github.com/sindresorhus/awesome-electron Discuss: https://discuss.atom.io/c/electron Slack: http://atom-slack.herokuapp.com/ @ElectronJS: https://twitter.com/ElectronJS Email: electron@github.com https://app.pluralsight.com/library/courses/electron-playbook/table-of-contents https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658 https://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy Study Materials
  59. 59. © 2016 Priramo59 Most things were Before they became EASY

×