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
560
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
550

Other Decks in Programming

See All in Programming
Zendeskのチケットを Amazon Bedrockで 解析した
Avatar for ryokosuge ryokosuge
3
290
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
260
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.6k
Ruby Parser progress report 2025
Avatar for yui-knk yui_knk
1
420
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
480
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
180
テストコードはもう書かない：JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
Avatar for makun makun
0
230
ソフトウェアテスト徹底指南書の紹介
Avatar for Hiroki Iseri goyoki
1
150
複雑なドメインに挑む.pdf
Avatar for Yuki Sakai yukisakai1225
5
1.1k
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
6
2.2k
HTMLの品質ってなんだっけ？ “HTMLクライテリア”の設計と実践
Avatar for una unachang113
4
2.7k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
Avatar for luccafort luccafort
PRO
1
100

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
610

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