Over the past year the rise of the MV* has been meteoric. It seems you cannot go more than a few sentences discussing JavaScript without mentioning Angular, Ember, Backbone or React. It also is certainly not without merit: JavaScript frameworks can greatly increase your productivity in client side code. Brian Holt (Reddit) gives a fitting treatise to each of the four frameworks and help you understand which one is best suited to you and your next big project.
This course and others like it are available as part of our Frontend Masters video subscription.
Published: September 10, 2014
Table of Contents
Framework Overview
Introduction
Brian Holt (@holtbt) leads off the course with a brief introduction of himself and why you may want to learn the differences in JavaScript frameworks. These frameworks help developers use MVC patterns in their applications. Choosing the best frameworks often depends on your use case and preference.Internal Mechanics
Brian overviews each framework he will be discussing throughout the course and explains their internal mechanics. He discusses Angular, Ember, Backbone and React.Project Setup
With each framework, Brian will be building a simple Todo application to help demonstrate their similarities and differences. The source code, notes and slides for this course are located in his GitHub account. - https://github.com/btholt/jsmvc-pres
AngularJS
Bootstrapping AngularJS
Brian begins the Angular Todo application with a little bootstrapping. The stubs out the application-level configuration module. While there isn’t any configuration needed, he discusses how you may configure your Angular applications. After this he creates a controller and generates some default data to populate the Todo application. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/ng-todoAdding HTML
With some initial bootstrapping out of the way, Brian links up the application and controller with the HTML. He also demonstrates how two-way data binding in AngularLooping with hg-repeat
The ng-repeat directive in Angular functions like a for loop. It will loop over an array in the controller and output a block of HTML for every object in the array. Brian adds an hg-repeat and uses it to display the list of Todo items.Adding Interactivity
Until now, the application is only displaying the todos in our array. Brian adds a few functions that will add todos and remove todos when the user interacts with the application. He notes that any modifications to the todos array are automatically reflected in the UI because of the two-way data binding.Angular Extras
Brian finishes the Angular Todo application and demonstrates the a few additional Angular features. He talks a little about the power of directives and filters. He also answer some last questions from the audience.Angular Directives
Directives are an extremely powerful feature in Angular. They allow developers to add custom HTML elements or attributes into the DOM. These elements or attributes are modular and can be easily reused.Angular Filters
Filters in Angular take in an input and will return a manipulated version of that input. The input can be a string with the returned value being a modified version. The input could also be an array with the return value being a filtered or sorted version of the array.Angular Services
Brian briefly describes how services work in Angular. Services are used to communicate with external APIs or to pass data between controllers within the application.
Ember
Bootstrapping & Controllers in Ember
Unlike Angular, Ember has a few dependencies. jQuery and Handlebars must be included in the application for Ember to work. After declaring the Ember application, Brian creates a Router to handle the different routes (or URLs) within the application. He also defines the model for the Todo application. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/emb-todoController
Brian creates the controllers for the Todo application. Within the controller, there’s an action object that will contain all the event logic for the application. He then defines an adapter. Adapters in Ember are where the data will be loaded. This modular feature makes it easy to switch from mock data to remote data without affecting the application logic.Templating
Brian demonstrates how Ember uses script tags to surround blocks of HTML code that will be manipulated by Ember and be a source for the bootstrapping the data into the user interface. The Ember data and logic is injected using Handlebar notation.Code review
At this point the Todo application is working. Brian takes a few minutes to answer some audience question and troubleshoot some issues. Since Ember requires quite a bit of bootstrapping, Brian also reviews the application code to this point before moving forward.Actions
Actions are added at the component level but they don’t contain any logic. They notify the parent router of the event and let the router determine what should happen. This further decouples the UI from the controller.Actions, continued
Brian adds the action to clear any completed todo’s from the list. He also talks about how two-way data binding is implemented in Ember and how it differs from Angular.Ember Questions
With the Ember todo application now complete, Brian spends some time answering questions from the audience around debugging and unit testing.
Backbone
Bootstrapping Backbone.js
Like Ember, Backbone uses a Router to handle the different states of the application. Brian starts by creating the Router and hooking it into the application. Brian also creates a Model and a Collection. A Collection in Backbone is an array of Model objects. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/bb-todoViews
Brian creates the view for the Backbone todo application. The render function inside a view is the engine the drives the view. It’s responsible for updating the view whenever there is a change in state. The view uses templates which are snippets of HTML. These snippets are depending on the Underscore tempting library.Backbone MVC
Now that Brian has all the pieces in place for the Backbone todo application, it’s time to wire it together. In the Router (controller) he instantiates the view and populates it with the collection (model). He also creates add, reset, and destroy events in the view to handle user interactions.Filtering
The next task is to clear the completed todo items. This logic would be easy to add into the View, however it’s best placed in the Model where the data is stored. Brian demonstrates how to code the View to trigger the filter function inside the Model.Adding and Toggling Todo Items
As the users toggles each todo item, the view will fire an event which will call a toggle method inside the model. Similar to filtering, keeping the toggle logic inside the view is a good separation of concerns. Brian also adds the ability to add new todo items.Two-way Data Binding
Backbone relies on getters and setters for two-way data binding. Trigging the data binding has to come from events declared in the view. Brian creates and update method in the view that will call the setter functions in the model.Backbone Q&A
Brian wraps up the Backbone section by answer a number of questions form the audience. He also describes the differences in architecture between Backbone and Angular.
React
Setup
React uses a JSX Transformer that Brian will discuss more later. Because of this, Brian suggests running an HTTP server for this project. He demonstrates how to use NPM to install and startup the http-server node module. Brian also introduces JSX which, like CoffeeScript, transpiles into native JavaScript. - https://github.com/btholt/jsmvc-pres/tree/master/empty-projects/react-todoBootstrapping React
Because React is not opinionated on file structure, developers have a lot of freedom with bootstrapping. Brian demonstrates how he sets up each file in his React applications. This includes an app declaration and an immediately invoked function.JSX
Brian begins building the application. He incorporates the JSX code into the application. In this case, the JSX markup is returned by the render function of the TodoApp component.Creating Components
Brian starts adding some boilerplate code for components he’s going define. These components are added in the application using the JSX syntax. As Brian creates each component, he adds a render function that is responsible for defining the components JSX.Component Lifecycle
A React component has several functions that get run throughout its lifecycle. Properties within a component flows down from the parent. States, however are mutable by a component.Passing Properties from Parent
Brian demonstrates how to pass properties down from the parent to the TodoList component. He gives this component a todos property. Brian then modifies the render method inside the TodoList component to work with this newly added property.Modifying Data
Up to this point, the user interface cannot be changed because the underlying data is not modified. Each render will updated the UI with the original data. Brian modifies the application to receive updates from the users and make changes to the data and state.Finishing the Interactivity
Brian adds the same data/state update code to the rest of the user interface components. In this case, he implements the toggle and delete functions. He also discusses some best practices for code organizations in React applications.Creating New Todos
Brian implements the new todo functionality for the application. He also answers few questions from the audience on the future of React.Giving New Todo a State
Now that the user can create new todo objects, they need to be added to the array of todos. This requires the todo objects to have a state. Brian demonstrates how to give the new todo object a state and perpetuate the data throughout the application with two-way data binding.Clear Completed
The final feature needing implantation is the cleaning of completed todo items. Brian codes the clear completed functionality and then goes into a discussion on why you'd choose React.React Questions
Brian ends the React section by addressing some audience questions. He talks a little about his personal experience with React and how he unit tests React using Karma, Grunt, and Jasmine.
Wrap-up
Unsolicited Opinions
Brian wraps up the course giving his opinions on each framework he covered. He gives some insight into which scenarios are best for each framework and when to avoid them.Extended Features
In some cases, this course just scratched the surface in each of these frameworks. They have many extended features that can be game-changers when developing applications. Brian gives a quick run-down of some of the great things each framework brings to the table outside their core features.