Pro Yearly is on sale from $80 to $50! »

Desktop JS — Empire JS 2016

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

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
370
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
86
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
140
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
230
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
1
180
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
76
30ac27c2768b1df077c5f236936bd256?s=48 emorikawa
0
350

Other Decks in Programming

See All in Programming
8a6e58b272b266faf22d8a3b2927624f?s=48 j796160836
3
560
67962a042668ffac9323b8e0c55eee6e?s=48 keisuke69
6
3.2k
D65e990ab4df0d0a75c3b0ae5d036bc5?s=48 martinlippert
1
240
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
1
150
B3f560d34c14a9113e5024bc34ac26a0?s=48 heyitsmohit
1
220
1dfa2bb34977b1db41d0d46d4505183f?s=48 osuke
2
330
D02d96057c4cd905d60d14549b00db0d?s=48 stvansolano
0
260
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
200
6a1345d8e6dd15b2c78eff0c331963b1?s=48 dbrumann
0
160
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
39
14k
Fed4c6cfec7502b771e12f08f8d5ec6d?s=48 okajun35
0
620
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
300

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
26
1.8k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
27
910
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
110k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
5
1.2k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.3k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.4k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
114
7.1k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
651
110k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
625
41k
245cee81a9c424266e5e401d844ea881?s=48 lara
15
2.5k

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