Backbone.js with React Views - Server Rendering, Virtual DOM, and More!

1. BACKBONE & REACT SEATTLE REACT MEETUP slides.formidablelabs.com /201411-react-backbone.html  |  @ryan_roemer formidablelabs.com

2. BRIDGING THE OLD & NEW

3. SURVEY Who's familiar with Backbone? With React?

4. GOAL Craft a Backbone/React app: Lean and straightforward Efficient, performant in the browser Capable of server-side rendering

5. BACKBONE.JS

6. WHY BACKBONE.JS? Lean and mean Simple, powerful abstractions Models, Views, Routers REST friendly

7. BUT... Dependencies on jQuery, Underscore.js In practice, lots of DOM churn

8. FORMIDABLE LABS

9. BACKBONE.JS TESTING

10. LET'S WRITE SOME NOTES!

11. VANILLAJS (LOCALSTORAGE) (live) backbone-testing.com/notes/app/ github.com/ryan-roemer/backbone-testing/ tree/master/notes/app

12. COMMONJS (REST) Modern build - CommonJS, Webpack, Backbone, jQuery, Lodash github.com/formidablelabs/notes/ tree/master/alt/commonjs

13. BACKBONE.JS ABSTRACTIONS

14. MODELS Backbone.Model A contains, retrieves, and manipulates the data for your app. A note. Relies on $.ajax for REST transport. 

15. COLLECTIONS Backbone.Collection A is an ordered list of models. A list of notes.   

16. TEMPLATES A function that renders model / collection object data as HTML. 

17. VIEWS Backbone.View A mediates data, event and display logic. Display all notes, or a single note. Where most jQuery comes into play. 

18. ROUTERS Backbone.Router A routes client-side pages and mediates history. Route between all and single note views. 

19. CODE ORGANIZATION / app.js config.js collections/notes.js models/note.js routers/router.js templates/ note-view.hbs note.hbs notes-item.hbs views/ note-nav.js note-view.js note.js notes-filter.js notes-item.js notes.js

20. BUNDLE SIZE Minified: 193 KB Gzipped: 63 KB

21. REACT

22. WHY REACT ? Virtual DOM diffing / updating Server-side rendering Declarative, template-like UI components

23. BRINGING REACT TO NOTES github.com/FormidableLabs/ notes-react-backbone notes-react-exoskeleton - A basic port of Backbone.js views to React components. - The leaner version...

24. LET'S WRITE MORE NOTES! (live) formidablelabs.github.io/notes-react- exoskeleton/app.html github.com/FormidableLabs/notes-react- exoskeleton

25. REACT CLIENT-SIDE Switch Backbone.js views to React components Continue using Backbone.js models, collections, routers

26. PORTING NOTES Let React handle all the HTML No more templates / Handlebars Use BB models/collections as React props Update React components on Backbone.js events

27. EXOSKELETON Backbone.js, without the dependencies. Get rid of jQuery and Underscore.js Need $.ajax replacement

28. CODE ORGANIZATION # Backbone! app.js collections/notes.js models/note.js routers/router.js # React! components/ note.jsx notes.jsx nav/base.jsx nav/note.jsx nav/notes.jsx page/base.jsx page/note.jsx page/note/edit.jsx page/note/view.jsx page/notes.jsx page/notes/item.jsx

29. BUNDLE SIZE Minified: 170 KB (vs 193 KB) Gzipped: 51 KB (vs 63 KB)

30. NOTES COMPONENT module.exports = React.createClass({ // ... render: function () { return ( <div> <NotesNav notes={this.props.notes} onUpdateFilter= {this.onUpdateFilter} /> <NotesPage notes={this.props.notes} filter={this.state.filter} /> </div> ); } });

31. NOTE COMPONENT module.exports = React.createClass({ // ... render: function () { return ( <div> <NoteNav note={this.props.note} action={this.state.action} handleActionChange= {this.setAction} /> <NotePage note={this.props.note} action={this.state.action} /> </div> ); } });

32. APP HTML var NO_SERVER_SIDE = true; <body> <div class="js-content">  </div> <script src="/app/js-dist/bundle.js"></script> </body>

33. REACT SERVER-SIDE Import Note, Notes components server-side with CommonJS + Webpack Duplicate router logic on server Mirror pushState fragments with href links Check out react-router

34. APP HTML var NO_JS = true; <body> <div class="js-content"> {{{content}}} </div>  </body>

35. BOOTSTRAPPED HTML Now let's tie it all together: Start with server-rendered HTML Bootstrap the SPA off that Client-side render from there...

36. AWESOME!

37. APP HTML TEMPLATE <body> <div class="js-content"> {{{content}}} </div> <script class="js-initial-data" type="application/json"> {{{initialData}}} </script> <script src="/app/js-dist/bundle.js"></script> </body>

38. CONCLUSION  Render and let React handle DOM diffing  Server-side rendering is easy  Leave jQuery behind

39. PARTING THOUGHTS Dataflow is... different Dive in more to the ecosystem: , Flux React router, etc.

40. RESOURCES todomvc.com/examples/react-backbone github.com/jhudson8/backbone-reaction github.com/clayallsopp/react.backbone github.com/magalhas/backbone-react-component

41. THANKS! slides.formidablelabs.com /201411-react-backbone.html  |  @ryan_roemer formidablelabs.com

Backbone.js with React Views - Server Rendering, Virtual DOM, and More!

Backbone.js with React Views - Server Rendering, Virtual DOM, and More!

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Backbone.js with React Views - Server Rendering, Virtual DOM, and More!

Similar to Backbone.js with React Views - Server Rendering, Virtual DOM, and More!(20)

Recently uploaded

Recently uploaded(20)

Backbone.js with React Views - Server Rendering, Virtual DOM, and More!