Ember

806 views

Published on

http://lanyrd.com/2013/rubyslava-april/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
806
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ember

  1. 1. EmberDušan KoutnýLukáš Lazarčík
  2. 2. Ember● All-Inclusive MVC framework for creating ambitious webapplications● Great for RoR developers● Convention over configuration● WOW moments● Started from Sproutcore 2
  3. 3. Team behind Ember● Yehuda Katz (also member of Ruby on Rails and jQuerycore team)● Tom Dale (Apple, SproutCore)● + 6 more core members● Used by:Square, Tilde, Groupon, Yapp, Livingsocial, Zendesk, Addepar...
  4. 4. Advantages I● Handlebars (templates that update automatically, less code)● AssociationsApp.Project = DS.Model.extend({user: DS.belongsTo(App.User)});● Router (similar to RoR)App.Router.map(function() {this.resource(projects,function(){this.route(new );this.resource(project, { path: /:project_id });});});App.User = DS.Model.extend({projects: DS.hasMany(App.Project)});
  5. 5. Advantages II● Computed propertiesremaining: function() {var todos = this.get(todos);return todos.filterProperty(isDone, false).get(length);}.property(todos.@each.isDone)● Bindings - keeps everything updated● Convention over configuration(saves you a lot of time)
  6. 6. Disadvantages● Current version - 1.0.0-RC.2● Lack of documentation & Confusing tutorials● Get ready for hours on stackoverflow.com● Convention over configuration(too much magicsometimes....)● Ember Data( not a dependency, Ember.js. Discourse, for example, uses its own,simple wrapper around $.ajax)– not working as expected, not stable– not production ready!http://eviltrout.com/2013/03/23/ember-without-data.html)
  7. 7. Data flowhttps://speakerdeck.com/lukemelia/introduction-to-ember-dot-js
  8. 8. Sample App I:App = Ember.Application.create();App.Person = Ember.Object.extend({firstName: null,lastName: null,fullName: function() {return this.get(firstName) +" " + this.get(lastName);}.property(firstName, lastName)});App.IndexRoute = Ember.Route.extend({model: function() {var people = [App.Person.create({firstName: "Yehuda",lastName: "Katz"})];return people;}});
  9. 9. Sample App II:<script type="text/x-handlebars">{{outlet}}</script><script type="text/x-handlebars" id="index"><h1>People</h1><ul>{{#each model}}<li>Hello, <b>{{fullName}}</b>!</li>{{/each}}</ul></script>
  10. 10. Thank youResources:– emberwatch.com– emberjs.com/guides/– discuss.emberjs.com & discourse.org– peepcode.com/products/emberjs– stackoverflow.com :)

×