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
JS Takes the Desktop — Scotland JS
Search
Evan Morikawa
June 03, 2016
Programming
0
190
JS Takes the Desktop — Scotland JS
Electron, React, & Native Win/Mac/Linux Experiences At Scale
Evan Morikawa
June 03, 2016
Tweet
Share
More Decks by Evan Morikawa
See All by Evan Morikawa
The Age of the Javascript-Powered Desktop — Dinosaur JS
emorikawa
0
830
Node on the Desktop — Node Conf Oslo 2016
emorikawa
0
140
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
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
380
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
390
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
930
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
950
品質ワークショップをやってみた
nealle
0
400
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Featured
See All Featured
A better future with KSS
kneath
239
18k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Music & Morning Musume
bryan
46
6.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
Docker and Python
trallard
46
3.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Transcript
JS Takes The Desktop Evan Morikawa | @e0m |
[email protected]
| June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale
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
JS on the Desktop 1. “Native” experience 2. Performance 3.
Data Storage & Offline 4. Plugins & Extensibility
JS on the Desktop 1. “Native” experience 2. Performance 3.
Data Storage & Offline 4. Plugins & Extensibility
None
JS on the Desktop 1. “Native” experience 2. Performance 3.
Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
JS on the Desktop 1. “Native” experience 2. Performance 3.
Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
None
JS on the Desktop 1. “Native” experience 2. Performance 3.
Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
JS on the Desktop 1. “Native” experience 2. Performance 3.
Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Jasnkbusting | Worker windows
ReactiveX.js
ReactiveX.js Thank you @mattpodwysocki!
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}) })
JS on the Desktop 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
JS on the Desktop 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
JS on the Desktop 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
JS on the Desktop 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 |
[email protected]
| June 2016 Thank
you! Slides here
JS Takes The Desktop Evan Morikawa | @e0m |
[email protected]
| June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale