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

Transcript

1. Plugins with React & Challenges with Data Evan Morikawa | @e0m | evan@nylas.com | May 19 2016 Nylas
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>
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>

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 +
42. SELECT * FROM threads WHERE account_id=123
47. SELECT * FROM threads WHERE foo=bar
52. SELECT * FROM threads WHERE foo=bar
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
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 +
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