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

The Age of the Javascript-Powered Desktop — Din...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Evan Morikawa Evan Morikawa
June 24, 2016
Programming
920
0

The Age of the Javascript-Powered Desktop — Dinosaur JS

The Age of the Javascript-Powered Desktop. Dinosaur JS June 24, 2016

Avatar for Evan Morikawa

Evan Morikawa

June 24, 2016

More Decks by Evan Morikawa

See All by Evan Morikawa
Node on the Desktop — Node Conf Oslo 2016
Avatar for Evan Morikawa emorikawa
0
150
JS Takes the Desktop — Scotland JS
Avatar for Evan Morikawa emorikawa
0
220
Desktop JS — Empire JS 2016
Avatar for Evan Morikawa emorikawa
1
590
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
540
Scaling Flux
Avatar for Evan Morikawa emorikawa
0
600

Other Decks in Programming

See All in Programming
SkillsをS3 Filesに置く時のあれこれ
Avatar for watany watany
3
1.7k
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
3
610
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか？ #phpconkagawa
Avatar for akase244 akase244
0
370
AWSはOSSをどのように 考えているのか？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
0
130
cloudnative conference 2026 flyle
Avatar for azihsoyn azihsoyn
1
200
AI時代になぜ書くのか
Avatar for Mutz mutsumix
0
430
AgentCore Optimizationを始めよう！
Avatar for matsukada licux
3
260
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
Avatar for teyamagu teyamagu
PRO
3
1k
AIを導入する前にやるべきこと
Avatar for Negima negima
2
370
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
1
330
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
5
760
決定論 vs 確率論：Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築
Avatar for Shu Kobuchi shukob
0
170

Featured

See All Featured
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
780
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
190
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
930
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
360
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
370
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
180
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k

Transcript

  1. The Age of the Javascript-Powered Desktop Evan Morikawa | @e0m

    | [email protected] Dino JS | June 24, 2016

  2. The Precambrian Eon 1.3 billion seconds ago

  3. The Precambrian Eon C | C++ Swing | Qt |

    Cocoa | GTK | WPF/WinRT | … 1.3 billion seconds ago

  4. The Paleozoic Era 145 million seconds ago

  5. The Paleozoic Era NW.js (Node Webkit) 145 million seconds ago

  6. The Mesozoic Era 52 million seconds ago

  7. The Mesozoic Era Shell hangouts.google.com/hangouts/_/nylas.com/code-challenge 52 million seconds ago

  8. The Cenozoic Era 36 million seconds ago

  9. The Cenozoic Era 36 million seconds ago

  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. Node Event Loop libuv Node & Chromium Mashup

  20. Chromium Events MessageLoop Chromium Node & Chromium Mashup

  21. Chromium Events MessageLoop Chromium Node Event Loop libuv ? Node

    & Chromium Mashup

  22. Chromium Events libuv Chromium Node & Chromium Mashup

  23. Chromium Events MessageLoop Chromium Node Event Loop libuv Node &

    Chromium Mashup

  24. Node Event Loop libuv Chromium Events MessageLoop Chromium IO poll

    Node & Chromium Mashup

  25. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML

    / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc

  26. Nylas N1

  27. Nylas N1 main.js

  28. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

  29. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

  30. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js

  31. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render()

  32. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render()

  33. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render() Composer Work Window
  34. None

  35. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility

  36. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility
  37. None

  38. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

  39. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

  40. Native Electron Extensions npm install sqlite3 electron/electron-rebuild

  41. electron/electron-rebuild Native Electron Extensions

  42. electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell Native Electron Extensions

  43. electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell npm rebuild --target=${electronVersion} --arch=x64

    --runtime=electron Native Electron Extensions

  44. nodejs/node-gyp Native Electron Extensions

  45. nodejs/node-gyp  gyp (Generate Your Projects) make, gcc, XCode, Visual

    Studio Native Electron Extensions

  46. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows

  47. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows
  48. None
  49. None

  50. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows

  51. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows

  52. ReactiveX.js

  53. const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q).subscribe((threads)

    => { this.setState({threads}) })

  54. const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q)

    .filter(myFn).subscribe((threads) => { this.setState({threads}) })

  55. const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q)

    .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
  56. None

  57. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987

  58. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987

  59. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks

  60. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks
  61. None

  62. https://github.com/nylas/n1 Open Source

  63. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks Native extensions | Cross-platform CSS | Retina Detail

  64. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks Native extensions | Cross-platform CSS | Retina Detail
  65. None
  66. None
  67. None
  68. None

  69. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada Halla Moore @jackiehluo

    Drew Regitsky

  70. Evan Morikawa | @e0m | [email protected] | June 2016 Thank

    you! Slides here