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

Desktop JS — Empire JS 2016

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

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