This course does not reflect our current course standards or industry best practices.
Table of Contents
Internal MechanicsBrian overviews each framework he will be discussing throughout the course and explains their internal mechanics. He discusses Angular, Ember, Backbone and React.
Project SetupWith 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.
Bootstrapping AngularJSBrian 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.
Adding HTMLWith 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 Angular
Looping with hg-repeatThe 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 InteractivityUntil 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 ExtrasBrian 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 DirectivesDirectives 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 FiltersFilters 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 ServicesBrian briefly describes how services work in Angular. Services are used to communicate with external APIs or to pass data between controllers within the application.
Bootstrapping & Controllers in EmberUnlike 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.
ControllerBrian 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.
TemplatingBrian 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 reviewAt 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.
ActionsActions 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, continuedBrian 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 QuestionsWith the Ember todo application now complete, Brian spends some time answering questions from the audience around debugging and unit testing.
Bootstrapping Backbone.jsLike 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.
ViewsBrian 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 MVCNow 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.
FilteringThe 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 ItemsAs 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 BindingBackbone 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&ABrian 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.
Bootstrapping ReactBecause 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.
JSXBrian 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 ComponentsBrian 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 LifecycleA 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 ParentBrian 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 DataUp 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 InteractivityBrian 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 TodosBrian 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 StateNow 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 CompletedThe 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 QuestionsBrian 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.
Unsolicited OpinionsBrian 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 FeaturesIn 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.