From Backbone to React

Transcript

1. Backbone React Ludovico Fischer <2015-05-11 Mon>
2. Outline
3. Who am I A software developer Started with Drupal in 2009 Scala Java JavaScript SQL
4. Knowledge
5. Who knows React?
6. Who knows Backbone? Backbone: hidden popularity Manual binding (events to arbitrary functions) Update the interface back (how?)
7. Who knows Marionette? Framework on top of Backbone View hierarchy with event bubbling
8. Feedback Every app is different Backbone enforces little structure React does not enforce router, model layer
9. Backbone structure Models/collections enforce URL structure not flexible Mainly event declaration Backbone.Vew.extend({ events: { ’click #package-in-progress’: ’_submit’, ’click #package-complete’: ’_schedule’, ’click #print-labels’: ’_printLabels’ }, render: function() { /* All bets are off */ } });
10. Signal Global event bus Backbone.on(’deliveries:searchstart’, function displayLoadin }); collection.on(’reset’, Backbone.trigger(’deliveries:searchen Inconvenients Everything can happen (similar to angular $scope) Difficult to find what emits the signal and what captures it (grep) Naming clashes It is global
11. Reusing Backbone models A Backbone model just fetches data in a very inflexible way fetch want to set state and not force Forced url pattern Force update pattern listen for reset event The killer argument Bad domain decomposition Why a single model for all sections?
12. Our app A few expert users Sidebar, main, alert, sidebar alert Communicates through global objects Event bus (Backbone) Singleton collection Fresh data always, always-on connection (no mobile)
13. Problems Drill-down interface problem Every display depends on search
14. How to refactor Put state on top (the right top) <SidebarForm searchHandler={search}/> <button onClick={props.search}/> xhr.onLoad = function() { React.render( <ResultsView deliveries={deliveries}/>); }; Put external template inside render (!!) Use libraries https://github.com/christianalfoni/formsy-react https://github.com/rackt/react-router
15. Do you need Flux? Suspicious Global stores look like Backbone models But you always have some kind of ’global’ database Ask instead of receive Top component passes the data: why not ask for the data yourself? Why not ask?
16. The power of convention Props always come from the component that is just above Type checking helps
17. The power of React Psychological advantage : inline template Technical advantage: change state or props, the view changes automatically
18. Should you use React instead of Backbone? Today, yes
19. Keep an eye out for the book: http://ludovf.net/reactbook