Single Page Apps in Electron

Talk given at CodeConf Nashville

Transcript

1. Single Page Apps in Electron Paul Be(s (@paulcbe(s)
2. What is Electron?
3. Electron is a pla.orm for wri2ng Desktop apps in ! JavaScript !
4. Why is that Cool?
5. How does it work?
7. In the Beginning, there is io.js
8. Chromium calls this the "Browser process". This is confusing.
9. import app from 'app'; // Wait for Chromium to load app.on('ready', () => { // TODO: Write entire app });
10. Soooooo, where does Chrome come in?
11. ! BrowserWindow !
12. // Wait for Chromium to load import BrowserWindow from 'browser-window'; import path from 'path'; let wnd = null; app.on('ready', () => { // Load wnd = new BrowserWindow({width: 500, height: 500}); wnd.loadUrl('file://' + path.join(__dirname, 'index.html')); // Show the window, then once it opens, pop the developer tools wnd.show(); setTimeout(() => wnd.openDevTools(), 5*1000); });
13. Now we've got a Window Chromium calls this a "Renderer process". This is confusing. Mul$ple Processes!
14. No Parents Many web features that normally require permission don't in Electron io.js is available in the window, you can require node modules and use them
15. How is the Slack app different than Atom?
16. Atom has Desktop Zen Nature™ 100% of the assets are shipped in the applica3on Atom doesn't care about the Internet on startup
17. Slack has Website Zen Nature™ Slack was originally designed as a website Upda%ng a website is so much faster than upda%ng a desktop app How can we get the benfits of both?
18. Electron allows us to create a web browser that does whatever we want.
19. Electron also allows us to create a web browser that is wildly insecure (❗)
20. If remote 3rd party code gets ahold of node.js, we've got Big Problems So what do we do?
21. ! <WebView> !
22. WebView is like an iframe WebViews are sandboxed from io.js, and have normal web browser security rules If a WebView crashes, you can just restart it
23. But how can I use my Electron Super Powers then?!?!
24. WebViews give us an escape hatch: Preload Before the WebView navigates to the page you want, you get to run an io.js script There is no DOM, no document, just your script
25. In that script, you can set globals that will exist on the page
26. !
27. Preload Scripts // // This object will exist on the page once it loads // window.electronApi = { app: new AppIntegration(), clipboard: new ClipboardIntegration(), dock: new DockIntegration(), notice: new NotificationIntegration(), teams: new TeamIntegration(), downloads: new DownloadIntegration(), window: new WindowApi(browserWindowId, process.guestInstanceId), contextMenu: contextMenu, spellCheckingHelper: spellCheckingHelper, };
28. Some Pro-Tips™ You need to make sure you don't leak io.js objects Debugging preload scripts isn't easy... ...so use ipc.sendToHost to signal your renderer process
29. Demo!
30. Thanks!
32. Red threads • Here's how we Process Model • basics of browser + renderer process • your globals are not really global • Atom approach vs Slack approach • Describe Atom (ship all soBware) • Describe Slack (webview with super powers) • What even is a WebView tag