Tag: backbone

Quick Comparison of AngularJS, Backbone, and React

Quick Comparison of AngularJS, Backbone, and React

This past week, my bootcamp dived into  MVC and the AngularJS, Backbone, and React frameworks.

Since this went all very fast, I would like to do a quick comparison of those 3 framework’s similarities and differences. This would give me insight on what to look for when I use other frameworks

Or if you are familiar with one of these frameworks, and you wanted to dive into another, this could help you relate the two.

To note, for our use of AngularJS, we focused on using components over directives

Quick Comparison of AngularJS, Backbone, and React
Topic AngularJS Backbone React
Documentation AngularJS Backbone React
Templating {{ }} <%= %> {} to escape JSX, “, ${}
Libraries or Dependencies jQuery, Underscore ES6, Babel
Relation to MVC Module, View, Controller/Whatever Model, View, Collection View (Component)
AJAX Calls $http.get() .fetch() $.get()
Designing the Front-End Use HTML templates and/or edit HTML files Use HTML templates and/or in JS files append HTML elements to DOM Edit JSX files using React Code or JSX which acts like HTML
How to Pass Data We used AngularJS similar to React passing down data from parent to children. To receive data,  HTML should pass down the info from the parent. Then ensure  component in JS file has specified bindings. The Model is an instance. Models are passed to a Collection. Collection of Models is passed into View by creating instances of View. Views have initialize and render functions. Models, Collections, and Views all extend respective Backbone classes. (Ie. var MyView = Backbone.View.extend({})) Pass down data through Views or Components. All Views are instances of React.Component Ie. class MyView extends React.Component{}. In addition to constructor methods, they have render methods. Children cannot interact with each other; only parent can communicate to children and pass props down through JSX.
Things to Look Out for camelCase in JS. kebab-case in HTML. Ie. When passing down a function with name onClick, use on-click in HTML Determine if writing React Code or JSX and ES6 or ES5

What are some things you look out for when learning new frameworks?


Image Credits:
By AngularJS – https://github.com/angular/angular.js/tree/master/images/logo, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=31016280
By Unknown –
By Facebook – https://github.com/facebook/react/blob/master/LICENSE-docs, https://en.wikipedia.org/wiki/File:React-icon.svg#file