The Hybrid Backbone & React App

Have a large Backbone application that you'd like to try React on with the hopes of moving away from Backbone in the future? I'll guide you through some of the options and techniques you can do so without going crazy.

Transcript

1. Backbone & React The Hybrid App Peter Piekarczyk May 29, 2015
2. UI Engineer Trunk Club @peterpme github.com/ppiekarczyk
3. Getting Started
4. Past & Present Brunch With Panache A modular approach to building web apps with Brunch github.com/trunkclub/brunch-with-panache speakerdeck.com/jhabdas/brunch-with-panache • Backbone • Chaplin • JQuery • Brunch • Coffeescript • Automatic memory management • Controllers & composition • Rails-like routes in custom router • Consistent CLI interface • CommonJS + Amd Support
5. SOA BWP BWP
6. BWP BWP BWP BWP BWP
7. “Ugh, guys?” Everything worked great for a long time Until it stopped working that great.. • Numerous API calls & hydrations • Lot of useless re-rendering • Increased load times • Huge flame chart spikes • User complaints • Dedicating way too much time 
 for render debugging & optimization • Patches weren’t doing the trick What could UI solve on its own?
8. React to the Rescue! Replacing Backbone views with React Instant gratification • Reusable, encapsulated components • Efficient diff’ing algorithm re-renders only what it needs to • Declarative style makes it easier to focus on the app itself • Less mental overhead of bringing in templates & views together For the first time, our backend’s were much more comfortable with our code
9. React to the Rescue! Templates & Views Our code became much more manageable
10. React to the Rescue! CSS Styles as Components Our design & code became much more manageable
11. React to the Rescue! No Magic, Just Good Javascript.
12. Migration Process • Start with small components • Use a Backbone/React Mixin • Get familiar with the API • initialize = componentDidMount • remove = componentWillUnmount • Convert your parent view to use React.createElement instead Don’t freak out about the templates!
13. React Backbone Adapter 1. Create 2. Identify 3. Attach 4. Render 5. Dispose Attaching a React component to a Parent level Backbone view
14. React Backbone Adapter # Signup Controller Attaching a React component to a Parent level Backbone view
15. React Backbone Wrapper 1. Check for mount 2. Check for updates 3. Pass in the props 4. Find the node in the DOM 5. Apply an identifier class 6. Render!
16. signup-header.cjsx
17. Passing Down Data Multiple Models & Collections as Props
18. Passing Down Data What are Props? Properties that are received from above and are immutable
 as far as the component is concerned
19. Passing Down Data What is State? The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events).
20. Passing Down Data
21. Passing Down Data Backbone React Component Mixin Glue your Backbone models and collections into React components github.com/magalhas/backbone-react-component by José Magalhães
22. Passing Down Data Helper Methods @getModel() @getCollection() • @getModel().member.get(‘name’) • @getModel().address.set(‘zipcode’, 60714) • @getCollection().addresses.map (address, index) =>
23. Gotcha’s • CJSX - Babel is much more robust, if you can use it - use it.
 • Implicit returns - remember to wrap a series of components
 in a parent div, otherwise it won’t render 
 • CJSX - Event handlers will need to `return false`, otherwise 
 React will emit a warning Don’t freak out about the templates!
24. Final Thoughts • Interim 
 We don’t plan on building apps this way forever,
 our newer apps take a more robust Flux + React approach • React-Backbone by Joe Hudson
 github.com/jhudson8/react-backbone
25. Thank you