Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Takes the Desktop — Scotland JS

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
950
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
610
Plugins with React & Challenges with Data
Avatar for Evan Morikawa emorikawa
0
650
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
620

Other Decks in Programming

See All in Programming
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
140
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
140
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
2
280
the container ship “Apple Silicon”@WWDC26 Recap -Japan-\(region).swift
Avatar for gangan shingangan
0
130
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
Avatar for にわ shibuchaaaan
0
290
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
180
AIを紡ぐPMのお話
Avatar for swdtkuy swdtkuy
0
100
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
330
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
180
Google Apps Script で Ruby を動かす
Avatar for Shogo Kawahara kawahara
0
230
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
360
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
450

Featured

See All Featured
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
210
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
650
Between Models and Reality
Avatar for mayunak mayunak
4
390
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.1k
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
400
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k

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