Electron - Build cross platform desktop apps
Download as PPSX, PDF11 likes3,317 views
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.
![© 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](https://image.slidesharecdn.com/electronbypriramo-160925042709/85/Electron-Build-cross-platform-desktop-apps-11-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Electron - Build cross platform desktop apps (20)
Ad
Recently uploaded (20)
Electron - Build cross platform desktop apps
- 1. © 2016 Priramo © 2016 Priramo By Priyaranjan Mohanty
- 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. © 2016 Priramo3 But Why to create a Desktop App ?
- 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. © 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. © 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
- 8. © 2016 Priramo8 Story of Electron Features Architecture Hello World Hello Universe Potential Roadmap Up Ahead
- 9. © 2016 Priramo9 Story of Electron The journey of an idea to make things simple and easy.
- 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. © 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. © 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. © 2016 Priramo13 Formal Introduction Electron A framework for building cross platform desktop applications with web technology
- 14. © 2016 Priramo14 An Artist’s Impression of Electron
- 15. © 2016 Priramo15 Features All the cool things that are happened to be provided with electron to achieve the native behaviors.
- 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. © 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. © 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. © 2016 Priramo19 Architecture Explore the magic box of electron to understand the components and processes underneath
- 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. © 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. © 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. © 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. © 2016 Priramo25 The Two Processes Main Renderer Renderer Renderer Renderer App Web Page
- 26. © 2016 Priramo26 The Two Processes Chrome File Edit View Main Chrome Renderer Each Tab Older Versions Newer Versions
- 27. © 2016 Priramo27 Hello World Let’s build the very first desktop application using electron and get started.
- 28. © 2016 Priramo28 Getting Started package.json main.js index.html
- 29. © 2016 Priramo29 package.json { "name" : "hello-world-app", "version": "0.1.0", "main" : "main.js" }
- 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. © 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. © 2016 Priramo32 Global Electron npm install –g electron electron .
- 33. © 2016 Priramo33 Hurray !!!
- 34. © 2016 Priramo34 Power of Chrome to the App
- 35. © 2016 Priramo35 Hello Universe Deep dive into the electron ecosystem
- 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 2016 Priramo44 Electron API Demo App
- 45. © 2016 Priramo45 Potential Initially developed for GitHub's Atom editor, Electron has since been used to create applications by many.
- 46. © 2016 Priramo46 Impactful Footprints Atom By Github
- 47. © 2016 Priramo47 Impactful Footprints Slack Desktop App By Slack
- 48. © 2016 Priramo48 Impactful Footprints Visual Studio Code By Microsoft
- 49. © 2016 Priramo49 Impactful Footprints WordPress Desktop App By WordPress
- 50. © 2016 Priramo50 Impactful Footprints Postman
- 51. © 2016 Priramo51 Impactful Footprints WhatsApp
- 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. © 2016 Priramo53 Roadmap Present state and future scope of improvement
- 54. © 2016 Priramo54 Electron Downloads 500K 1M 1.2M 4.23.2015 Atom Shell get renamed to Electron 2016
- 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. © 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. © 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. © 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: [email protected] 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. © 2016 Priramo59 Most things were Before they became EASY