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 with web technologies!

1,209 views

Published on

Distinct & accurate slide deck about Electron as a framework for creating native desktop applications from *instinctools frontend developer Andrew Zhemojtel.

Published in: Software
  • Yes you are right. There are many research paper writing services available now. But almost services are fake and illegal. Only a genuine service will treat their customer with quality research papers. ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Electron. Build cross platform desktop apps with web technologies!

  1. 1. Build cross platform desktop apps with web technologies
  2. 2. Electron is a framework for creating native applications with web technologies like JavaScript, HTML and CSS. What is Electron?
  3. 3. Electron History ● Created GitHub (2013) ● Formally Atom Shell ● Open sourced (May 2014) ● Electron v1.0.0 (May 9th 2016)
  4. 4. INSIDE ELECTRON + node.js chromium
  5. 5. INSIDE ELECTRON + node.js chromium libchromiumcontent
  6. 6. Electron Features
  7. 7. HTML/CSS/JS
  8. 8. Cross Platform
  9. 9. Native Menu & Notifications
  10. 10. Auto Update
  11. 11. Crash reporting
  12. 12. Debugging
  13. 13. Basic Concepts
  14. 14. Main Process Main process responsible for the integration and interaction with GUI operating system, for creating web pages.
  15. 15. Renderer Process Each web page in Electron runs in its own process, which is called renderer process.
  16. 16. Hello World!
  17. 17. Installation # npm install electron-prebuilt
  18. 18. Structure
  19. 19. package.json
  20. 20. main.js
  21. 21. index.html
  22. 22. Run app # electron . // or # ./node_modules/.bin/electron .
  23. 23. Application Packaging • electron-packager • electron-builder • grunt-electron-builder • gulp-electron // command line # electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
  24. 24. Application Packaging # npm install -g asar # asar pack your-app app.asar
  25. 25. Demo
  26. 26. Electron API
  27. 27. App Control your application’s event lifecycle. Main Process
  28. 28. App Events: • ready • before-quit • window-all-closed • will-quit • quit • … Main Process
  29. 29. App Methods • app.quit() • app.getAppPath() • app.getVersion() • app.setName(name) • app.addRecentDocument(path) • app.setUserTasks(tasks) • app.dock.setMenu(menu) • … Main Process
  30. 30. BrowserWindow Create and control browser windows. Main Process
  31. 31. BrowserWindow Options • width • height • resizable • movable • minimizable • maximizable • closable • show Main Process • skipTaskbar • kiosk • title • icon • frame • autoHideMenuBar • webPreferences • …
  32. 32. BrowserWindow Events: • close • closed • responsive • hide • show • move • focus • blur Main Process • enter-full-screen • leave-full-screen • minimize • swipe • …
  33. 33. BrowserWindow BrowserWindow instance properties: • win.webContents - render and control web pages. • win.id Main Process
  34. 34. BrowserWindow BrowserWindow instance methods: • win.close() • win.focus() • win.blur() • win.isFocused() • win.show() • win.hide() • win.isVisible() • win.setMenu(menu) Main Process • win.flashFrame(flag) • win.setKiosk(flag) • win.isKiosk() • win.loadURL(url[, options]) • win.setThumbarButtons(buttons) • win.setAutoHideMenuBar(hide) • win.setIgnoreMouseEvents(ignore) • ....
  35. 35. Communication between processes Electron has several ways to communicate between the main process and renderer processes. Like ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style communication. • ipcRenderer - renderer process • ipcMain - main process • remote - renderer process
  36. 36. Remote Use main process modules from the renderer process. Renderer Process
  37. 37. autoUpdater Requires: • HTTP server API • code-sign • installer (for Windows) Server Response: Main Process
  38. 38. autoUpdater Events: • error • checking-for-update • update-available • update-not-available • update-downloaded Main Process Methods: • autoUpdater.setFeedURL(url) • autoUpdater.checkForUpdates() • autoUpdater.quitAndInstall()
  39. 39. Installer (for Windows) • electron-winstaller • grunt-electron-installer • …
  40. 40. crashReporter Submit crash reports to a remote server. Main & Renderer Processes
  41. 41. Electron API • Accelerator • Global Shortcut • Dialog • Menu • Tray • Desktop Capturer • Shell More on http://electron.atom.io/docs
  42. 42. Native Node Modules # npm install --save-dev electron-rebuild // every time after install native module # ./node_modules/.bin/electron-rebuild
  43. 43. Debuging Electron App • Electron includes default Chrome DevTools Extension. • Add DevTools Extension • Debug main process (--debug=[port]; --debug-brk=[port]) • Devtron (IPC monitor; Event inspector; App Linter; Require graph)
  44. 44. Testing Electron App Spectron – Electron Testing Framework built on ChromeDriver and WebDriverIO • Full list Chromium and Electron APIs • Interact with and verify the behavior of multiple windows from a single test. • Can be used with any testing library like Mocha, Jasmine, AVA, Chai
  45. 45. Photon
  46. 46. Electron vs nw.js • Entry of Application: js vs html • Build System: libchromiumcontent vs Chromium • Node Integration: node_bindings vs patching Chromium • Context: Multi-context vs Single-context http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition
  47. 47. Built on Electron More on http://electron.atom.io/apps
  48. 48. Thank you for attention!

×