Things I Remind Myself of When Working with Ember

As someone who loves Ember but doesn't get to use it on a daily basis, I find myself relearning concepts frequently. Here is my list of helpful hints when diving back into the framework, or when taking the next steps after learning the basic concepts.

Controllers are singletons.

Many of the bugs that I write are simply because I forget that controllers are singletons. After many years of working with server-side controllers, that are used once and thrown away, a singleton controller is a foreign concept that still bites me.

I make sure to test entering templates at different times in an Ember app lifecycle to make sure I'm not erroneously assuming a fresh state.

Verify each method of activating a route.

There are three ways to get into a route - via a {{#link-to}} in a template, a transitionTo() or transitionToRoute() call from within code, or directly through the URL. When coming from a {{#link-to}} or transition call, the model is passed in, and the model hook in the route does not fire. When entering directly from the url, you don't have a model, therefore the model hook fires. Furthermore, routes without dynamic segments always execute the model hook.

I make sure to test each scenario, as this is the source of many of my bugs.

Assure child models are loaded with the afterModel hook.

Many of the issues that stump me for frustratingly long periods of time have to do with models not being in the store when I expect them to be. For example, I was recently working on a project that was using the local storage adapter with Ember Data. I have a hasMany/belongsTo relationship, and depending on how the route was entered, the child records were not always available.

I've learned to assure all of the child model data is available by using the afterModel hook in the route object. The afterModel hook fires regardless of how the route is entered, saving me from some tricky bugs.

Learn to use the Ember Inspector.

There is a wealth of debugging information that is available within the Ember Inspector within Chrome or Firefox. Take some time to play with all of the features available, it is time well spent.

Whenever I get stuck, I start by opening the Inspector and checking the current route within the routes pane. I make sure that I'm looking at the correct controller and route objects, and that my expected models are loaded. I find it helpful to check the "narrow to current route" option to limit the amount of information that is presented.

I also make heavy use of the $E shortcut shown throughout the Ember Inspector. By clicking this little shortcut, you immediately have the selected object available in the JavaScript console to inspect.

Once the $E object is in the console, I like to run a $E.toString() to verify the type of object I'm working with. It's a simple trick, and I use it all the time. I still have trouble remembering what type of object is returned from different calls within the framework. If I've confirmed the object type, I can make much better use of Ember documentation and Google searches to help get me out of a jam.

Finally, I log all transitions by setting LOG_TRANSITIONS: true within the Ember Application object. I find the simple reminder of which route I'm on to be helpful.