Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Takes the Desktop — Scotland JS

30ac27c2768b1df077c5f236936bd256?s=47 Evan Morikawa
June 03, 2016
Programming
0
150

JS Takes the Desktop — Scotland JS

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

30ac27c2768b1df077c5f236936bd256?s=128

Evan Morikawa

June 03, 2016
Tweet

More Decks by Evan Morikawa

See All by Evan Morikawa
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
410
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
90
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
1
340
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
250
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
1
180
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
80
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
370

Other Decks in Programming

See All in Programming
827c50b8ee8994d5feac521f09178d0e?s=48 karosuwindam
0
150
E3c2bac7a4a04823dda122cf243edd01?s=48 claudioed
1
260
85d7f0ae00c0cf1092dffcec966e3ae9?s=48 mattak
26
15k
706ea99a045bb3f273ab518a3db3e113?s=48 kamiokan
0
230
8ffce1486e39ee3f43f52be5580b9966?s=48 luiznasciment0
1
150
56047a7b11797f42c2e7030d771fe803?s=48 oleur
1
100
74b66d72163c42c8d157f325e3ebb45e?s=48 gamine
0
170
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
1
650
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
170
091c8449decb2f3549c695b5f903865a?s=48 sh_akira
3
180
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
0
190
2350801025b8e8592dbaa8dd98a24cbb?s=48 ewolff
0
110

Featured

See All Featured
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
120
8k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.3k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
20
780
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
96
14k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
242
21k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
8
490
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.4k

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
  2. None
  3. None
  4. None
  5. None

  6. Swing Qt Cocoa GTK WPF/WinRT …

  7. NW.js (Node Webkit)

  8. Shell

  9. None
  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. 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
  27. None

  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
  30. None

  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
  33. None

  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
  43. None

  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
  48. None

  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