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.
- Using only a
-
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
- make a
-
Managing ComplexityRecap & Wrap Up
We'll recap everything we've covered today, and preview tomorrow's agenda