JavaScript and Web Development

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

29 May 2015 - JSConf 2015 - James Brown - No Comments

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

  • UI Engineer @TrunkClub
  • Usedpreviously:
  • 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

Leave a Reply