Node on the Desktop — Node Conf Oslo 2016

Node on the Desktop — Node Conf Oslo 2016

Node on the Desktop via Electron.

30ac27c2768b1df077c5f236936bd256?s=128

Evan Morikawa

June 04, 2016
Tweet

Transcript

  1. Node on the Desktop Evan Morikawa | @e0m | evan@nylas.com

    | June 2016
  2. None
  3. None
  4. None
  5. None
  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
  13. None
  14. Swing Qt Cocoa GTK WPF/WinRT …

  15. NW.js (Node Webkit)

  16. Shell

  17. None
  18. None
  19. None
  20. None
  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
  53. None
  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
  61. None
  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
  64. None
  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
  69. None
  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