This course has been updated! We now recommend you take the Ember Octane Fundamentals course.
Table of Contents
Anatomy of an Ember Application
Introduction
Mike North is the CTO of Levanto Financial. Previously he was a UI Architect for Yahoo and has written or contributed to many Ember add-ons throughout his career. Mike begins this Ember course with a brief introduction and an outline of topics he’ll be covering.
Philosophy of Ember
Ember’s tagline states that it’s designed for ambitious applications. It focuses on productivity and ergonomics while aligning with web standards. Ember wants to be a complete and holistic solution.
The Ember Ecosystem Overview
Mike overviews the entire Ember ecosystem which consists of libraries like the Ember framework, Data Persistence, and build toolchain. He also lays out his goals for this workshop.
Folder Structure
The resources for an Ember project reside in the /app, /vendor, /public, /tests, and /config folders. Other folders in the project are managed by ember-cli. Mike looks at the anatomy of an Ember application and spends a few minutes talking specifically about the /app directory.
Template Basics
Ember uses the Handlebars templating language. Templates are compiled and populated with data via a context or scope. They also contain helpers like conditions and loops which allow for more dynamic functionality. Mike explains the inner workings of a compiled template and share a couple code examples of helpers.
Router
The router manages transitions between URLs in the application. In Ember, there is only one router per application. There are micro-libraries like router.js and route-recognizer that aid in the defining and handling of each URL.
Routes as a Hierarchy
Hierarchical routing means there is more than one route active for a particular URL. Mike demonstrates how Ember handles these scenarios. He also explains the {{outlet}} helper which defines where child views are placed within a template.
Creating a New Ember Project
Before getting into the first exercise, Mike spends a few minutes demonstrating how to create a new Ember project. He uses the ember-cli library to generate an application template, download dependencies, and initialize Git. After generating the application, Mike installs a few Ember add-ons and serves up the initial application.
Code Generation
Mike opens the starter application and demonstrates how to use ember-cli to generate Ember components. He also makes a few modifications to the code to illustrate the workflow he’ll be using throughout the course. Mike recommends using the Ember Inspector add-on for Google Chrome.
Exercise 1
In this exercise, you will set up the basic routes and placeholder templates. For now, all content will be hard-coded.
Exercise 1 Solution, Part 1
Mike walks through the solution to Exercise 1. In this first part he adds the static and dynamic routes to the application.
Exercise 1 Solution, Part 2
Mike continues demonstrating the solution to Exercise 1 by adding markup and static data in to each route template.
Exercise 1 Solution, Part 3
Mike finishes the solution to Exercise 1 by adding a catch-all to handle unrecognized routes.
Routes, Services, & Actions
Routes
The router in Ember is a finite state machine tasked with managing routes. Each route is responsible for managing the transition between states. Routes load templates, models, and handle user events. Mike explains routes more in-depth and takes a look at some of the lifecycle hooks.
Transitioning Routes
Ember provides methods like transitionTo() and replaceWith() to transition from within a route. Mike walks through a few use cases for when to use one method over the other.
Exercise 2
In this exercise you will take the hard-coded data out of the templates and place it into the routes. This way the routes will be providing the data and redirecting.
Exercise 2 Solution, Part 1
Mike begins explaining the solution to Exercise 2. He starts by adding the default redirecting routes for the index, repos, and issues.
Exercise 2 Solution, Part 2
Mike wraps up the solution to Exercise 2 by answering a few audience questions about the exercise.
Services
Services are singleton objects with a long lifecycle. They provide a means for managing shared application functionality and state. The return value of a service can be treated like any other property. - **Just before this video there’s a flash of empty video
Actions
Actions are the primary means for handling user interaction. The action-binding component is similar to data-binding and can be handled by routes, components, views, and controllers.
Ember.Object & Simple Properties
Ember.Object is the base-class for most Ember components. Mutable properties can accessed using the get() and set() methods. After introducing Ember.Object, Mike spends a few minutes demonstrating how services, actions and simple properties tie together.
Exercise 3
In this exercise, you will add a favorites service and inject that service into the /orgs route. Then you will add an action to add items to the favorites.
Exercise 3 Solution
Mike walks through the solution to Exercise 3. He also spends a few minutes answering audience questions.
Remote APIs, Simple Models, and Substates
Retrieving Data
Remote data can be loaded into an Ember application using any Promise-based API. Mike shares a simple code example that uses the jQuery $.get() method to access Github’s API. He also talks about using Simple Models to store data.
Exercise 4
In this exercise, you will replace the hard-coded data in the application with dynamic data coming from the Github API.
Exercise 4 Solution, Part 1
Mike walks through the solution to Exercise 4. He begins by replace the static data in the /orgs and /repos routes with live data from Github’s API.
Exercise 4 Solution, Part 2
Mike continues the solution to Exercise 4 by explaining the content-policy errors that are appearing in the console and adding dynamic data to the issues and contributors routes.
Loading & Error Substates
A substate is state that doesn’t correspond to a specific URL. For example, when transitioning between two states, the application will enter a “loading” substate. Similarly, the application can enter an “error” substate if a request is rejected.
Recap
Before moving on to the second part of the course, Mike spends a few minutes recapping what he’s covered up to this point and outlines the topics for rest of the course.
Loading & Error Substates Revisited
Mike revisits the Loading & Substrates topic he covered earlier.
Exercise 5
In this exercise, you will add error and loading substates to the /org page in the Ember application.
Exercise 5 Solution, Part 1
Mike walks through the solution to Exercise 5. He also spends a few minutes customizing the substate markup and answering some audience questions.
Components
Components
Ember components are stored in the /components directory of a project. They are encapsulated elements that have an exposed API. Mike explores the lifecycle of Ember components, how they are consumed, and how they handle actions.
Creating a Component
Mike spends a few minutes demonstrating how to create an Ember component. He uses ember-cli to generate all the necessary files and builds out a simple social-info component.
Exercise 6
In this exercise, you will create two components: {{github-org}} and {{github-repo}}. These components will be used in the body of the #each loop on their respective pages.
Exercise 6 Solution, Part 1
Mike begins the solution to Exercise 6. First, he uses ember-cli to generate the files for each component. Then he builds out the {{github-org}} component and the {{github-repo}} component.
Exercise 6 Solution, Part 2
Now that Mike has finished the solution to Exercise 6, he spends some time answering a number of audience questions about documentation, public vs. private properties, and using the “yield” keyword.
Computed Properties
Computed Properties
Computed properties are calculated based on other properties. They are cached so subsequent requests for the value do not trigger a recalculation. Mike explains computed properties and shows how they can be read-only or read and writeable.
Dependencies on Arrays
There are two ways computed property dependencies on an array can be declared. They can be declared based the length of an array or based on a property of an item in the array. Mike shares use-cases for when each method is appropriate.
Internal Mechanism & Macros
Mike spends a few minutes diagramming the internal mechanism behind computed properties. He also introduces Macros which allow a computed property or method to be reused through an application.
Exercise 7
In this exercise, you will enhance the {{github-org}} component by adding a computed property for the favorite state. You will do this by creating the macro “isFavorited”.
Exercise 7 Solution, Part 1
Mike walks through the solution to Exercise 7. He starts by adding the “isFavorited” macro and adds the code for favoriting an organization.
Exercise 7 Solution, Part 2
Mike concludes Exercise 7 by adding the functionality for toggling a favorite. He also spends a few minutes answering audience questions.
Testing
Introduction to Testing
Testing can preformed on a specific algorithm, integration between components, or a user’s workflow through an application. Mike introduces the concept of testing and demonstrates how to run run tests in an Ember application.
Types of Tests
Mike dives a little deeper into each type of test. Unit tests can be automatically generated by ember-cli and are very fast. Integration tests can test a component in isolation and be provided a scenario template. Acceptance tests are slower but are good for testing the application as a whole.
Exercise 8
In this exercise, you will write a unit test for the computed property macro, an integration test for the {{github-org}} component, and an acceptance test for the application.
Exercise 8 Solution, Part 1
Mike begins the solution to Exercise 8 by cleaning up a number of integration tests that were generated by ember-cli. He also demonstrates how to mock-up data to make the testing process easier.
Exercise 8 Solution, Part 2
Mike continues the Exercise 9 solution by writing the test for the is-in-array computed property macro.
Exercise 8 Solution, Part 3
Now that the is-in-array test is created, Mike adds a test for the favorite/unfavorite action.
Exercise 8 Solution, Part 4
Mike concludes Exercise 8 by demonstrating how to create an acceptance test.
Handlebars Helpers, Ember-Data, & Add-ons
Handlebars Helpers
Handlebars Helpers are another way of extending what you can do in a template. They can be bound to data if need be and are useful for scenarios where you don’t want to add any additional DOM elements.
Exercise 9
In this exercise, you will build a “nice-number” Handlebar helper. You will also write a unit test for this new helper.
Exercise 9 Solution
Mike walks through the solution to Exercise 9.
Ember-Data
Ember-Data is a persistence library that can be used to define how to interact with your APIs. The key objects of Ember-Data are Model, Store, Adaptor, and Serialize. Mike briefly explains each of the object before moving into the next Exercise.
Exercise 10 Solution, Part 1
Exercise 10 Mike demonstrates how to transition the data retrieval from jQuery to Ember-Data. Mike also creates an Application Adapter and Application Serializer.
Exercise 10 Solution, Part 2
Mike continues the solution for Exercise 10. Now that data is successfully loaded the application, he adds some additional logic for handing a specific requestType in the serializer.
Exercise 10 Solution, Part 3
Mike wraps up his walk through the Exercise 10 solution by fielding some audience questions.
Creating an Ember Add-on
Ember add-ons are components that are external to the application. Mike demonstrates how to create an add-on and explains how the add-on and it’s dependencies are included in an application.
Publishing an Add-on to NPM
Now that Mike has created an Ember add-on he demonstrates how to publish it to the NPM repository. This would allow the add-on to be widely distributed and used across many applications.
Ember 2
The Ember 2.0 release did not ship with any new features. The main change is the removal of deprecated 1.x code. Future 2.x releases will include new features and more functionality. Mike talks about a few features that are in the roadmap.
The Ember Ecosystem Final Thoughts
Mike wraps up the course with a few final thoughts about the Ember ecosystem.