CODEX

I ❤ Ember.js — Routes & Ember Data

Learn why working with data in Ember is a breath of fresh air.

Photo by Gustavo Espíndola on Unsplash

I ❤ Ember.js is a series where I talk all about how to use Ember and why you should be using it in your projects. I’ve been working with Ember for a few years, and it’s become my favorite tool for creating powerful web apps, and for doing it easily!

Welcome back to I ❤ Ember.js. In this article, we’ll start taking a closer look at routes. Routes are critical in Ember, and we’ll see how the route mental model makes it super easy to reason out how to implement features. This article also introduces Ember Data, Ember’s built-in data management layer. If you’ve ever used Redux for React, I bet you’ll appreciate the conveniences Ember Data provides.

Last Time, on I ❤ Ember.js

Let’s recap how routes work in Ember:

• A user visits a URL in your application, like /artists.
• Ember finds the associated artists route file and calls its functions to fetch any needed data.
• Ember sets up the artists controller with the fetched data and other properties.
• The template file belonging to the artists route file is rendered, with access to its controller properties and functions.

Semantic Files

Now imagine you’re working on this project and you need to change the template that’s rendered for the artists route. It’s simple to figure out which file you need to edit, just take a look at the folder structure Ember sets up for you:

Similarly, the artists controller would be in the controllers folder!

Later, if you want to introduce a artists/artist route, it’s as simple as using ember-cli:

ember generate route artists/artist

And the proper files are created:

Now there are sub-folders!

That’s so neat! The structure of the app is evident from the folder structure, which means one less thing we need to think about.

There’s also a file in the project called router.js. As you create new routes using ember-cli, this file is automatically updated. You can also edit it manually in case you need to make changes. For example, if the artists route should actually have the URL /app-artists, it’s a simple change:

This is the router.js file

By now, we can see how much value Ember places on semantics. Making semantics a priority means that it’s easy for developers to understand how code works at a glance. Variables, functions, and all the way up through folders are named sensibly. I adore this Ember value, and it’s become my own regular habit to be as semantic as possible when coding.

The Route File

The Ember developers are committed to working with modern technology, and so the route file is an ES6 class:

The route’s job is to get data. To do that, we just have to code data fetching logic in the route's model() function. Whatever is returned by the model function is the data provided to the associated controller/template. You can even make the model function an async function if you need to do some asynchronous fetching (Ember will wait for the fetch to complete before proceeding):

The model function is what’s called a hook, and the route class has access to a few others. For example, let’s say that once you’ve pulled the data for all of the artists, you want to immediately redirect to the route for the first artist. You would simply add the afterModel hook to your route class, and Ember would run that after fetching the data but before rendering the template.

If you’ve worked with React and React-Router, then imagine having to implement redirect functionality in a React project versus using Ember. Isn’t this refreshing?

Loading

Another quick example of how easy it is to get things done is when you need to implement a loading state. If your model, afterModel, or any other data fetching hooks are slow, you’ll want to show some sort of loading indicator. In Ember, it’s as simple as adding a loading template file in the right place. Ember will see it, and show the loading file while the route is loading:

Come on, that’s so cool!

Ember Data

When you create a new Ember project, you also get this fantastic tool called Ember Data. Ember Data provides all sorts of functionality that makes it a breeze to manage your application’s data. We can do a deeper dive in another article, but as an example, let’s continue working with our artist data.

Ember Data allows us to define and configure our data models, such that CRUD operations are incredibly simple. For example, if we have a models/artist.js file, then we can fetch a list of all artists in the route file like this:

WHAT?!

Behind the scenes, Ember Data fetches data from the artists API and deserializes the data into artist models! Not only that, but it keeps the fetched data in a service called the store. The store is like Redux or MobX, it tracks entities such that we can use data across the application.

Whoa, Hit the Brakes!

Anybody that’s worked with Redux might be hesitant here. Don’t get me wrong, Redux is fantastic and extremely powerful. But ugh, I’m so tired of writing action creators and action names and reducers and middleware and designing how the store is going to be organized and…

Sorry, I just really appreciate having this sort of sane default for the store. Ember Data really makes it that simple. Data management won’t hold you back, you can just start working with it.

Are You In?

I’ve worked with React for over 5 years now, and even though the tooling has come a long way, there’s just so much boilerplate you need to write in order to get the functionality you need. Hopefully this article has you at least a little excited to play with Ember. In researching for these articles, I’m just getting more pumped to use Ember, so I’ve gotta start a new project of my own soon!

Routes and Ember Data are so powerful! Try a small Ember project, and feel free to reach out to me or the community if you have questions. If you’re enjoying the series and want to see a specific article in the future, be sure to let me know in the comments!

This page/product/etc is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc.