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
620
Node on the Desktop — Node Conf Oslo 2016
emorikawa
0
120
Desktop JS — Empire JS 2016
emorikawa
1
460
Plugins with React & Challenges with Data
emorikawa
0
370
Space City JS — Using Electron & React to Build N1
emorikawa
1
210
MIT N1 Preview
emorikawa
0
290
Scaling Flux
emorikawa
0
480
Other Decks in Programming
See All in Programming
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
8
2.2k
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
180
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
160
document.write再考
brn
5
2.5k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
160
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
160
13k
Building Your Own Lightsaber
phodgson
97
5.6k
The Invisible Side of Design
smashingmag
293
49k
Atom: Resistance is Futile
akmur
258
25k
Music & Morning Musume
bryan
39
5.5k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
Designing for Performance
lara
601
67k
Agile that works and the tools we love
rasmusluckow
323
20k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Statistics for Hackers
jakevdp
789
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
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