Ember.js

An opinionated, full-featured javascript MVC framework.

Given by Jason Ardell at the Atlanta Javascript Meetup on July 15th, 2013.

Transcript

1. Ember.js an opinionated, full-featured javascript MVC framework Atlanta Javascript Meetup July 15th, 2013 Monday, July 15, 13
2. Jason Ardell https://github.com/ardell Introductions Monday, July 15, 13
3. Backbone.js AngularJS Ember.js and many more... Javascript MV* Frameworks Monday, July 15, 13
4. • Recognizable/intuitive project structure • 2-way data binding • Routing (URLs) • Templating (Handlebars, Mustache, jQuery Templates, etc) Javascript MV* Frameworks Monday, July 15, 13
5. Libraries Frameworks + Monday, July 15, 13
6. http://todomvc.com Monday, July 15, 13
7. • Instructional & portable • Only views & controllers • Data store is local, non-flaky, & dumb (i.e. unrealistic) Monday, July 15, 13
8. Server-side vs Client-side Monday, July 15, 13
9. • request/response nature of server side vs persistence • garbage collection of event handlers, views, etc (big one!) • error handling (404s vs custom) Server-side vs Client-side Monday, July 15, 13
10. • Routing • ORM / Persistence • Event Binding • View/Template Composition (nesting) • Garbage Collection • Dependency Management / Cache-Busting You don’t know what you don’t know Monday, July 15, 13
11. If you come from the server side... You’ll appreciate: • logic-less templates • router (urls) • Ember-data (like ActiveRecord) • Separation of data store from presentation (services!) Monday, July 15, 13
12. If you come from the server side... You’ll appreciate: • logic-less templates • router (urls) • Ember-data (like ActiveRecord) • Separation of data store from presentation (services!) You’ll be confused by: • Event-driven architecture (inversion of control, subscription) • Responsibility of routers • ObjectController vs ArrayController • Asynchronicity/promises Monday, July 15, 13
13. If you come from the client side... You’ll appreciate: • Key-value coding / bindings • Declarative templates • Outlets & master/detail views • Ember-data (like Core Data) • ObjectController and ArrayController Monday, July 15, 13
14. If you come from the client side... You’ll appreciate: • Key-value coding / bindings • Declarative templates • Outlets & master/detail views • Ember-data (like Core Data) • ObjectController and ArrayController You’ll be confused by: • The purpose/role of the router & URLs • Html/css for templating and layout Monday, July 15, 13
15. Application Architecture db model controller view Monday, July 15, 13
16. Application Architecture db model controller view model controller view Client Server Monday, July 15, 13
17. Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Rails Monday, July 15, 13
18. Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Rails JS Monday, July 15, 13
19. Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.live Rails JS Monday, July 15, 13
20. Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.live $.ajax Rails JS Monday, July 15, 13
21. Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.live $.ajax Restful API Rails JS Monday, July 15, 13
22. Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.html $.live $.ajax Restful API Rails JS Monday, July 15, 13
23. Application Architecture Not testable Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.html $.live $.ajax Restful API Rails JS Monday, July 15, 13
24. Application Architecture Not testable Spaghetti Code Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.html $.live $.ajax Restful API Rails JS Monday, July 15, 13
25. Application Architecture Not testable Spaghetti Code Callback Hell Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.html $.live $.ajax Restful API Rails JS Monday, July 15, 13
26. Application Architecture Not testable Spaghetti Code Callback Hell Non-DRY Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.html $.live $.ajax Restful API Rails JS Monday, July 15, 13
27. Not testable Spaghetti Code Callback Hell Non-DRY Code Smells Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.html $.live $.ajax Restful API Rails JS Application Architecture Monday, July 15, 13
28. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Rails JS MV* Application Architecture Monday, July 15, 13
29. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Backbone.js AngularJS Rails JS MV* Application Architecture Monday, July 15, 13
30. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Backbone.js AngularJS Backbone.Sync Angular.HTTP Angular.Resource Rails JS MV* Application Architecture Monday, July 15, 13
31. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Backbone.js AngularJS Backbone.Sync Angular.HTTP Angular.Resource Restful API Rails JS MV* Application Architecture Monday, July 15, 13
32. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Handlebars Backbone.js AngularJS Backbone.Sync Angular.HTTP Angular.Resource Restful API Rails JS MV* Application Architecture Monday, July 15, 13
33. <ul> {{#each books}} <li>{{title}}</li> {{else}} <li class="empty">No results.</li> {{/each}} </ul> Declarative Templates Monday, July 15, 13
34. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Handlebars Backbone.js AngularJS Backbone.Sync Angular.HTTP Angular.Resource Restful API Rails JS MV* Application Architecture Monday, July 15, 13
35. Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Handlebars Ember.js Ember Data Restful API Rails Ember Application Architecture Monday, July 15, 13
36. ActiveModel::Serializers def show @post = Post.find(params[:id]) respond_to do |format| format.html format.json { render json: @post } end end posts_controller.rb class PostSerializer < ActiveModel::Serializer attributes :id, :title, :text has_many :comments, :embed => :ids, :include => true has_many :tags, :embed => :ids, :include => true end post_serializer.rb ActiveModel::Serializers Monday, July 15, 13
37. { posts: [{ id: 1, title: "Sample Blog Post", body: "Hello world!", comment_ids: [ 1 ], tag_ids: [ 1, 2 ] }], comments: [ { id: 1, body: "Test comment" } ], tags: [ { id: 1, name: 'Ponies' }, { id: 2, name: 'Unicorns' } ] } GET /posts/1.json ActiveModel::Serializers ActiveModel::Serializers Monday, July 15, 13
38. Ember Awesomeness class Post < ActiveRecord::Base belongs_to :author has_many :comments has_many :tags attr_accessible :title, :text end Declare your models similarly to ActiveRecord post.rb @App.Post = DS.Model.extend author: DS.belongsTo('App.Author') comments: DS.hasMany('App.Comment') tags: DS.hasMany('App.Tag') title: DS.attr('string') text: DS.attr('string') post.coffee Monday, July 15, 13
39. Ember Awesomeness Embedded records save HTTP requests (great for mobile btw!) @App.Post = DS.Model.extend author: DS.belongsTo('App.Author') comments: DS.hasMany('App.Comment') tags: DS.hasMany('App.Tag') title: DS.attr('string') text: DS.attr('string') post.coffee Monday, July 15, 13
40. • Adds Ember generators, see especially: • rails generate ember:install • rails generate ember:bootstrap • Allows you to separate out handlebars templates https://github.com/emberjs/ember-rails ActiveModel::Serializers Ember-Rails Gem Monday, July 15, 13
41. • Convention over configuration • Yehuda and team (Rails & jQuery) • No need to learn a new mental model • Unified stack • Designed to work out-of-the-box with ActiveModel::Serializers Ember Awesomeness Monday, July 15, 13
42. Let’s look at some code... Monday, July 15, 13
43. application.handlebars posts.handlebars post.handlebars Monday, July 15, 13
44. 1. Peepcode Screencast “Fire up Ember” ($12) https://peepcode.com/products/emberjs ActiveModel::Serializers How to learn Ember.js Monday, July 15, 13
45. 1. Peepcode Screencast “Fire up Ember” ($12) https://peepcode.com/products/emberjs 2. Railscasts (parts 1 & 2, $9/mo) http://railscasts.com/episodes/408-ember-part-1 http://railscasts.com/episodes/410-ember-part-2 How to learn Ember.js Monday, July 15, 13
46. 1. Peepcode Screencast “Fire up Ember” ($12) https://peepcode.com/products/emberjs 2. Railscasts (parts 1 & 2, $9/mo) http://railscasts.com/episodes/408-ember-part-1 http://railscasts.com/episodes/410-ember-part-2 ActiveModel::Serializers How to learn Ember.js Pay to learn unless your time is worthless! Monday, July 15, 13
47. 1. Peepcode Screencast “Fire up Ember” ($12) https://peepcode.com/products/emberjs 2. Railscasts (parts 1 & 2, $9/mo) http://railscasts.com/episodes/408-ember-part-1 http://railscasts.com/episodes/410-ember-part-2 3. Ember guides, api docs, stack overflow Pay to learn unless your time is worthless! ActiveModel::Serializers How to learn Ember.js Monday, July 15, 13
48. • Considering working with Ember? let’s have a beer; I’d love to hear what you’re up to • Need help on a project? we build web apps using Rails and JS MV* frameworks ActiveModel::Serializers Shout-outs Monday, July 15, 13
49. Jason Ardell https://github.com/ardell jason@agileengineeringllc.com ActiveModel::Serializers Questions? https://speakerdeck.com/ardell/ember-dot-js https://github.com/ardell/atljs Monday, July 15, 13
50. • EmberJS.com, esp: http://emberjs.com/guides/ http://emberjs.com/api/ • Ember Discourse http://discuss.emberjs.com/ • StackOverflow: http://stackoverflow.com/questions/tagged/ember.js http://stackoverflow.com/questions/tagged/ember-data • Video Lists http://lanyrd.com/2013/ember-camp/ http://matchingnotes.com/ember-array-proxy • Ember.js Google Chrome Extension https://github.com/rapheld/ember_inspector ActiveModel::Serializers Additional Resources Monday, July 15, 13
51. • Compiles coffeescript & handlebars • Combines/minifies javascript ActiveModel::Serializers Rails Asset Pipeline Monday, July 15, 13
52. • Konacha / Mocha / Chai uses Rails Asset Pipeline (nice if you’re writing Coffeescript) • Karma (Testacular) uses conf to load dependencies, multi-browser! • Both can be run via CLI (including continuous integration) ActiveModel::Serializers Testing Monday, July 15, 13
53. Makes your API consistent & intuitive ActiveModel::Serializers ActiveModel::Serializers https://github.com/rails-api/active_model_serializers Monday, July 15, 13