Guirec Corbel

guirec@optik360.com

Merci pour le live streaming

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 Ember
Simple
Adaptable
Facilement intégrable
Plus populaire
Rapide à développer
Meilleure structure
Performance
 

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

Apprendre Ember

Suivez le guide

Livres : 

  • Deliver Audacious Web Apps with Ember 2
  • Rock and Roll with Ember
  • Ember 101

Documentation

Code source

Demandez moi!

Questions

guirec@optik360.com