The Age of the Javascript-Powered Desktop — Dinosaur JS

The Age of the Javascript-Powered Desktop. Dinosaur JS June 24, 2016

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