Front-End Frameworks Bootcamp: React, Angular, Ember & Backb

Install Backbone and dependencies with Bouwer, then set up a Backbone project structure. Create a public folder, an index.html, and include jQuery, Underscore, and Backbone scripts.

Create a Backbone model and collection to manage contact data, configure the REST URL /api/contacts, fetch the contacts, and pluck first names for display.

Build a client-side router with backbone router, define routes for root, contacts, and contacts/:id, and manage navigation with pushState history to render appropriate views.

Learn to build a home page contact list with a contacts list view, item views, and an actions toolbar; render items from a collection using templates and Backbone routing.

Create a single contact view with a form showing first name, last name, and email. Wire update and delete actions to a rest api and reflect changes via Backbone events.

Create and render a new contact form in a backbone app, save the contact to the collection, and return to the home page to see the updated list.

Install angular and its dependencies with bower to set up the angularjs address book app. Configure ng-view and an angular module, and wire angular resource for the rest api.

Create a contacts model in angular using a factory and ng-resource, bound to /api/contacts with an id token, and include a custom update method using put for server updates.

Configure angular routing with $routeProvider to map /contacts, /contacts/new, and /contacts/:id to respective templates. Enable html5 mode via location provider to remove hashbang and set a default redirect to /contacts.

Build a contacts list view by wiring a list controller to fetch contacts via the contacts factory, render with the repeat directive, and configure a base tag for routing.

Build a single contact view in Angular, fetch a contact by ID, bind input fields to the contact model, and implement update and delete actions with routing.

Create a new contact route in angular by building a new controller and form view, posting to the server on save, and redirecting to /contacts.

Learn how to set up a React-based front-end by pairing React as a view with a Backbone model and router, install and configure related libraries, and resolve GSX transformer paths.

Create and extend a contact store using a backbone model, connect to the REST API at /api/contacts, fetch all records as a promise, and prepare the app to route.

Set up the react router with a GSX-based routes object to define root, contacts, new, and contact paths, including a redirect to /contacts via push state history.

Create and render a contact list view in a React app, managing state with get initial state and displaying contacts from a Backbone collection.

Create a single contact view in React, fetch the contact by id from the context router, and implement update and delete actions with Backbone on the server.

Create a new contact form in a React application, wire it to the contact store with create, manage routing to /contacts, and bind context for navigation.

Set up a contacts app by cloning the template and installing Ember 1.11 with its data. Include jQuery and Handlebars and prepare the Ember template compiler.

Create an Ember data model with a DS store and rest adapter, configure the /api namespace, and implement a serializer to adapt array and single payloads from the server.

Configure the application router using history location, map routes with resource and route helpers for contacts, and implement index and redirect logic to navigate lists and details.

Render the home page as a contacts list using an application template and Handlebars in Ember. Create the contacts template with a toolbar and links to display each contact.

Learn to build an individual contact view in Ember with automatic routing, two-way bound inputs, and update and delete actions in the controller to persist changes.

Develop a new contact feature by creating a blank contact model and binding form inputs to it, then add a route, controller, and template to create and save the contact.

Compare four front-end libraries—Backbone, Angular, React, and Ember—through code size, manual data handling, conventions, and automation, to guide you toward the library that fits your coding style.