CODEX
I ❤ Ember.js — Up and Running
Start a new project and learn about the 3 main file types in Ember!
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!
Note: To follow along with the coding in this article, you’ll need to use your operating system’s terminal. If you’re not familiar with how to use a terminal, some of this might be confusing.
Welcome back to I ❤ Ember.js, I hope you’re excited to start playing with Ember! If you’ve already read the previous Introduction article, you’ll remember that part of why I love Ember is that you can get right to work. In this article, I’ll show you how easy it is to start a new project. Then we’ll explore how to build features in Ember using the three core file types: Routes, Templates, and Controllers.
Setup
To get going, we of course need to install a couple of things. If you’re a Javascript dev, you probably already have npm installed. If not, head on over to https://www.npmjs.com/ and install it.
Next, let’s install ember-cli using the terminal:
npm install -g ember-cli
A New Project
Okay, get ready. Are you ready? The thing we just installed is ember-cli, and it’s yet another wonderful thing the Ember devs give to us. Using ember-cli commands, we can create new projects, run tests, and even install Ember addons, which are like supercharged npm modules made especially for Ember projects.
So let’s make a new project. Ember-cli commands all start with ember. Navigate to where you want the new project folder to be created, and run
ember new i-love-ember
Where i-love-ember can be whatever name you want for your new project. If you check out the terminal output, you can see that ember-cli is creating a folder for your project, installing npm packages you’ll need for development, and is even setting up a test framework!
Side Note: Testing is a first-class citizen in Ember. It might not sound that impressive, but part of the reason I love writing tests is because of how easy it is to do in Ember. It feels SO good when you write code that you can be confident in.
Hello World!
Before we take a look at our new project’s files, navigate into your project folder, and run this command:
ember serve
Then open your browser and go to localhost:4200
That’s your app! As long as the ember serve command is running, you can make changes to your code and the app will automatically refresh with your changes. It just works!
The Ember Mental Model
When thinking about how to develop a website with Ember, you just have to remember: It’s all about the URL! The connection between the URL and what you see on a website is pretty intuitive. For example, when you navigate to a site’s “Contact” section, usually the URL will end in /contact. When you’re searching for dog photos on Google, you’ll notice the URL ends in /search?q=dog+photos. In modern web development, the URL is a reflection of a website’s state and the user’s actions.
So for our own Ember project, we need to think about the different features of the application and map them to URL segments, or routes. If we’ll have a “User Directory” page, then we’ll have a /users route. And we can even have routes within routes! For example, if we can go from the User Directory to information about a single user, then we might have a /users/user-1 route.
This intuition about how to structure your app will come with practice. It’s even quite likely that your routes will shift and change as your app evolves. For now, the key takeaway is that Ember uses the URL to figure out how to run an application.
Three Main File Types
The majority of an Ember application is powered by three kinds of files: Routes, Templates, and Controllers. Each file type has its own responsibilities, which is really great because:
- Separating concerns across clear-cut boundaries makes it easy to track down bugs.
- Files tend to be shorter and easier to digest.
- When you need to accomplish something, you can go right to the file you need to edit.
Routes
Route files are mostly responsible for data fetching and are written in Javascript. When a user navigates to a route in your app, the first thing that happens is the associated Route file is run. So for example, if a user goes to your /users page, the users Route file might be responsible for fetching all the user information you need.
We’ll do some deep dives into Routes in the future, but here’s something cool: if a Route file returns a Promise for fetching data, Ember will actually wait for the data before rendering the page (or show a “loading" state) right out of the box!
Templates
A Template file is where you write the visual content for your app. You could just enter straight HTML, but Templates are written in Handlebars (.hbs) which means you can insert properties from your Javascript files using squiggly brackets {}.
<div>
<p>My name is {{user.name}}.</p>
</div>Handlebars allow you to do some logic, like looping over arrays and using if-else blocks, but their capabilities are limited by design. Templates have their own files so that you can focus on your app’s visual content without getting too hung up on feature code.
Controllers
The final piece of the puzzle is the Controller file. A Controller is written in Javascript and is essentially the “brains” for your Template file. Any properties or functions defined in a Controller are available for use in its corresponding Template. The data fetched by a Route is injected into its corresponding Controller so that the data can also be made available to its Template.
You’ll probably be doing most of your feature work in Controllers. Especially exciting is the concept of computed properties, but we’ll cover those in a later article!
Feel Free to Explore
That was a lot to go over, but hopefully, now you’ve got a better sense of how Ember devs build applications. Users visit a route in your application, where the Route file fetches any needed data. That data is injected into a Controller file which is where you code most of your feature logic. Finally, the Template file is rendered, with access to Controller properties and functions so the user can interact with the site.
But we’ve only just scratched the surface of what makes Ember awesome. I highly recommend the resources over at https://guides.emberjs.com/. The Ember Learning Team is very talented at explaining these concepts so definitely take a look for more information on all of these topics. Thanks for reading, and be sure to leave a comment if you enjoyed the article!
This page/product/etc is unaffiliated with the Ember project. Ember is a trademark of Tilde Inc.
