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
830
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
550
Plugins with React & Challenges with Data
emorikawa
0
560
Space City JS — Using Electron & React to Build N1
emorikawa
1
240
MIT N1 Preview
emorikawa
0
490
Scaling Flux
emorikawa
0
550
Other Decks in Programming
See All in Programming
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
900
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
780
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
320
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.3k
CSC305 Lecture 03
javiergs
PRO
0
230
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
980
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
900
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Docker and Python
trallard
46
3.6k
Six Lessons from altMBA
skipperchong
28
4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Music & Morning Musume
bryan
46
6.8k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
75
5k
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