JS Takes the Desktop — Scotland JS

Electron, React, & Native Win/Mac/Linux Experiences At Scale

Transcript

1. JS Takes The Desktop Evan Morikawa | @e0m | evan@nylas.com | June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale
6. Swing Qt Cocoa GTK WPF/WinRT …
7. NW.js (Node Webkit)
8. Shell
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. Nylas N1
20. Nylas N1 main.js
21. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
22. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
23. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js
24. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
25. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
26. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render() Composer Work Window
28. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility
29. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility
31. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
32. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
34. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
35. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
36. ReactiveX.js
37. ReactiveX.js Thank you @mattpodwysocki!
38. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q).subscribe((threads) => { this.setState({threads}) })
39. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn).subscribe((threads) => { this.setState({threads}) })
40. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
41. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail SQL | Observables | Task Jasnkbusting | Worker windows
42. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows SQL | Observables | Task
44. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail React | Components as “data” Jasnkbusting | Worker windows SQL | Observables | Task
45. JS on the Desktop 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows SQL | Observables | Task React | Components as “data”
46. https://github.com/nylas/n1 Open Source
47. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada @karim_hamidou @jackiehluo Drew Regitsky
49. Evan Morikawa | @e0m | evan@nylas.com | June 2016 Thank you! Slides here
50. JS Takes The Desktop Evan Morikawa | @e0m | evan@nylas.com | June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale