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
Desktop JS — Empire JS 2016
Search
Evan Morikawa
May 27, 2016
Programming
1
520
Desktop JS — Empire JS 2016
Desktop JS — Electron and building applications on the desktop, with Javascript.
Evan Morikawa
May 27, 2016
Tweet
Share
More Decks by Evan Morikawa
See All by Evan Morikawa
The Age of the Javascript-Powered Desktop — Dinosaur JS
emorikawa
0
780
Node on the Desktop — Node Conf Oslo 2016
emorikawa
0
140
JS Takes the Desktop — Scotland JS
emorikawa
0
190
Plugins with React & Challenges with Data
emorikawa
0
520
Space City JS — Using Electron & React to Build N1
emorikawa
1
230
MIT N1 Preview
emorikawa
0
460
Scaling Flux
emorikawa
0
530
Other Decks in Programming
See All in Programming
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.5k
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
120
七輪ライブラリー: Claude AI で作る Next.js アプリ
suneo3476
1
150
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
580
Making TCPSocket.new "Happy"!
coe401_
1
2.4k
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
200
ComposeでWebアプリを作る技術
tbsten
0
120
SwiftUI API Design Lessons
niw
1
320
VitestのIn-Source Testingが便利
taro28
8
2.3k
Vibe Coding の話をしよう
schroneko
12
3.4k
Laravel × Clean Architecture
bumptakayuki
PRO
0
130
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
130
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
How STYLIGHT went responsive
nonsquared
100
5.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
770
For a Future-Friendly Web
brad_frost
177
9.7k
The Pragmatic Product Professional
lauravandoore
33
6.6k
Docker and Python
trallard
44
3.4k
Side Projects
sachag
453
42k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Transcript
Desktop JS Evan Morikawa | @e0m | evan@nylas.com | May
2016
None
None
None
None
Swing Qt Cocoa GTK WPF/WinRT …
NW.js (Node Webkit)
Shell
None
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
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
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility
None
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
None
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
ReactiveX.js
const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q).subscribe((threads)
=> { this.setState({threads}) })
const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)
.filter(myFn).subscribe((threads) => { this.setState({threads}) })
const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)
.filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail SQL | Observables | Task Jasnkbusting | Worker windows
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows SQL | Observables | Task
None
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail React | Components as “data” Jasnkbusting | Worker windows SQL | Observables | Task
Desktop JS 1. “Native” experience 2. Performance 3. Data Storage
& Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows SQL | Observables | Task React | Components as “data”
https://github.com/nylas/n1 Open Source
N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada @karim_hamidou @jackiehluo Drew
Regitsky
None
Evan Morikawa | @e0m | evan@nylas.com | May 2016 Thank
you! Slides here
Desktop JS Evan Morikawa | @e0m | evan@nylas.com | May
2016