JS Takes the Desktop — Scotland JS

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

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
360
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
84
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
1
290
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
220
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
1
180
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
73
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
340

Other Decks in Programming

See All in Programming
9ae4f3862d4cb0771cfd36e43252f755?s=48 kurotanshi
0
240
0ca0c0ec6efe3a7f5220332a910e6da0?s=48 shinyoshiaki
1
510
B8403d102456248570005ee7fb2ba0f7?s=48 tooppoo
4
450
29bfc9e2bc82b775a30af70be3196386?s=48 hannaprinz
0
100
E48bd6aeb77b88d5762cd5d96e2c397d?s=48 wen_liao
2
1.1k
Bdd3fb3269e67bbc512f2530c409a926?s=48 tnishinaga
9
5.5k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
200
933291444e456bfb511a66a2fa9c6929?s=48 j5ik2o
7
1.2k
F54b73a93fb75a12fa6c28b26ca0bb62?s=48 kawakawaryuryu
0
120
Faf9deb49f754b79390b64d036725f67?s=48 yuukiyo
1
750
5d769d109697012317c09c6a27a6a4bf?s=48 linyows
2
140
4131d2f57a0db2a2b4d9a62bd389fd44?s=48 tarcieri
0
260

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
245cee81a9c424266e5e401d844ea881?s=48 lara
588
60k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
27k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
11k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
477
150k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
366
42k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
175
14k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.3k

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