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

Space City JS — Using Electron & React to Build N1

Space City JS — Using Electron & React to Build N1

Using Electron & React to Build N1: The Open Source Email Client or "Standing on the Shoulders of Giants"

30ac27c2768b1df077c5f236936bd256?s=128

Evan Morikawa

May 14, 2016
Tweet

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
  3. None
  4. None
  5. None
  6. None
  7. None
  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
  10. None
  11. Shell NW.js (Node Webkit) Swing | Qt | Cocoa |

    GTK | WPF/WinRT
  12. Shell

  13. None
  14. None
  15. None
  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
  30. None
  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
  32. None
  33. None
  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’ })
  37. None
  38. None
  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

  49. None
  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
  51. None
  52. None
  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
  54. None
  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