Building an application with Ember.js in 2015

By Tom Coquereau / @thaume / Blaaast

Sommaire

La vision d'Ember et le tooling

  1. Ember's goal
  2. Stability Without Stagnation
  3. Ember-CLI

Ember's goal

Focus sur les "Ambitious Web Applications"

  • Un framework MVC complet
  • Ne résoud pas seulement le problème "V" de MVC
  • The "Ember-way"
  • Les développeurs sont rapidement à l'aise sur les projets (eg. Discourse)

Stability Without Stagnation

1.13 features

1.13: Moteur de rendu Glimmer

1.13: One way data flow (actions up, data down)

1.13: Routable component

1.13: Les nouveaux "lifecycle hooks" des composants

1.13: Liquid-fire 1.0-beta1

1.13: Fast Boot™

2.0 beta1

12 juin

2.0 features

Undefined is not a function

2.0 features

NaN

2.0 features

-1

WAT ?

Pas de features dans la 2.0 ?

2.0 === 1.13

Stability without stagnation

Deprecations !

  • Ajout de deprecations
  • Suppression des features sur le major bump
  • Donc: 2.0 === 1.13 (- deprecated features)

Comment se préparer à la 2.0 ?

Préparation à la 2.0:

Upgrade sur Ember 1.13 (et fix du code deprecated)

Example: Deprecation of Controllers

Single Responsibility Principle (SRP)

  • Persistance des "states" de l'app
  • Décoration des données pour les templates
  • => "Quand devrais-je utiliser un controller vs un component ?"

The road to "Routable Components"

  • ObjectController deprecated dans la 1.11
  • Controllers (Ember.Controller et Ember.ArrayController) deprecated dans la 1.13
  • Chemin de migration: Controller => Service + Component

Services

Singletons qui peuvent contenir des "states" de l'app

Components

Décoration de la donnée / gestion des actions et des événements pour les templates / routable

Les Controllers seront supprimés dans la 2.0

https://github.com/emberjs/rfcs/pull/38

Computed properties


export default Ember.Component.extend({
  fullName: function() {
    return '' + this.attrs.firstName + this.attrs.lastName;
  }.property()
});

Ember-CLI

The CLI revolution

  • Introduced mid-2014
  • Bootstrap a project in seconds
  • Generate tests alongside routes, components, etc.
  • Addons ecosystem (1000+ addons)

$ ember new blog

Generates a full Ember app

$ ember g route posts

Generates the post's route and template

$ ember g model post title:string body:string

Generates a model 'post' with a title and a body of type string

$ ember generate serializer application

Generates a serializer

$ ember g http-mock post

Generates a 'post' http-mock in the node.js server

Ember addon

http://www.emberaddons.com/

ember install ${addonName}

Questions ?

By Tom Coquereau / @thaume / Blaaast