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

Desktop JS — Empire JS 2016

30ac27c2768b1df077c5f236936bd256?s=47 Evan Morikawa
May 27, 2016
Programming
1
340

Desktop JS — Empire JS 2016

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

30ac27c2768b1df077c5f236936bd256?s=128

Evan Morikawa

May 27, 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
0
150
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
F6ceb15fb20b52f49e375cec868a0107?s=48 tokitakumi
1
470
C655ad8165b97ea420bd8a33c62e7895?s=48 pco2699
0
120
74b66d72163c42c8d157f325e3ebb45e?s=48 gamine
0
170
924d7de2a5a7102a597728e5edbbff78?s=48 kekyo
0
220
D1dd88d67a1b17b9d2ad981b75d205f3?s=48 myamashii
0
240
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
1
320
6317140224223dc052beb887078cc810?s=48 nelca
0
130
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
1
850
667fbca1f58bc0215c744b5ae8f8e5d2?s=48 manuelrauber
0
110
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
12
4.6k
2350801025b8e8592dbaa8dd98a24cbb?s=48 ewolff
1
130
B31f9495679ee5513a2f9904767336af?s=48 kidokidofire
1
160

Featured

See All Featured
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
59
6.5k
245cee81a9c424266e5e401d844ea881?s=48 lara
590
61k
24fc194843a71f10949be18d5a692682?s=48 gr2m
85
11k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
93
3.1k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8.2k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
11
740
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.7k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
311
17k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
3.8k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
54
4.4k

Transcript

  1. Desktop JS Evan Morikawa | @e0m | evan@nylas.com | May

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

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

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

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

  48. Evan Morikawa | @e0m | evan@nylas.com | May 2016 Thank

    you! Slides here

  49. Desktop JS Evan Morikawa | @e0m | evan@nylas.com | May

    2016