A really high level introduction to EmberJS for those not familiar with the framework. Presented at LinkedIn by Billy Onjea & Jeff Sturgis.

1. Intro to EmberJS
Billy Onjea & Jeff Sturgis

2. Roadmap
1. What is EmberJS? - 5min
2. Ember core concepts - 15min
3. Ember Data - 10min
4. Ember CLI - 5min
5. Ember in action & Questions - 25min

3. What is EmberJS?

4. A JavaScript framework for Single Page Applications
Loosely based on model-view-controller - MVC
Convention over configuration, one way to do things => The Ember Way
It’s like an SDK for the web, made up of various packages and tooling
> Single Page Apps are distinguished by their ability to redraw
specific parts of the UI without requiring a browser refresh.

5. Ember is made up of three high-level projects
Ember
MVC-like
Ember Data
ORM-like
Ember CLI
Node tool
Top level framework
namespace and all core
objects exist here
● Ember
● Ember.Object
● Ember.Application
● Ember.Router
● Ember.Route
● Ember.Component
Everything data related is under
the DS namespace. It’s like an
ORM for JavaScript
● DS
● DS.Model
● DS.Store
● DS.Adapter
● DS.JSONAPISerializer
● DS.JSONSerializer
Ember’s command line utility
provides us with project
automation
● Provides generators
● Builds assets in dist/
● Minifies JS and CSS
● Transpiles & compiles
● Supports addon system

6. Ember Core Concepts

7. Core concepts
Project structure
File/Folder Purpose
app/
This is where your app’s models, routes, controllers,
components, templates, styles, and others are stored.
bower_components/ &
bower.json
Bower is a dependency management tool. Used in
Ember CLI to manage front-end plugins.
config/
The config directory contains the environment.js where
you can configure settings for your app.
dist/
When we build our app for deployment, the output files
will be created here.
node_modules/ &
package.json
This directory and file are from NPM. NPM is the
package manager for NodeJS. Ember is packaged as
various node modules and depends on other modules.
public/ Contains assets such as images and fonts
tests/ Automated tests for our app go here
vendor/ This is where front-end dependencies go (JS and/or
CSS) that are not managed by Bower.
ember-cli-build.js This file describes how Ember CLI should build our app

8. Core concepts
Your app’s directory
File/Folder Purpose
app/app.js Entry point - the first module executed
app/router.js Routes here map to app/routes/
app/routes/*.js Route handlers - respond to URL changes (singletons)
app/models/*.js Models - defines entity attrs and relations
app/components/*.js Component views
app/templates/*.hbs HTML/Handlebar templates
app/controllers/*.js Controllers (singletons)
app/styles/*.scss Contains your SASS styles
app/adapters/*.js Determine how data is persisted to backend API
app/serializers/*.js Format data before sent or received from API
app/**/* Other directories like helpers/, services/, initializers/ ...

9. Core concepts
From a URL path to rendered
HTML
Ember will generate instances of
various types automatically, if the
files aren’t created:
Ember.Route
Ember.Controller
Ember.Component
...

10. Core concepts
Ember container
Every Ember application has a
container. It’s a collection of an app’s
long-lived objects, organized by a
standardized key:
route:posts
template:posts
component:blog-post
Then in your app you would look up
specific types using this key:
“route:posts”
Ember Inspector

11. Core concepts
Ember resolver
The DefaultResolver defines the
default lookup rules to resolve
container lookups: templates are
looked up on Ember.TEMPLATES other
names are looked up on the
application after converting the name.
For example, ”controller:post” looks
up App.PostController by default.
Note: Ember-CLI based apps use a
resolver that is es6 module aware.

12. Ember Data

13. A library that integrates tightly with Ember
Easy interface to CRUD models from/to your server as JSON
Included by default when you create a new Ember app
Can be configured to work with any backend via its adapter pattern
Provides a single store as the central cache for models in your app

14. Ember Data
Ajax request
The first time your application
asks the store for the record, a
server round trip is made.
Caching
On subsequent requests, the
promise resolves with the
record immediately! The store
has cached the record - no
server round trip.
2
1

15. Ember Data
Models
Ember models are classes that define
the attributes, relationships, and behavior
of your data.
Records
A record is an instance of a model that
contains data loaded from the server.

16. Ember Data
Adapter
An adapter is an object that translates
requests from Ember, such as "find the
user with an id of 1", into requests to a
server.
For example, if your app asks for a
Person with an id of 1, how should
Ember load it?
Over HTTP or a WebSocket?
If HTTP, is the URL /person/1 or
/resources/people/1?

17. Ember CLI

18. A CLI for Ember apps - aliased as ember
Built with Node and heavily depends on the Broccoli build tool
Uses Babel to transpile and convert ES6 modules to AMD modules
Compiles SASS, LESS, handlebar templates, concatenates, minifies, etc.
Provides generators, addon system, deployment utils, dev/test server, etc.
More info at ember-cli.com

19. Ember CLI
Available commands
Command Purpose
ember Prints out a list of available commands
ember new <app-name> Creates app directory and generates app’s structure
ember build Builds the application into the dist/ directory
ember server Starts a web server at http://localhost:4200
ember g model <model-
name>
Generates model files
app/models/model-name.js
tests/unit/models/model-name-test.js
ember g component
<component-name>
Generates component files
app/components/component-name.js
app/templates/components/component-name.js
tests/integration/components/component-name-test.js
ember g route
<feed>
Generates route files
app/routes/feed.js
app/templates/feed.hbs
Updates app/router.js
tests/unit/routes/feed-test.js
... a lot more commands...

20. Ember CLI
ember-cli-build.js
This is our app’s build configuration file.
Here we can specify if we want to use
SASS or LESS, import additional files,
and more.
In this example first we installed the
SASS ember addon with:
> ember install ember-cli-sass
Compiles into: dist/assets/app.css

21. Ember in action
Let’s generate an app!

22. Questions?
Thank you! :)