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

JS Takes the Desktop — Scotland JS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Evan Morikawa Evan Morikawa
June 03, 2016
Programming
210
0

JS Takes the Desktop — Scotland JS

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

Avatar for Evan Morikawa

Evan Morikawa

June 03, 2016

More Decks by Evan Morikawa

See All by Evan Morikawa
The Age of the Javascript-Powered Desktop — Dinosaur JS
Avatar for Evan Morikawa emorikawa
0
920
Node on the Desktop — Node Conf Oslo 2016
Avatar for Evan Morikawa emorikawa
0
150
Desktop JS — Empire JS 2016
Avatar for Evan Morikawa emorikawa
1
580
Plugins with React & Challenges with Data
Avatar for Evan Morikawa emorikawa
0
640
Space City JS — Using Electron & React to Build N1
Avatar for Evan Morikawa emorikawa
1
250
MIT N1 Preview
Avatar for Evan Morikawa emorikawa
0
530
Scaling Flux
Avatar for Evan Morikawa emorikawa
0
590

Other Decks in Programming

See All in Programming
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
150
GitHubCopilotCLIをはじめよう.pdf
Avatar for tkym htkym
0
270
ついに来た！本格的なマルチクラウド時代の Google Cloud
Avatar for maroon1st maroon1st
0
250
ハーネスエンジニアリングとは？
Avatar for kinopee kinopeee
13
6.2k
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
2
660
How Swift's Type System Guides AI Agents
Avatar for Yuta Koshizawa koher
0
310
Making the RBS Parser Faster
Avatar for Soutaro Matsumoto soutaro
0
520
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
300
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
860
Back to the roots of date
Avatar for jinroq jinroq
0
450
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
780
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
Avatar for yasunori yasunori0418
1
190

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
280
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
120
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
240
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
180
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

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. 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 | [email protected] | June 2016 Thank

    you! Slides here

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

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