The Hybrid Backbone & React App – Peter Piekarczyk – JSConf 2015

The Hybrid Backbone & React App
By Peter Piekarczyk – https://twitter.com/peterpme

• UI Engineer @TrunkClub
• Usedpreviously:
  • https://speakerdeck.com/jhabdas/brunch-with-panache
  • https://github.com/trunkclub/brunch-with-panache
• Now using Backbone with React.js for the Views
• Look into and use: onClick=handleClick.bind(this, @)
• Migration
  • Start with small components
  • Use a backbone/react mixin
  • Get familiar with the API
    • initialize= componentDidMount
    • remove=unmountComponentAtNode
  • Convert your parent view to use React.createElement instead
  • Don’t freak out about the templates
• React Backbone Component – https://github.com/magalhas/backbone-react-component
• Process (see the slide)
  • Create
  • Identify
  • Attach
  • Render
  • Dispose
• React Backbone Wrapper
  • Check for mount
  • Check for updates
  • Pass the props
  • Find the node in the DOM
  • Apply an identifier class
  • Render!
• “Go with Babel, It’s Awesome”
• Passing Down Data – Multiple Models & Collections as Props (See slide)
• What are Props?
  • Properties that are received from above and are immutable as far as the component is concerned
• What is State?
  • The state starts with a default value when a Component mounts and then suffers from mutations in tie (mostly generated from user events)
• Components manage their own state internally.  They can’t change their props.  But they can change their children’s props.
• Glue your Backbone models and collections into React components using the React Backbone Component
• React Backbone Component gives you helper functions, this.getModel() and this.getCollection()
• Gotchas
  • CJSX – Babel is much more robust, if you can use it, use it (instead of CJSX)
  • Implicit returns – remember to wrap a series of components i 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!
• Final Thoughts
  • Interim – They don’t plan on building apps this way forever.  Newer apps take a more robust Flux + React approach
  • Check into https://github.com/jhudson8/react-backbone .  Seems awesome.