Ember.js

A framework for creating ambitious web applications.

Francesco Novy / @_fnovy

What is Ember.js?

Ember.js is a framework for web applications
It is well suited for complex applications
It is not well suited to implement small parts inside of a greater application

Who uses Ember.js?

Apple
Yahoo
LinkedIn
... and many more

Why use Ember?

Frequent release cycle with strict semantic versioning
Integrated CLI with build-step etc.
Convention over Configuration
Easy to collaborate with designers/other developers
Integrated data layer

Release Cycle

A minor release every 6 weeks
A major release every ~2 years
Minor releases can introduce new features and deprecate old features
It is guaranteed that all features keep working until the next major release!
Updating is a matter of minutes

Ember CLI

Integrated command line interface for Ember
Enables out of the box:

Development server
```
ember serve
```
Build with fingerprinting, minifying etc.
```
ember build
```
Testing with QUnit
```
ember test
```
Generating blueprints
```
ember generate model user
```

Ember CLI - Getting Started

Get Node & NPM
Install Bower
```
npm install bower -g
```
Install Ember-CLI
```
npm install ember-cli -g
```
Create a new app
```
ember new my-app
```

Use the JavaScript from tomorrow, today

ES6 is automatically transpiled with Babel.js
Ember-CLI is based on ES6 modules

Conventions

All Ember-CLI apps are built in the same way.
This makes it very easy to collaborate or to inspect other ember apps!

Handlebars

Easy to use - for programmers and designers!

"HTML+"



  {{myTitle}}



  {{#each myArray as |item|}}
    {{item}}
  {{/each}}


{{#if isActive}}
  This is active!
{{else}}
  This is inactive...
{{/if}}

Code Example


// app/pods/users/controller.js

import Ember from "ember";

export default Ember.Controller.extend({
  users: ["John", "Anna", "Max"]
});


// app/pods/users/template.hbs

All Users
{{#each users as |user|}}
  {{user}}
{{/each}}

Built on Components

Components should be designed to be reusable. Ember want you to use as many components as possible!


All Users
{{#each users as |user|}}
  {{my-user-component userName=user}}
{{/each}}

Example Component


// app/pods/components/my-user-component/component.js

import Ember from "ember";

export default Ember.Component.extend({
  isAdmin: Ember.computed("attrs.userName", function() {
      return this.getAttr("userName") === "John";
    })
});


// app/pods/components/my-user-component/template.hbs


  {{userName}}{{#if isAdmin}} - Admin User{{/if}}

Ember Data

No manual

$.ajax()

calls.


// app/pods/user/model.js

import DS from "ember-data";

export DS.Model.extend({
  name: DS.attr("string"),
  age: DS.attr("number")
});


// app/pods/user/controller.js

var user = this.store.createRecord("user");
user.set("name", "John");
user.save();

Addons

Ember-CLI provides hooks, which makes it possible to have a unified API for addons.

Sass instead of CSS?


							ember install ember-cli-sass

Rename "app.css" into "app.scss"

Autoprefixer?


							ember install ember-cli-autoprefixer

... and many more.

Fake API for development: ember-cli-mirage
moment.js: ember-moment
Authentification: ember-simple-auth
Deployment: ember-cli-deploy
...

Thank you for your attention!

... there is a lot to learn about Ember, and the beginning can seem daunting.

This presentation:
http://mydea.github.io/ember-presentation/