Electron - Desktop GUI with Node.js

Cross platform app development in Electron

Transcript

1. Desktop GUI with Node.js Cross platform app development in Electron
2. 5 min electron quickstart
3. Install electron runtime • sudo npm install -g electron ◦ earlier package was called “electron-prebuilt” ◦ works in Windows 7+, Mac 10.x and Linux • sudo npm install --arch=ia32 -g electron ◦ to force a different architecture
4. Add these files package.json index.html main.js
5. Add to pacakge.json main: “main.js” This is “entry point” of an electron app
6. Add to main.js function createWindow () { // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(`file://${__dirname}/index.html`) // Emitted when the window is closed. win.on('closed', () => { win = null }) }
7. Add to main.js const {app, BrowserWindow} = require('electron') app.on('ready', createWindow)
8. Add to index.html <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>.
10. Chrome vs Electron
11. Browser Process Tabs Renderer Process Renderer Process Renderer Process
12. Browser Process Tabs Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit
13. Browser Process User interface Network Storage Tabs Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit
14. Browser Process User interface Network Storage ResourceMessageFilter ResourceMessageFilter Tabs Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit ResourceMessageFilter
15. Forking Chrome to Electron • Fork “libchromiumcontent” and not whole Chrome • Chrome’s “content” module renders the DOM and hooks into V8 • Different from previous (NW.js) approach. Node process starts a renderer process.
16. Node (Main) Process Node Native API System API Storage IPC IPC Windows Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit IPC OS Hooks libchromiumcontent libchromiumcontent libchromiumcontent GPS
17. Node - Renderer Interactions
18. Electron Process Architecture Main Process - Only one per application lifecycle. Runs like any Node.js script Renderer Process - One per UI instance (Tray, Window, Dialog). Runs a libchromiumcontent instance in it.
19. Inter Process Communication (IPC)
20. Reference sharing between processes
21. OS Native GUI Hooks
22. Menu Toolbar | Context
23. Toolbar/Application Menu : Main Process
24. Create a menu template template : { label: 'Custom', submenu: [ { label: 'Do something', click: (item, focusedWindow) => { dialog.info("Yay did something ! ", "Done something") } } ] }
25. Build menu from template and set Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
26. Context Menu : Renderer Process (via IPC)
27. Create a menu template const {remote} = require('electron') // for IPC const {Menu, MenuItem} = remote const menu = new Menu() menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }})) menu.append(new MenuItem({type: 'separator'})) menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
28. Attach to window event window.addEventListener('contextmenu', (e) => { e.preventDefault() menu.popup(remote.getCurrentWindow()) }, false)
29. Tray Notification Area
30. Notifications Plain old HTML5 Webkit Notifications
31. Recents For apps that open files
32. Launcher Menus
33. Quicklaunch Tasks (Windows) Using Jumplists For Quicklaunch icons in taskbar
34. Dock Menu (OSX) When App is added to dock Extra launcher options
35. Launcher Shortcuts (Linux) Works with Unity, GNOME, KDE (All freedesktop.org standard) Uses entries to .desktop file Not exactly an Electron feature
36. Debugging in Electron
37. Debugging the renderer Open Developer Tools in the window.
38. Debugging the renderer Open Developer Tools in the window.
39. Debugging the main process electron –debug=1337 . Or electron –debug-brk=1337 .
40. Debugging the main process Add a npm script - debug: “electron –debug=1337.&; node-inspector&; electron “0.0.0.0:8080?port=1337”
41. Ship it ! Cross platform packaging and deployment Rebranding (icons) Packaging (asar) Binary (exe, app, bin) Installing (msi, dmg, deb) Auto Updates
42. The Package (Mac) electron/Electron.app/Contents/Resources/app/ ├── package.json ├── main.js └── index.html Or electron/Electron.app/Contents/Resources/ └── app.asar
43. The Package (Windows/Linux) electron/resources/app ├── package.json ├── main.js └── index.html Or electron/resources/ └── app.asar
44. Rebranding (Windows) Rename electron.exe to anything. Change the icon with any .ico file using Windows win32 hexediting software (eg. winhex, rcedit)
45. Rebranding (Linux) Rename electron to anything. Add a .desktop entry to Applications folder specifying the icon in png
46. Rebranding (Mac) Rename Electron.app to anything. Change Application name in Electron.app/Contents/Info.plist Change the png icon inside the .app folder
47. Popular Distribution Tools electron-packager – Create .exe, .app and /dist folders for Win, Mac and Linux respectively. electron-builder – Create .msi (Windows), .dmg/.pkg (Mac) and .deb/.rpm (Linux). Auto update via Squirrel. Configure updates to be asar-only.
48. The future of Electron
49. Electron Runtime Mode • Long discussion on issue #673 on Github • An “electron runtime” like the “Java Runtime Environment” or “.NET Runtime” • Apps will be distributed with a “minimum required Electron runtime”. • App sizes down by 30~50MB (Size of libchromiumcontent)
50. Cross-platform UI Kits/Frameworks Think ionic but for desktop apps Check out photon and React Desktop
51. React Desktop
52. React Desktop
53. Photon (photonkit.com)
54. Implementation demo (of what we talked of today) https://github.com/championswimmer/jsfoo-electron-example Check commit history for step-by-step additions
55. Tools and Libraries https://github.com/sindresorhus/awesome-electron
56. Thank you @championswimmer