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

Plugins with React & Challenges with Data

Plugins with React & Challenges with Data

A look at how React enables plugins and the challenges in data management this poses. We look at our experiences with Flux, Redux, and Rx.JS based observables.

Given at the ReactJS San Francisco Bay Area meetup

30ac27c2768b1df077c5f236936bd256?s=128

Evan Morikawa

May 19, 2016
Tweet

Transcript

  1. Plugins with React & Challenges with Data Evan Morikawa |

    @e0m | evan@nylas.com | May 19 2016 Nylas
  2. None
  3. <div id=“btn-wrap”> <SendButton draft={this.props.draft} /> <AttachFileButton draft={this.props.draft} /> <TrashButton draft={this.props.draft}

    /> </div>

  4. <div id=“btn-wrap”> <SendButton draft={this.props.draft} /> <AttachFileButton draft={this.props.draft} /> <TrashButton draft={this.props.draft}

    /> </div>
 $(“#btn-wrap”).append(MyCoolPlugin) <script> </script>
  5. None
  6. <div id=“btn-wrap”> <SendButton draft={this.props.draft} /> <AttachFileButton draft={this.props.draft} /> <TrashButton draft={this.props.draft}

    /> </div>

  7. components = [SendButton, AttachFileButton, TrashButton]; <div id=“btn-wrap”> {components.map((component) => <component

    draft={this.props.draft}/> )} </div>

  8. components = [SendButton, AttachFileButton, TrashButton, MyCoolPlugin]; <div id=“btn-wrap”> {components.map((component) =>

    <component draft={this.props.draft}/> )} </div>

  9. <div id=“btn-wrap”> <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>


  10. <div id=“btn-wrap”> <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>
 Actions.registerComponent(MyCoolPlugin, {

    location:’composer-bottom-bar’ })
  11. <div id=“btn-wrap”> <InjectedComponentSet
 location={‘composer-bottom-bar’} role={‘send-action’} passedProps={{draft: this.props.draft}} /> </div>
 Actions.registerComponent(MyCoolPlugin,

    { location:’composer-bottom-bar’ })
  12. <div id=“btn-wrap”> <InjectedComponentSet
 location={‘composer-bottom-bar’} role={‘send-action’} passedProps={{draft: this.props.draft}} /> </div>
 Actions.registerComponent(MyCoolPlugin,

    { role:’send-action’ })
  13. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ })

  14. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { }

  15. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { }

  16. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { }

  17. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  18. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  19. None
  20. None
  21. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  22. Actions.registerComponent(MyCoolPlugin, { role:’send-action’ }) class ComponentStore { } <div id=“btn-wrap”>

    <InjectedComponentSet
 location={‘composer-bottom-bar’} passedProps={{draft: this.props.draft}} /> </div>

  23. React ReactiveX.js Redux Flux +

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. SELECT * FROM threads WHERE account_id=123

  43. None
  44. None
  45. None
  46. None
  47. SELECT * FROM threads WHERE foo=bar

  48. None
  49. None
  50. None
  51. None
  52. SELECT * FROM threads WHERE foo=bar

  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. ReactiveX.js

  63. ReactiveX.js SELECT * FROM threads WHERE …

  64. ReactiveX.js

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

    => { this.setState({threads}) })
  66. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn).subscribe((threads) => { this.setState({threads}) })
  67. const q = `SELECT * FROM threads WHERE …` Rx.Observable.fromQuery(q)

    .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })
  68. Rx.Observable.fromWebSocket(myWebSocket) .filter(myFn) .map(mapFn).subscribe((threads) => { this.setState({threads}) })

  69. ReactiveX.js

  70. None
  71. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987
  72. SELECT * FROM threads WHERE account_id=123 SELECT * FROM messages

    WHERE thread_id=987
  73. React ReactiveX.js Redux Flux +

  74. None
  75. https://github.com/nylas/n1 Open Source

  76. N1 Core Team @e0m @bengotow @juanstejada YOU! @karim_hamidou @jackiehluo

  77. Evan Morikawa | @e0m | evan@nylas.com | May 2016 Thank

    you Slides here