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

The Age of the Javascript-Powered Desktop — Din...

Avatar for Evan Morikawa Evan Morikawa
June 24, 2016
Programming
0
810

The Age of the Javascript-Powered Desktop — Dinosaur JS

The Age of the Javascript-Powered Desktop. Dinosaur JS June 24, 2016
Avatar for Evan Morikawa

Evan Morikawa

June 24, 2016
Tweet

More Decks by Evan Morikawa

See All by Evan Morikawa
Node on the Desktop — Node Conf Oslo 2016
Avatar for Evan Morikawa emorikawa
0
140
JS Takes the Desktop — Scotland JS
Avatar for Evan Morikawa emorikawa
0
190
Desktop JS — Empire JS 2016
Avatar for Evan Morikawa emorikawa
1
530
Plugins with React & Challenges with Data
Avatar for Evan Morikawa emorikawa
0
540
Space City JS — Using Electron & React to Build N1
Avatar for Evan Morikawa emorikawa
1
230
MIT N1 Preview
Avatar for Evan Morikawa emorikawa
0
470
Scaling Flux
Avatar for Evan Morikawa emorikawa
0
540

Other Decks in Programming

See All in Programming
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
400
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
670
Use Perl as Better Shell Script
Avatar for karupanerura karupanerura
0
680
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
Avatar for Kenji Kazumura kazumura
1
140
iOSアプリ開発もLLMで自動運転する
Avatar for Yuya Hirayama hiragram
6
2.2k
JSAI2025 RecSysChallenge2024 優勝報告
Avatar for kami unonao
1
410
從零到一：搭建你的第一個 Observability 平台
Avatar for Blueswen blueswen
0
290
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
Avatar for Tajima Sachiko schktjm
1
700
Blueskyのプラグインを作ってみた
Avatar for Hakkadaikon hakkadaikon
1
360
ts-morph実践：型を利用するcodemodのテクニック
Avatar for ypresto ypresto
1
580
『Python → TypeScript』オンボーディング奮闘記
Avatar for takumi_tatsuno takumi_tatsuno
1
150
AIエージェントによるテストフレームワーク Arbigent
Avatar for takahirom takahirom
0
330

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
860
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
980
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k

Transcript

  1. The Age of the Javascript-Powered Desktop Evan Morikawa | @e0m

    | evan@nylas.com Dino JS | June 24, 2016

  2. The Precambrian Eon 1.3 billion seconds ago

  3. The Precambrian Eon C | C++ Swing | Qt |

    Cocoa | GTK | WPF/WinRT | … 1.3 billion seconds ago

  4. The Paleozoic Era 145 million seconds ago

  5. The Paleozoic Era NW.js (Node Webkit) 145 million seconds ago

  6. The Mesozoic Era 52 million seconds ago

  7. The Mesozoic Era Shell hangouts.google.com/hangouts/_/nylas.com/code-challenge 52 million seconds ago

  8. The Cenozoic Era 36 million seconds ago

  9. The Cenozoic Era 36 million seconds ago

  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. Node Event Loop libuv Node & Chromium Mashup

  20. Chromium Events MessageLoop Chromium Node & Chromium Mashup

  21. Chromium Events MessageLoop Chromium Node Event Loop libuv ? Node

    & Chromium Mashup

  22. Chromium Events libuv Chromium Node & Chromium Mashup

  23. Chromium Events MessageLoop Chromium Node Event Loop libuv Node &

    Chromium Mashup

  24. Node Event Loop libuv Chromium Events MessageLoop Chromium IO poll

    Node & Chromium Mashup

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

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

  26. Nylas N1

  27. Nylas N1 main.js

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

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

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

    index.html index.js

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

    index.html index.js React.render()

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

    index.html index.js React.render()

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

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

  35. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility

  36. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility
  37. None

  38. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

  39. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail

  40. Native Electron Extensions npm install sqlite3 electron/electron-rebuild

  41. electron/electron-rebuild Native Electron Extensions

  42. electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell Native Electron Extensions

  43. electron/electron-rebuild node-gyp install --target=${electronVersion} --arch=x64 --dist-url=https://atom.io/download/atom-shell npm rebuild --target=${electronVersion} --arch=x64

    --runtime=electron Native Electron Extensions

  44. nodejs/node-gyp Native Electron Extensions

  45. nodejs/node-gyp  gyp (Generate Your Projects) make, gcc, XCode, Visual

    Studio Native Electron Extensions

  46. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows

  47. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows
  48. None
  49. None

  50. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows

  51. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows

  52. ReactiveX.js

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

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

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

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

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

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

  57. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987

  58. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987

  59. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks

  60. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks
  61. None

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

  63. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks Native extensions | Cross-platform CSS | Retina Detail

  64. The Age of the JS Desktop 1. “Native” experience 2.

    Process Control 3. Performance 4. Data Storage & Offline 5. Plugins & Extensibility Native extensions | Cross-platform CSS | Retina Detail Electron-Rebuild | Node GYP | Windows Jankbusting | Worker Windows SQL | Observables | Tasks Native extensions | Cross-platform CSS | Retina Detail
  65. None
  66. None
  67. None
  68. None

  69. N1 Core Team https://nylas.com/team @e0m @bengotow @juanstejada Halla Moore @jackiehluo

    Drew Regitsky

  70. Evan Morikawa | @e0m | evan@nylas.com | June 2016 Thank

    you! Slides here