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

Managing Complexity

Ambitious apps have a tendency to be inherently a little complex. We'll look at a few battle-tested ember addons that have emerged as the go-to solutions in their domains, and leverage this third party code to enrich our app while keeping complexity under control.

  • Managing ComplexityConcurrency

    Promises are soooo 2016. We'll do a few things with ember-concurrency, a library that leverages the power of Generator Functions to help us manage asynchronous tasks with grace and poise.

  • Managing ComplexityEXERCISE: Better comment saving

    We can improve our comment saving experience, by disabling the textarea and save button while the operation is underway.

  • Managing ComplexityAnimation

    A little tasteful animation can make a world of difference, in making your app feel rich and interactive. We'll look at a few easy to use features in Ember's official animation library, liquid-fire, whose "big idea" is making animations declarative.

  • Managing ComplexityEXERCISE: Animated Comment Count

    We have a small comment count indicator in the list of records on the left side of the screen. Use liquid fire to animate this so that it rolls over "odometer style" when comments are added or removed.

  • Managing ComplexityLogic in Templates

    As you start building a sizable app, it's easy to become annoyed at all of the repetitive computed properties that usually come along with conditionals, filtering and transforming data, and mutating values. We'll look at two libraries

    • ember-composable-helpers
    • ember-truth-helpers

    That allow us to express simple logic declaratively in templates.

  • Managing ComplexityEXERCISE: Public vs Private Comments

    Good news! We have a new feature whereby comments can be made either in "fact" or "opinion" mode .

    • Using only a <select> element, composable helpers, and minimal imperative code in JavaScript files, add a drop down allowing the user to pick between comment types when creating a comment
    • Add a filter to the top of the list, allowing us to pick from three modes "fact", "opinion" or "all"
    • In "all" mode, facts should be sorted higher on the list than "opinions", but they should otherwise be sorted by createdAt within each category.
  • Managing ComplexityAuthentication & Authorization

    Authentication is often the first big thing we end up building into a new app, and the approach ember-simple-auth takes has clearly resonated with the Ember community. By building a small set of single-purpose JavaScript modules, and mixing a few things into a few foundational framework objects, we can have authentication working in no time! We'll go a step further and explore the concept of roles, whereby users are granted or denied access to certain routes, based on some data associated with their user object.

  • Managing ComplexityEXERCISE: Login/Logout

    The API we've been using supports authentication via OAuth2 Password Grants. Implement "logging in", and unlock the ability to post non-anonymous comments. Add a "Logout" button to the navbar, which should

    • make a DELETE request to the same endpoint we use for login, and then
    • invalidate the client-side session
  • Managing ComplexityRecap & Wrap Up

    We'll recap everything we've covered today, and preview tomorrow's agenda

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!