This course is still relevant for Ember 2, but Ember Octane is out now! We now recommend you take the Ember Octane Fundamentals course.
Table of Contents
Advanced Ember 2.x
Introduction
Michael North introduces the course on Advanced Ember 2.x. Ember is an open-source JavaScript web framework, based on the Model–view–viewmodel (MVVM) pattern.
Ember and JavaScript
Michael reviews Ember's place in the JavaScript ecosystem.
Ember Magic
Container
Michael introduces the concept of a Container covering best practices for implementation and common issues with using them to troubleshoot problems better.
Resolver
Michael covers Resolver, which attempts to look up routes, models, components, and more in the codebase, to better help organize the codebase.
Challenge 1
In this challenge, students write an ES6 module that handles a few of math utilities.
Challenge 1: Solution
Michael walks through the solution for Challenge 1.
Initializers
There are two types of initializers: application initializers and application instance initializers. Michael reviews Application initializers that run as your application boots, and provide the primary means to configure dependency injections in your application.
Instance Initializers
Michael covers application instance initializers, which are functions that are invoked immediately after an application boots up.
Challenge 2
In this challenge, students write an application that requests access to user's geolocation data. Making sure the application does not start until the geolocation is available, stores the information in the container.
Challenge 2: Solution
Michael walks through the solution for Challenge 2 and takes questions from students.
Building
Debugging
Michael walks through tips on how to debug NodeJS with Visual Studio Code application.
Broccoli
Introducing Broccoli, Michael demonstrates how to set up the client-side asset builder for Ember applications.
Challenge 3
In this challenge, students build a Broccoli plugin.
Challenge 3: Solution
Michael walks through the solution for Challenge 3.
Configuring the Build Pipeline
Setting up a build process with Broccoli with automated testing and Heroku deployment.
Challenge 4
In this challenge, students build an automated testing and deployment system.
Challenge 4: Solution
Michael walks through the solution for Challenge 4 and takes questions from students.
Fastboot
Rendering on the Server
Reviewing about the importance of incorporating progressive web applications methodology, Michael introduces FastBoot brings server-side rendering to Ember.js applications allowing users see content faster.
Setting Up Fastboot
Michael walks through setting up Fastboot and takes questions from students.
Challenge 5
In this challenge, students use Fastboot in a deployment of an application.
Challenge 5: Solution
Michael walks through the solution for Challenge 5 and takes questions from students.
Shoebox
Michael introduces the concept of Shoebox, which allows you to leverage server API calls made by the FastBoot rendered application on the browser rendered application. This approach keeps duplicating work the application is performing and results in a performance benefit.
Challenge 6
In this challenge, students get the user agent and make it accessible to the client side.
Challenge 6: Solution
Michael walks through the solution for Challenge 6 and takes questions from students.
ember-data-fastboot
Michael reviews ember-data-fastboot, an addon that serializes the contents of your ember-data to store within the Fastboot shoebox.
Challenge 7
In this challenge, students create a system to keep track of a current user with Ember Simple Auth.
Challenge 7: Solution
Michael walks through the solution for Challenge 7 and takes questions from students.
Wrapping Up Day 1
State Management
Four Types of State
After Michael introduce four types of state: UI State, Persisted State, Addressable State, and Draft State, he covers the core principles of each including the best practices for handling state management.
Addressable State
Michael reviews Addressable State, which is data that can be shared, historically archived, or URL-driven like sorted or filtered search results.
Challenge 8
In this challenge, students update and filter Query Parameters.
Challenge 8: Solution
Michael walks through the solution for Challenge 8 and takes questions from students.
Draft State
Michael introduces the concept of Draft State. Unfinished email messages or comment messages are good examples of Draft State, which is locally-stored temporarily data that will eventually be persisted.
Challenge 9
In this challenge, students create a draft feature that saves a draft of a comment even if a user navigates away from and back to their post.
Challenge 9: Solution
Michael walks through the solution for Challenge 9.
Persisted State
Introducing the concept of Persisted State, which is a concept that even though a user didn't explicitly tell us to save data to a file such as a comment or a review, or email message draft, the user would appreciate storing that data away for when they return. Micahel covers how in Ember we can save temporary user data.
Challenge 10
In this challenge, students work with persisted state to create a comment system that keeps a user's draft even if not explicitly told to save it for the user.
Challenge 10: Solution
Michael walks through the solution for Challenge 10 and takes questions from students.
UI State
Michael introduces the concept of State UI, which are short pieces of information for the user. Examples of UI States are an accordion expansion, saving a user's scroll position, or notifying if a friend "is typing..." a message in a chat application.
Challenge 11
In this challenge, students create collapsible piece metadata record about a post with the initial state being hidden. The display of the meta information—hidden or shown—is persisted for each record for the duration of the UI session.
Challenge 11: Solution
Michael walks through the solution for Challenge 11 and takes questions from students.
Wrapping Up State Management
Michael reviews State Management types and how thinking about a coding problem in terms of state helps understand how to approach the solution better.
Concurrency
Introducing Ember-Concurrency
Concurrency in task management is a method for building asynchronous, cancellable operations. Michael shows how to integrate concurrency into an application.
Challenge 12
In this challenge, students build out a feature that allows editing of a comment and submitting that update while avoiding double posting.
Challenge 12: Solution
Michael walks through the solution for Challenge 12 and takes questions from students.
Animation
Liquid Fire
Introducing Ember's official animation library built on velocity.js, Michael reviews incoporating transitions with Liquid Fire.
Challenge 13
In this challenge, students animate the number of comments that belong to a post.
Challenge 13: Solution
Michael walks through the solution for Challenge 13.
Blueprints
Code Generation with Ember-CLI
Michael reviews Blueprints in the Ember CLI, which allow for defining and sharing of common Ember patterns. Ember Blueprints create basic modules extending the correct Ember objects and put the files in the correct directories.
Challenge 14
In this challenge, students build a Blueprint that makes an image placeholder.
Challenge 14: Solution
Michael walks through the solution for Challenge 14 and takes questions from students.
Modular Architecture
Introducing Ember Addons
Within the Ember ecosystem is the Ember Addon that are modified NPM modules. Michael reviews addons that are engines, a particular kind of addon that is an app in and of its self, embedded or mounted in the consuming app.
Challenge 15
In this challenge, students create an addon to move components and templates into the appropriate folders of the addon.
Challenge 15: Solution
Michael walks through the solution for Challenge 15.
Modifying Asset Pipeline
Michael introduces included hooks within an addon to work with Broccoli as it generates assets.
Challenge 16
In this challenge, students create an addon that automatically gets added to the asset pipeline.
Challenge 16: Solution
Michael walks through the solution for Challenge 16.
Adding Comand to Ember-CLI
Michael demonstrates how to include a command to Ember-CLI.
Challenge 17
In this challenge, students create a command that sends out a notification that gets printed to the console when executed.
Challenge 17: Solution
Michael walks through the solution for Challenge 17.
