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

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

Avatar for Evan Morikawa Evan Morikawa
June 24, 2016
Programming
0
820

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
Tweet

More Decks by Evan Morikawa

See All by Evan Morikawa
Node on the Desktop — Node Conf Oslo 2016
Avatar for Evan Morikawa emorikawa
0
140
JS Takes the Desktop — Scotland JS
Avatar for Evan Morikawa emorikawa
0
190
Desktop JS — Empire JS 2016
Avatar for Evan Morikawa emorikawa
1
540
Plugins with React & Challenges with Data
Avatar for Evan Morikawa emorikawa
0
550
Space City JS — Using Electron & React to Build N1
Avatar for Evan Morikawa emorikawa
1
240
MIT N1 Preview
Avatar for Evan Morikawa emorikawa
0
490
Scaling Flux
Avatar for Evan Morikawa emorikawa
0
540

Other Decks in Programming

See All in Programming
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
260
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
Understanding Ruby Grammar Through Conflicts
Avatar for yui-knk yui_knk
1
110
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
Avatar for はる lemonade_37
2
480
マイコンでもRustのtestがしたい その２/KernelVM Tokyo 18
Avatar for Toshifumi NISHINAGA tnishinaga
2
2.3k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
1
290
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
270
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
Avatar for po3rin po3rin
8
940
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
210
대규모 트래픽을 처리하는 프론트 개발자의 전략
Avatar for Seungmin 마량 maryang
0
120
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
1
200

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.9k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k

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