The Age of the Javascript-Powered Desktop — Dinosaur JS

Transcript

1. The Age of the Javascript-Powered Desktop Evan Morikawa | @e0m

   | evan@nylas.com Dino JS | June 24, 2016

2. The Precambrian Eon 1.3 billion seconds ago

3. The Precambrian Eon C | C++ Swing | Qt |

   Cocoa | GTK | WPF/WinRT | … 1.3 billion seconds ago

4. The Paleozoic Era 145 million seconds ago

5. The Paleozoic Era NW.js (Node Webkit) 145 million seconds ago

6. The Mesozoic Era 52 million seconds ago

7. The Mesozoic Era Shell hangouts.google.com/hangouts/_/nylas.com/code-challenge 52 million seconds ago

8. The Cenozoic Era 36 million seconds ago

9. The Cenozoic Era 36 million seconds ago

10. None
11. None
12. None

13. Chromium

14. Chromium Browser aka Backend aka Main Process

15. Chromium Browser aka Backend aka Main Process C++

16. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer

    Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)

17. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer

    Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc

18. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML

    / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc

19. Node Event Loop libuv Node & Chromium Mashup

20. Chromium Events MessageLoop Chromium Node & Chromium Mashup

21. Chromium Events MessageLoop Chromium Node Event Loop libuv ? Node

    & Chromium Mashup

22. Chromium Events libuv Chromium Node & Chromium Mashup

23. Chromium Events MessageLoop Chromium Node Event Loop libuv Node &

    Chromium Mashup

24. Node Event Loop libuv Chromium Events MessageLoop Chromium IO poll

    Node & Chromium Mashup

25. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML

    / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc

26. Nylas N1

27. Nylas N1 main.js

28. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

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()

    index.html index.js

31. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render()

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() Composer Work Window
34. None

35. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility

36. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility
37. None

38. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

39. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

40. Native Electron Extensions npm install sqlite3 electron/electron-rebuild

41. electron/electron-rebuild Native Electron Extensions

42. electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell Native Electron Extensions

43. 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 Native Electron Extensions

44. nodejs/node-gyp Native Electron Extensions

45. nodejs/node-gyp  gyp (Generate Your Projects) make, gcc, XCode, Visual

    Studio Native Electron Extensions

46. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows

47. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows
48. None
49. None

50. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows

51. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows

52. ReactiveX.js

53. const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q).subscribe((threads)

    => { this.setState({threads}) })

54. const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q)

    .filter(myFn).subscribe((threads) => { this.setState({threads}) })

55. const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q)

    .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
56. None

57. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987

58. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987

59. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks

60. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks
61. None

62. https://github.com/nylas/n1 Open Source

63. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks Native extensions | Cross-platform CSS | Retina Detail

64. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks Native extensions | Cross-platform CSS | Retina Detail
65. None
66. None
67. None
68. None

69. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada Halla Moore @jackiehluo

    Drew Regitsky

70. Evan Morikawa | @e0m | evan@nylas.com | June 2016 Thank

    you! Slides here