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."

Started way back in 2007 as SproutCore

Always a migration path! 🙀

6 week release cadence

A really, really great community

Can have a big learning curve at first; however, once concepts are understood, the productivity 🚀

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

• What's an addon?
• Ember Observer
• "There's probably an addon for that"
• No backend? No problem. Use ember-cli-mirage

Testing

• (Sleeper advantage)
• Unit, Integration, and Acceptance testing
• Mirage helps a lot with acceptance tests
• Services like Percy.io 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

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

Topics

• 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 https://your-app.com/users

Example

We want to build an app with the following routes:
• https://your-app.com/search
• https://your-app.com/admin
• https://your-app.com/users
• https://your-app.com/user/some-unique-id

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

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: "...an 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

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

							
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 generate controller users
							
						

Paired with a route of the same name

• 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"

Templates can render things differently based on what you pass them

HTML + Handlebars = templates️

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

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

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

Learn a bit more about ours!

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

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

							
ember generate service my-service
							
						

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

Services are singletons - think about state

Examples

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