Getting Started with Ember

Tony Ward (@YnotDraw)

What is Ember?

A free, open source framework for building web apps

"It helps you build your web applications quickly and guides you towards writing scalable, maintainable code."

Jen Weber, Ember Learning Team

Started way back in 2007 as SproutCore

Always a migration path! πŸ™€

6 week release cadence

RFC Process as well (Request for Comments)

A really, really great community

Can have a big learning curve at first; however, once concepts are understood, the productivity πŸš€

(Working on lowering the learning curve!)

Advantages of Ember

Conventions over Configuration

  • 🚫 configuration over conventions 🚫
  • 🚫 Webpack or other bundling/build tools 🚫
  • Similar project structure
  • Router included + URL support - created with routes in mind
  • Result: ⬆️ productivity & onboarding

Addon Ecosystem


  • (Sleeper advantage)
  • Unit, Integration, and Acceptance testing
  • Mirage helps a lot with acceptance tests
  • Services like for visual diffing changes πŸ‘
  • ember-cli
  • "Stability over Stagnation", always an upgrade path, polyfills for new features if you can't upgrade just yet for whatever reason
  • No need for jquery
  • Ember Inspector
  • RFC Process
  • Helpful Slack + Discourse forum
  • Cool EmberConf swag
  • Suit-envy of Tom Dale

Who uses Ember?

Getting Started

Basic Knowledge of...

Installation Pre-reqs

  • Node/NPM (nvm!)
  • HomeBrew package manager
  • yarn (optional, but recommended)
  • Your favorite text editor


npm install -g ember-cli
ember new ember-quickstart

Quick High-Level Concepts

Docs are your friend if you forget


  • Router
  • Ember Data
  • Routes
  • Controllers
  • Templates
  • Components
  • Services
  • Core Concept: Computed Properties


Defines all routes in your application

Does the work for you when a user navigates to


    We want to build an app with the following routes:

Ember Data

"...a library for robustly managing model data in your Ember.js applications."

Ember Data GitHub

Interacts with a Persistence Layer

  • Browser local storage (less likely)
  • Used to make API requests to a server (more likely)
  • Does your API use JSON:API or REST? πŸ‘

Ember Data Concepts

  • server responses ➑️ objects (ORM)
  • Model: "the structure of the data you wish to provide to your application "
  • Adapter: " object that receives requests from a store and translates them into the appropriate action to take against your persistence layer."
  • Serializer: Used to tell what

Ember Inspector - helps you view what's in the store

You don't have to use Ember Data

Route Handlers (Route)

"...responsible for displaying templates, loading data, and setting up application state."

Ember Docs
ember generate route users

When you generate a route, a JavaScript file and Handlebars template are created

The route is automatically added to the router.js file for you

Recommended Usage

  • Leverage the model hook(s) to load data
  • The model hook will return a model to the controller/route template
  • Handle transitioning cases ("are you sure?", removing things from the store, etc.)


"...routable object which receives a single property from the Route – model – which is the return value of the Route's model() method."

Ember Docs
ember generate controller users

Paired with a route of the same name

EX: /routes/users.js + /controllers/users.js
  • Define the model returned from the Route
  • Define computed properties
    • Sort/filter the model client-side
    • Generate a property based on the model
  • Define actions
    • Event handlers for elements


Combination of HTML + Handlebars

Receives properties from a Controller or Component and renders HTML

Think of your Route Template as your "page"

Typically made up of many HTML elements + components

Templates can render things differently based on what you pass them

HTML + Handlebars = templates️


"...used to encapsulate markup and style into reusable content."

Ember Docs

Do you reuse some functionality a lot? May want to move it to a component.

ember generate component colors-card

When you generate a component, a JavaScript file and Handlebars template are created

You pass properties & actions into a component and it renders HTML

Example Components

  • Themed Buttons
  • Reusable text
  • Info Cards

Made up of two files

  • JavaScript file
  • Handlebars template

Using the Component

	{{!-- or... --}}
	{{colors-card colors=(array 'white' 'blue')}}

Learn a bit more about ours!

Computed Properties

A property created that is dependent on one or many other properties

They get re-evaluated when the keys change

Lazily-loaded, so only compute when you ask about them or if something changes

Use Cases

  • Viewing multiple properties and generating some result property
  • Filtering/Sorting a collection
  • Bool,Sum,Or,And,Equal,etc.(Computed Macros in Docs)
  • Generating a class name for a component based on a property


" Ember object that lives for the duration of the application, and can be made available in different parts of your application."

Ember Docs
ember generate service my-service

Services can be injected into all of the other objects we already discussed

Services are singletons - think about state


  • Translation service
  • Auth service
  • Logging service
  • 3rd-party service

Information overload complete

Go-To Addons

Resources + Things to Dive Into