Advanced Ember 2.x
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
ContainerMichael introduces the concept of a Container covering best practices for implementation and common issues with using them to troubleshoot problems better.
ResolverMichael covers Resolver, which attempts to look up routes, models, components, and more in the codebase, to better help organize the codebase.
Challenge 1In this challenge, students write an ES6 module that handles a few of math utilities.
Challenge 1: SolutionMichael walks through the solution for Challenge 1.
InitializersThere 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 InitializersMichael covers application instance initializers, which are functions that are invoked immediately after an application boots up.
Challenge 2In 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: SolutionMichael walks through the solution for Challenge 2 and takes questions from students.
DebuggingMichael walks through tips on how to debug NodeJS with Visual Studio Code application.
BroccoliIntroducing Broccoli, Michael demonstrates how to set up the client-side asset builder for Ember applications.
Challenge 3In this challenge, students build a Broccoli plugin.
Challenge 3: SolutionMichael walks through the solution for Challenge 3.
Configuring the Build PipelineSetting up a build process with Broccoli with automated testing and Heroku deployment.
Challenge 4In this challenge, students build an automated testing and deployment system.
Challenge 4: SolutionMichael walks through the solution for Challenge 4 and takes questions from students.
Rendering on the ServerReviewing 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 FastbootMichael walks through setting up Fastboot and takes questions from students.
Challenge 5In this challenge, students use Fastboot in a deployment of an application.
Challenge 5: SolutionMichael walks through the solution for Challenge 5 and takes questions from students.
ShoeboxMichael 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 6In this challenge, students get the user agent and make it accessible to the client side.
Challenge 6: SolutionMichael walks through the solution for Challenge 6 and takes questions from students.
ember-data-fastbootMichael reviews ember-data-fastboot, an addon that serializes the contents of your ember-data to store within the Fastboot shoebox.
Challenge 7In this challenge, students create a system to keep track of a current user with Ember Simple Auth.
Challenge 7: SolutionMichael walks through the solution for Challenge 7 and takes questions from students.
Wrapping Up Day 1
Four Types of StateAfter 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 StateMichael reviews Addressable State, which is data that can be shared, historically archived, or URL-driven like sorted or filtered search results.
Challenge 8In this challenge, students update and filter Query Parameters.
Challenge 8: SolutionMichael walks through the solution for Challenge 8 and takes questions from students.
Draft StateMichael 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 9In 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: SolutionMichael walks through the solution for Challenge 9.
Persisted StateIntroducing 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 10In 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: SolutionMichael walks through the solution for Challenge 10 and takes questions from students.
UI StateMichael 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 11In 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: SolutionMichael walks through the solution for Challenge 11 and takes questions from students.
Wrapping Up State ManagementMichael reviews State Management types and how thinking about a coding problem in terms of state helps understand how to approach the solution better.
Introducing Ember-ConcurrencyConcurrency in task management is a method for building asynchronous, cancellable operations. Michael shows how to integrate concurrency into an application.
Challenge 12In this challenge, students build out a feature that allows editing of a comment and submitting that update while avoiding double posting.
Challenge 12: SolutionMichael walks through the solution for Challenge 12 and takes questions from students.
Liquid FireIntroducing Ember's official animation library built on velocity.js, Michael reviews incoporating transitions with Liquid Fire.
Challenge 13In this challenge, students animate the number of comments that belong to a post.
Challenge 13: SolutionMichael walks through the solution for Challenge 13.
Code Generation with Ember-CLIMichael 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 14In this challenge, students build a Blueprint that makes an image placeholder.
Challenge 14: SolutionMichael walks through the solution for Challenge 14 and takes questions from students.
Introducing Ember AddonsWithin 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 15In this challenge, students create an addon to move components and templates into the appropriate folders of the addon.
Challenge 15: SolutionMichael walks through the solution for Challenge 15.
Modifying Asset PipelineMichael introduces included hooks within an addon to work with Broccoli as it generates assets.
Challenge 16In this challenge, students create an addon that automatically gets added to the asset pipeline.
Challenge 16: SolutionMichael walks through the solution for Challenge 16.
Adding Comand to Ember-CLIMichael demonstrates how to include a command to Ember-CLI.
Challenge 17In this challenge, students create a command that sends out a notification that gets printed to the console when executed.
Challenge 17: SolutionMichael walks through the solution for Challenge 17.