Intro to EmberJS

Intro to EmberJSBilly Onjea & Jeff Sturgis

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

What is EmberJS?

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.

Ember is made up of three high-level projects

EmberMVC-like

Ember DataORM-like

Ember CLINode 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

Ember Core Concepts

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

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

Core concepts

From a URL path to rendered HTML

Ember will generate instances of various types automatically, if the files aren’t created:

Ember.RouteEmber.ControllerEmber.Component...

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:poststemplate:postscomponent:blog-post

Then in your app you would look up specific types using this key:

“route:posts”

Ember Inspector

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.

Ember Data

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

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

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.

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?

Ember CLI

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

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

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

Ember in actionLet’s generate an app!

Questions?Thank you! :)