Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Age of the Javascript-Powered Desktop — Din...
Search
Evan Morikawa
June 24, 2016
Programming
0
810
The Age of the Javascript-Powered Desktop — Dinosaur JS
The Age of the Javascript-Powered Desktop. Dinosaur JS June 24, 2016
Evan Morikawa
June 24, 2016
Tweet
Share
More Decks by Evan Morikawa
See All by Evan Morikawa
Node on the Desktop — Node Conf Oslo 2016
emorikawa
0
140
JS Takes the Desktop — Scotland JS
emorikawa
0
190
Desktop JS — Empire JS 2016
emorikawa
1
540
Plugins with React & Challenges with Data
emorikawa
0
540
Space City JS — Using Electron & React to Build N1
emorikawa
1
230
MIT N1 Preview
emorikawa
0
480
Scaling Flux
emorikawa
0
540
Other Decks in Programming
See All in Programming
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
260
ReadMoreTextView
fornewid
1
490
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
660
5つのアンチパターンから学ぶLT設計
narihara
1
120
Team operations that are not burdened by SRE
kazatohiei
1
270
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
520
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Code Reviewing Like a Champion
maltzj
524
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
BBQ
matthewcrist
89
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Fireside Chat
paigeccino
37
3.5k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Transcript
The Age of the Javascript-Powered Desktop Evan Morikawa | @e0m
|
[email protected]
Dino JS | June 24, 2016
The Precambrian Eon 1.3 billion seconds ago
The Precambrian Eon C | C++ Swing | Qt |
Cocoa | GTK | WPF/WinRT | … 1.3 billion seconds ago
The Paleozoic Era 145 million seconds ago
The Paleozoic Era NW.js (Node Webkit) 145 million seconds ago
The Mesozoic Era 52 million seconds ago
The Mesozoic Era Shell hangouts.google.com/hangouts/_/nylas.com/code-challenge 52 million seconds ago
The Cenozoic Era 36 million seconds ago
The Cenozoic Era 36 million seconds ago
None
None
None
Chromium
Chromium Browser aka Backend aka Main Process
Chromium Browser aka Backend aka Main Process C++
Chromium Browser aka Backend aka Main Process C++ Renderer Renderer
Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)
Chromium Browser aka Backend aka Main Process C++ Renderer Renderer
Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
Browser aka Backend aka Main Process Renderer Renderer Renderer HTML
/ JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
Node Event Loop libuv Node & Chromium Mashup
Chromium Events MessageLoop Chromium Node & Chromium Mashup
Chromium Events MessageLoop Chromium Node Event Loop libuv ? Node
& Chromium Mashup
Chromium Events libuv Chromium Node & Chromium Mashup
Chromium Events MessageLoop Chromium Node Event Loop libuv Node &
Chromium Mashup
Node Event Loop libuv Chromium Events MessageLoop Chromium IO poll
Node & Chromium Mashup
Browser aka Backend aka Main Process Renderer Renderer Renderer HTML
/ JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
Nylas N1
Nylas N1 main.js
Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
index.html index.js
Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
index.html index.js React.render()
Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
index.html index.js React.render()
Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
index.html index.js React.render() Composer Work Window
None
The Age of the JS Desktop 1. “Native” experience 2.
Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility
The Age of the JS Desktop 1. “Native” experience 2.
Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility
None
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
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
Native Electron Extensions npm install sqlite3 electron/electron-rebuild
electron/electron-rebuild Native Electron Extensions
electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell Native Electron Extensions
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
nodejs/node-gyp Native Electron Extensions
nodejs/node-gyp gyp (Generate Your Projects) make, gcc, XCode, Visual
Studio Native Electron Extensions
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
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
None
None
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
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
ReactiveX.js
const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q).subscribe((threads)
=> { this.setState({threads}) })
const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q)
.filter(myFn).subscribe((threads) => { this.setState({threads}) })
const q = `SELECT * FROM threads WHERE dinosaur…` Rx.Observable.fromQuery(q)
.filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
None
SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages
WHERE thread_id=987
SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages
WHERE thread_id=987
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
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
None
https://github.com/nylas/n1 Open Source
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
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
None
None
None
None
N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada Halla Moore @jackiehluo
Drew Regitsky
Evan Morikawa | @e0m |
[email protected]
| June 2016 Thank
you! Slides here