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

JS Takes the Desktop — Scotland JS

JS Takes the Desktop — Scotland JS

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

Evan Morikawa

June 03, 2016
Tweet

More Decks by Evan Morikawa

Other Decks in Programming

Transcript

  1. JS Takes The Desktop Evan Morikawa | @e0m | [email protected]

    | June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale
  2. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer

    Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)
  3. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer

    Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
  4. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML

    / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
  5. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility
  6. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility
  7. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
  8. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
  9. 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
  10. 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
  11. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn).subscribe((threads) => { this.setState({threads}) })
  12. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
  13. 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
  14. 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
  15. 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
  16. 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”
  17. JS Takes The Desktop Evan Morikawa | @e0m | [email protected]

    | June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale