Qu'est ce que c'est?

C'est fait par qui?

• Ruby On Rails
• jQuery
• Rust
• ...

Créé en 2011 par Yehuda Katz

C'est fait par qui?

C'est utilisé par qui?

Demo

https://rarwe-demo.pagefrontapp.com

Demo

<!-- app/templates/bands.hbs -->

<div class="col-md-4">
  <div class="list-group">
    <div class="list-group-item">

      {{input type="text" class="new-band" placeholder="New band" 
        value=newName insert-newline="createBand" }}

      <button class="btn btn-primary btn-sm new-band-button" 
        {{action "createBand"}}
        disabled={{disabled}}>Add</button>

    </div>

    {{#each model as |band|}}
      {{#link-to "bands.band.songs" band class="list-group-item band-link"}}
        {{band.name}}
        <span class="pointer glyphicon glyphicon-chevron-right"></span>
      {{/link-to}}
    {{/each}}

  </div>
</div>

Demo

// app/routes/bands.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('band');
  },

  afterModel() {
    Ember.$(document).attr('title', 'Bands - Rock & Roll');
  },

  actions: {
    createBand() {
      let route = this, controller = this.get('controller');

      let band = this.store.createRecord('band', {
        name: controller.get('newName')
      });
      band.save().then(function() {
        controller.set('newName', '');
        route.transitionTo('bands.band.songs', band);
      });
    }
  }
});

Demo

// app/models/band.js

import DS from 'ember-data';

export default DS.Model.extend({
  name:         DS.attr('string'),
  songs:        DS.hasMany('song'),
});

// app/router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('bands', function() {
    this.route('band', { path: ':id' }, function() {
      this.route('songs');
    });
  });
});

export default Router;

Pourquoi Changer?

Pourquoi Changer?

Donner un produit de meilleure qualité

• Éviter le temps de chargement
• Permettre plus de souplesse en JavaScript

Pourquoi Changer?

Faire du meilleur JavaScript

• Meilleure architecture
• Meilleurs tests
• Plus d'amour

Pourquoi Changer?

Mieux utiliser Rails

• Rails se concentre sur la logique et la persistance
• Plus de vues
• Charge sur le serveur moins lourde
• Plus de tests d'intégration avec Capybara-Webit/Poltergeist

Pourquoi Changer?

Séparation Front/Back

Backbone

vs

Angular

vs

Ember

vs

React

Angular vs Ember

Angular vs Ember

Apprenez Angular de toute façon

Ember et Rails

class Article < ActiveRecord::Base
  has_many :comments
  belongs_to :author
end

class ArctileSerializer < ActiveModel::Serializer
  attributes :title
  belongs_to :author
end

Active Model Serializer

Ember et Rails

• JSONApi
• Rest
• JSON
• ActiveModel

Ember et Rails

ActiveModelSerializers.config.adapter = :json_api

ActiveModelSerializers::SerializableResource.new(article).as_json

ActiveModelSerializers::Deserialization.jsonapi_parse(params)

Ember et Rails

Une force d'Ember

Points Faibles d'Ember

Points Faibles d'Ember

Points Faibles d'Ember

C'est pas du Ruby!

Trucs que j'aime avec Ember

Code Source

Doc bien faite

Stabilité sans stagnation

Pionier du web

Trucs que j'aime avec Ember

Truc que j'aimais pas avant et en fait c'est bien