Node on the Desktop — Node Conf Oslo 2016

Node on the Desktop via Electron.

Transcript

1. Node on the Desktop Evan Morikawa | @e0m | evan@nylas.com | June 2016
6. Node on the Desktop 1. 2. 3. 4. 5.
7. Node on the Desktop 1. A Marriage of Node & Chromium 2. 3. 4. 5.
8. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. 4. 5.
9. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. 5.
10. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5.
11. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility
12. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility
14. Swing Qt Cocoa GTK WPF/WinRT …
15. NW.js (Node Webkit)
16. Shell
21. Chromium
22. Chromium Browser aka Backend aka Main Process
23. Chromium Browser aka Backend aka Main Process C++
24. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)
25. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
26. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
27. Nylas N1
28. Nylas N1 main.js
29. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
30. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
31. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js
32. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
33. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
34. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render() Composer Work Window
35. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
36. A Marriage of Event Loops
37. Node Event Loop libuv A Marriage of Event Loops
38. Chromium Events MessageLoop Chromium A Marriage of Event Loops
39. Chromium Events MessageLoop Chromium A Marriage of Event Loops Node Event Loop libuv ?
40. Chromium Events libuv Chromium A Marriage of Event Loops
41. Chromium Events MessageLoop Chromium A Marriage of Event Loops Node Event Loop libuv
42. Node Event Loop libuv Chromium Events MessageLoop Chromium A Marriage of Event Loops IO poll
43. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts
44. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts
45. Native Electron Extensions npm install sqlite3 electron/electron-rebuild
46. Native Electron Extensions electron/electron-rebuild
47. Native Electron Extensions electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell
48. Native Electron Extensions electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell npm rebuild --target=${electronVersion} --arch=x64 --runtime=electron
49. Native Electron Extensions nodejs/node-gyp
50. Native Electron Extensions nodejs/node-gyp  gyp (Generate Your Projects) make, gcc, XCode, Visual Studio
51. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows
52. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows
54. ReactiveX.js
55. ReactiveX.js Thank you @mattpodwysocki!
56. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q).subscribe((threads) => { this.setState({threads}) })
57. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn).subscribe((threads) => { this.setState({threads}) })
58. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
59. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows SQLite | Live Queries to React
60. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows SQLite | Live Queries to React
62. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows SQLite | Live Queries to React Worker Windows
63. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows SQLite | Live Queries to React Worker Windows
65. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility Shared event loop | Node & Chromium Contexts Node gyp | Compiled for Windows SQLite | Live Queries to React Worker Windows “Installed” Plugins | React
66. Node on the Desktop 1. A Marriage of Node & Chromium 2. Native (Electron) Extensions 3. DOM with fs 4. Process Control 5. Plugins & Extensibility “Installed” Plugins | React Worker Windows SQLite | Live Queries to React Node gyp | Compiled for Windows Shared event loop | Node & Chromium Contexts
67. https://github.com/nylas/n1 Open Source
68. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada @karim_hamidou @jackiehluo Drew Regitsky
70. Evan Morikawa | @e0m | evan@nylas.com | June 2016 Thank you! Slides here
71. Node on the Desktop Evan Morikawa | @e0m | evan@nylas.com | June 2016