JSConf 2015 – Ja.mesBrown.com – JavaScript and Web Development Blog http://ja.mesbrown.com Enterprise JavaScript Developer and Backbone.js expert. I write the Internets. Thu, 18 Jun 2015 15:05:32 +0000 en-US hourly 1 https://wordpress.org/?v=4.7.6 29053517 The Hybrid Backbone & React App – Peter Piekarczyk – JSConf 2015 http://ja.mesbrown.com/2015/05/the-hybrid-backbone-react-app-peter-piekarczyk-jsconf-2015/ Fri, 29 May 2015 16:20:41 +0000 http://ja.mesbrown.com/?p=1181 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
]]>
1181
Woah, You Can Test IE & Microsoft Edge on a Mac & Linux? – Rey Bango at JSConf 2015 http://ja.mesbrown.com/2015/05/woah-you-can-test-ie-microsoft-edge-on-a-mac-linux-rey-bango-at-jsconf-2015/ Wed, 27 May 2015 14:04:33 +0000 http://ja.mesbrown.com/?p=1177  Talk by Rey Bango https://twitter.com/reybango ]]> 1177