Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Hybrid Backbone & React App

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.

Peter Piekarczyk

May 29, 2015
Tweet

More Decks by Peter Piekarczyk

Other Decks in Programming

Transcript

  1. Backbone & React
    The Hybrid App
    Peter Piekarczyk
    May 29, 2015

    View full-size slide

  2. UI Engineer
    Trunk Club
    @peterpme
    github.com/ppiekarczyk

    View full-size slide

  3. Getting Started

    View full-size slide

  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

    View full-size slide

  5. BWP BWP BWP
    BWP
    BWP

    View full-size slide

  6. “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?

    View full-size slide

  7. 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

    View full-size slide

  8. React to the Rescue!
    Templates & Views
    Our code became much more manageable

    View full-size slide

  9. React to the Rescue!
    CSS Styles as Components
    Our design & code became much more manageable

    View full-size slide

  10. React to the Rescue!
    No Magic, Just Good Javascript.

    View full-size slide

  11. 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!

    View full-size slide

  12. React Backbone Adapter
    1. Create
    2. Identify
    3. Attach
    4. Render
    5. Dispose
    Attaching a React component to a Parent level Backbone view

    View full-size slide

  13. React Backbone Adapter
    # Signup Controller
    Attaching a React component to a Parent level Backbone view

    View full-size slide

  14. 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!

    View full-size slide

  15. signup-header.cjsx

    View full-size slide

  16. Passing Down Data
    Multiple Models & Collections as Props

    View full-size slide

  17. Passing Down Data
    What are Props?
    Properties that are received from above and are immutable

    as far as the component is concerned

    View full-size slide

  18. 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).

    View full-size slide

  19. Passing Down Data

    View full-size slide

  20. 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

    View full-size slide

  21. Passing Down Data
    Helper Methods
    @getModel()
    @getCollection()
    • @getModel().member.get(‘name’)
    • @getModel().address.set(‘zipcode’, 60714)
    • @getCollection().addresses.map (address, index) =>

    View full-size slide

  22. 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!

    View full-size slide

  23. 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

    View full-size slide