Desktop JS — Empire JS 2016

Desktop JS — Electron and building applications on the desktop, with Javascript.

Transcript

1. Desktop JS Evan Morikawa | @e0m | evan@nylas.com | May 2016
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. Desktop JS 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility
29. Desktop JS 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility
31. Desktop JS 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
32. Desktop JS 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
34. Desktop JS 1. “Native” experience 2. Performance 3. Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
35. Desktop JS 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. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q).subscribe((threads) => { this.setState({threads}) })
38. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn).subscribe((threads) => { this.setState({threads}) })
39. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
40. Desktop JS 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
41. Desktop JS 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
43. Desktop JS 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
44. Desktop JS 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”
45. https://github.com/nylas/n1 Open Source
46. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada @karim_hamidou @jackiehluo Drew Regitsky
48. Evan Morikawa | @e0m | evan@nylas.com | May 2016 Thank you! Slides here
49. Desktop JS Evan Morikawa | @e0m | evan@nylas.com | May 2016