Space City JS — Using Electron & React to Build N1

Using Electron & React to Build N1: The Open Source Email Client

Transcript

1. Using Electron & React to Build N1: The Open Source Email Client Evan Morikawa | @e0m | evan@nylas.com | May 14 2016 Nylas
2. Standing on the shoulders of giants Evan Morikawa | @e0m | evan@nylas.com | May 14 2016 Nylas
8. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
9. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
11. Shell NW.js (Node Webkit) Swing | Qt | Cocoa | GTK | WPF/WinRT
12. Shell
16. Chromium
17. Chromium Browser aka Backend aka Main Process
18. Chromium Browser aka Backend aka Main Process C++
19. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM)
20. Chromium Browser aka Backend aka Main Process C++ Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
21. Browser aka Backend aka Main Process Renderer Renderer Renderer HTML / JS (DOM) HTML / JS (DOM) HTML / JS (DOM) ipc
22. Nylas N1
23. Nylas N1 main.js
24. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
25. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show()
26. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js
27. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
28. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render()
29. Nylas N1 main.js const win = new BrowserWindow() win.loadURL(`file://index.html`) win.show() index.html index.js React.render() Composer Work Window
31. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
34. <div id=“actions”> <SendButton draft={this.props.draft} /> <AttachFileButton draft={this.props.draft} /> <TrashButton draft={this.props.draft} /> </div>

35. <div id=“actions”> <InjectedComponentSet
 location={‘composer-actions’} passedProps={{draft: this.props.draft}} /> </div>

36. <div id=“actions”> <InjectedComponentSet
 location={‘composer-actions’} passedProps={{draft: this.props.draft}} /> </div>
 Actions.registerComponent(TranslateButton, { location:’composer-actions’ })
39. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
40. React ReactiveX.js Redux Flux +
41. ReactiveX.js
42. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q).subscribe((threads) => { this.setState({threads}) })
43. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn).subscribe((threads) => { this.setState({threads}) })
44. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q) .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
45. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
46. Web SQL Local Storage
47. Web SQL Local Storage
48. Web SQL Local Storage
50. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
53. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
55. https://github.com/nylas/n1 Open Source
56. How do we: Deliver to the desktop Support 3rd party plugins Keep data & view in sync Work offline Keep it performant Pay it forward
57. N1 Core Team @e0m @bengotow @juanstejada YOU! @karim_hamidou @jackiehluo
58. N1 Extended Team
59. Evan Morikawa | @e0m | evan@nylas.com | May 2016 Thank you Slides here