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
Ember
By Guirec Corbel
Ember
- 1,126