The New Desktop: Electron, React, and Pixel-Perfect Native-Feeling Experiences — Forward 4 Web Summit

Build beautiful, cross-platform Mac, Linux, and Windows applications as easily as any webpage — without cross-browser headaches. Developers have tried before to make desktop apps with simple web frames and imperative jQuery soup. Performance and stability suffered. Modern web tooling is drastically improving this experience. In this talk Nylas application engineer Evan Morikawa will use his experience building a highly extensible desktop email client to show how Electron, React, Flux, Node, SQL, and modern CSS create a pixel-perfect, fast, native-feeling app.

Transcript

1. The New Desktop Electron, React, and Pixel-Perfect Native-Feeling Experiences Evan Morikawa | @e0m | evan@nylas.com | Feb 2016
5. Roger Wang github/rogerwang Cheng Zhao github/zcbenz The Dream of Web NW.js (Node Webkit) Slack Spotify LightTable
6. Cheng Zhao github/zcbenz April, 2013 April, 2015
8. Chromium
9. Chromium Browser aka Backend aka Main Process
10. Chromium Browser aka Backend aka Main Process C++
11. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)
12. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
13. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
14. Nylas N1
15. Nylas N1 main.js
16. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
17. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
18. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js
19. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
20. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
21. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render() Composer Work Window
23. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility
24. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges)
25. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges)
26. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail
27. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail
28. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail SQL | Task queue | Delta Stream
29. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail SQL | Task queue | Delta Stream
30. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail SQL | Task queue | Delta Stream Jankbusting | Worker windows | Indexes | ASAR
31. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail SQL | Task queue | Delta Stream Jankbusting | Worker windows | Indexes | ASAR
32. React ReactiveX.js Redux Flux +
33. ReactiveX.js
34. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility (and challenges) Native extensions | Cross-platform CSS | Retina Detail SQL | Task queue | Delta Stream Jankbusting | Worker windows | Indexes | ASAR React | Components as “data” | Decoupled Stores
35. Perks of the New Desktop: 1. Native experience 2. Offline & Data Storage 3. Modern Performance Tools 4. Extensibility Native extensions | Cross-platform CSS | Retina Detail SQL | Task queue | Delta Stream React | Components as “data” | Decoupled Stores Jankbusting | Worker windows | Indexes | ASAR (and challenges)
36. The New Desktop
41. https://github.com/nylas/n1 Open Source
42. N1 Core Team https://nylas.com/team-and-culture @e0m @bengotow @juanstejada YOU! @karim_hamidou @jackiehluo
43. Evan Morikawa | @e0m | evan@nylas.com | Feb 2016 Thank you Slides here
44. The New Desktop Electron, React, and Pixel-Perfect Native-Feeling Experiences Evan Morikawa | @e0m | evan@nylas.com | Feb 2016