Ember Pro

We'll go way beyond the fundamentals, tackling topics like authentication, advanced debugging techniques, server-side rendering, modular app design.

This course is designed to help developers already familiar with Ember.js to unlock the true power of the framework.

Ember Pro

Modular Architecture

One of the unique strengths of the Ember ecosystem is the concept of an Ember Addon.

The big recent advancement in this area over the past year is the concept of engines, a special kind of addon that essentially is an app in and of its self, embedded or mounted in the consuming app.

Tomorrow's ember apps will take advantage of all of these great capabilities, so we'll thoroughly study the various building blocks, and cover some important and broadly useful scenarios.

  • Modular ArchitectureAddon Basics

    Ember addons can exist as their own independently-versioned separate projects, or as in-repo addons that live within a host app's /lib folder. There are major benefits to both of these patterns, so once we cover some common addon basics, we'll outline important differences and practical use cases for each.

  • Modular ArchitectureModule Namespaces, Resolver Consequences

    Typically, when working with addons, you have two top-level folders: app and addon, each of which may contain familiar folders like components, routes, etc... . We'll connect back to our newfound knowledge of the container, loader and resolver, to understand important consequences of putting certain types of files in each tree.

  • Modular ArchitectureEXERCISE: UI Kit

    Move our {{x-input}} and {{x-textarea}} components into a new in-repo addon called core-ui. Make sure your templates are not in the /app folder.

  • Modular ArchitectureEXERCISE: Modifying a host app's asset pipeline

    Addons are the go-to way of building up an app's asset pipeline in a modular way. We'll look at the different places that we can get access to important Broccoli trees, and cover some important distinctions between being consumed in apps vs other addons vs engines.

  • Modular ArchitectureRoute-less Engines

    Engines are a powerful new capability, similar in concept to the idea of Rails engines, for embedding a sub-application into a host app. This is a departure from non-engine addons, in that the engine has its own registry & container, can have its own initializers, services, etc...

  • Modular ArchitectureRouted Engines

    We've already embedded a route-less engine into a view, so let's take things to the next level and mount a routed engine in our router. We'll need to introduce a few new concepts relating to how engines share information with the host app, and pay special attention to the way we create {{link-to}} components that cross the host/engine boundary.

  • Modular ArchitectureLazy Engines

    Beyond encapsulation, one of the biggest benefits that come along with engines is that it frees us from having to pile our entire app into one big set of static assets, to be downloaded as the user first enters. Lazy engines allow chunks of assets to be downloaded on an as-needed basis, as a user crosses an engine boundary.

    Although this adds a little extra complexity to our apps, the performance payoff can be huge, particularly if infrequently-used sections of your app are particularly heavy in terms of dependencies and application code.

  • Modular ArchitectureWrap Up & Final Recap

    We'll take a step back and recap everything we've learned so far, putting in the broader context of being able to build out things quickly, robustly and sustainably with Ember.js.


Serious Complexity

This course doesn't shy away from real-world problems. You'll tackle challenges around modular architecture, performance, asynchrony and more!

Deeper Understanding

Having deeper conceptual understanding of how Ember works is essential in order to take your skills to the next level. This course is a huge step in getting you there.

Catalyst Course

This course is designed to serve as a springboard for supercharging your self-driven education. We'll leave you with a reading list on deeper topics, so the learning can continue!