Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

JS Takes the Desktop — Scotland JS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Evan Morikawa Evan Morikawa
June 03, 2016
Programming
230
0

JS Takes the Desktop — Scotland JS

Electron, React, & Native Win/Mac/Linux Experiences At Scale

Avatar for Evan Morikawa

Evan Morikawa

June 03, 2016

More Decks by Evan Morikawa

See All by Evan Morikawa
The Age of the Javascript-Powered Desktop — Dinosaur JS
Avatar for Evan Morikawa emorikawa
0
960
Node on the Desktop — Node Conf Oslo 2016
Avatar for Evan Morikawa emorikawa
0
150
Desktop JS — Empire JS 2016
Avatar for Evan Morikawa emorikawa
1
620
Plugins with React & Challenges with Data
Avatar for Evan Morikawa emorikawa
0
660
Space City JS — Using Electron & React to Build N1
Avatar for Evan Morikawa emorikawa
1
250
MIT N1 Preview
Avatar for Evan Morikawa emorikawa
0
550
Scaling Flux
Avatar for Evan Morikawa emorikawa
0
640

Other Decks in Programming

See All in Programming
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
34
15k
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
140
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.9k
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
360
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
140
AWSに止められる覚悟してますか？
Avatar for モリゾー morizo_1984
2
520
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.2k
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
140
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
8
5.5k
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
160
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
580

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
460
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
350
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
550
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
340
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
390
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
529
40k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k

Transcript

  1. JS Takes The Desktop Evan Morikawa | @e0m | [email protected]

    | June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale
  2. None
  3. None
  4. None
  5. None

  6. Swing Qt Cocoa GTK WPF/WinRT …

  7. NW.js (Node Webkit)

  8. Shell

  9. None
  10. None
  11. None
  12. None

  13. Chromium

  14. Chromium Browser aka Backend aka Main Process

  15. Chromium Browser aka Backend aka Main Process C++

  16. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer

    Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)

  17. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer

    Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc

  18. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML

    / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc

  19. Nylas N1

  20. Nylas N1 main.js

  21. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

  22. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

  23. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js

  24. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render()

  25. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render()

  26. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()

    index.html index.js React.render() Composer Work Window
  27. None

  28. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility

  29. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility
  30. None

  31. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

  32. JS on the Desktop 1. “Native” experience 2. Performance 3.

    Data Storage & Offline 4. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail
  33. None

  34. 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

  35. 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

  36. ReactiveX.js

  37. ReactiveX.js Thank you @mattpodwysocki!

  38. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q).subscribe((threads)

    => { this.setState({threads}) })

  39. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn).subscribe((threads) => { this.setState({threads}) })

  40. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })

  41. 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

  42. 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
  43. None

  44. 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

  45. 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”

  46. https://github.com/nylas/n1 Open Source

  47. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada @karim_hamidou @jackiehluo Drew

    Regitsky
  48. None

  49. Evan Morikawa | @e0m | [email protected] | June 2016 Thank

    you! Slides here

  50. JS Takes The Desktop Evan Morikawa | @e0m | [email protected]

    | June 2016 SCOTLAND JS Electron, React, & Native Win/Mac/Linux Experiences At Scale