BackboneJS + ReactJS
- 2. Library vs Framework ?? A library performs specific, well-defined operations. A framework is a collection of patterns and libraries to help with building an application. Backbone.js (Model/Controller) - Framework React.js (View) - Library “Frameworks skip Somework”
- 3. BackboneJS Frontend uber-light MVC framework,with RESTful support & more flexible. Pros can be easily integrated into an existing project & adding structure to Javascript... My application is going to do a lot of heavy DOM manipulations & handle large chunk of data. Cons Learning curve not as simple as other MVC External dependencies like Jquery, Underscore.js Non RESTful API backend Nested backbone View difficult to maintain, every collection changes re-render all the views.
- 4. Backbone Models Model encapsulate business logic and data var Todo = Backbone.Model.extend({ defaults: { title: 'backbone_title', }, initialize: function(){ console.log('This model has been initialized.'); }, setTitle: function(newTitle){ this.set({ title: newTitle }); } }); var myTodo = new Todo(); myTodo.setTitle('Backbone Hello world.');
- 5. Backbone View Views are responsible for listening to DOM element's events & updating the DOM elements. View templates -- underscore.js handlebar.js var AppView = Backbone.View.extend({ // el - stands for element. Every view has a element associate in with HTML content will be rendered. el: '#container', initialize: function(){ this.render(); }, render: function(){ this.$el.html("Hello World"); } });
- 6. ReactJS React is a UI library to facilitate the creation of interactive, stateful & reusable UI components. Building large applications with data that changes over time. It's just a View of M'V'C framework. Virtual DOM (USP). React has only “Components” that will just re-render. Javascript + HTML = JSX JSX - Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects. Render in Server via node.js
- 7. Components & LifeCycle Component = view/HTML + controller/JS React.createClass({ }) The way in which you create a new component. State -- Internal data,can change Prop -- External data,can't change UpdateCycle Component LifeCycle React.createClass() componentWillUnmount() getInitialState() componentDidMount() componentWillMount() Render() Render() componentWillUpdate() componentDidUpdate()
- 8. Virtual DOM when data has changed ?? which DOM element(s) to be updated?? Angular “Digest cycle” mechanism On every update in the State React's diffing algorithm DOM Structure Patch boolean shouldComponentUpdate()
- 9. Architecture Traditional MVC Difficult to organise the code Good to use Asynchronous Module Definition (AMD) like require.js,browserify,gulp Flux Architecture Dispatcher acts as traffic controller. One-way data flow. dispatcheraction store view View model model model model view View View controller
- 10. Challenges Code maintenance (JS + HTML) No two way data-binding No separate Templates Converting JSX to JS (Babel) ReactJS Gotchas Re-initialise datatables Alerts account landing page DEMO