Tweet
Tweet

Slide 1

Slide 1 text

Ember.js an opinionated, full-featured javascript MVC framework Atlanta Javascript Meetup July 15th, 2013 Monday, July 15, 13

Slide 2

Slide 2 text

Jason Ardell https://github.com/ardell Introductions Monday, July 15, 13

Slide 3

Slide 3 text

Backbone.js AngularJS Ember.js and many more... Javascript MV* Frameworks Monday, July 15, 13

Slide 4

Slide 4 text

• Recognizable/intuitive project structure • 2-way data binding • Routing (URLs) • Templating (Handlebars, Mustache, jQuery Templates, etc) Javascript MV* Frameworks Monday, July 15, 13

Slide 5

Slide 5 text

Libraries Frameworks + Monday, July 15, 13

Slide 6

Slide 6 text

http://todomvc.com Monday, July 15, 13

Slide 7

Slide 7 text

• Instructional & portable • Only views & controllers • Data store is local, non-flaky, & dumb (i.e. unrealistic) Monday, July 15, 13

Slide 8

Slide 8 text

Server-side vs Client-side Monday, July 15, 13

Slide 9

Slide 9 text

• 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

Slide 10

Slide 10 text

• 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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Application Architecture db model controller view Monday, July 15, 13

Slide 16

Slide 16 text

Application Architecture db model controller view model controller view Client Server Monday, July 15, 13

Slide 17

Slide 17 text

Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Rails Monday, July 15, 13

Slide 18

Slide 18 text

Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Rails JS Monday, July 15, 13

Slide 19

Slide 19 text

Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.live Rails JS Monday, July 15, 13

Slide 20

Slide 20 text

Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.live $.ajax Rails JS Monday, July 15, 13

Slide 21

Slide 21 text

Application Architecture Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB $.live $.ajax Restful API Rails JS Monday, July 15, 13

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Rails JS MV* Application Architecture Monday, July 15, 13

Slide 29

Slide 29 text

Views Controllers ORM Data Store ERB HAML Slim ActionController ActiveRecord Postgres MongoDB Backbone.js AngularJS Rails JS MV* Application Architecture Monday, July 15, 13

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

    {{#each books}}
  • {{title}}
    • {{else}}
  • No results.
    • {{/each}}
Declarative Templates Monday, July 15, 13

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

{ 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

• 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

Slide 41

Slide 41 text

• 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

Slide 42

Slide 42 text

Let’s look at some code... Monday, July 15, 13

Slide 43

Slide 43 text

application.handlebars posts.handlebars post.handlebars Monday, July 15, 13

Slide 44

Slide 44 text

1. Peepcode Screencast “Fire up Ember” ($12) https://peepcode.com/products/emberjs ActiveModel::Serializers How to learn Ember.js Monday, July 15, 13

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

• 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

Slide 49

Slide 49 text

Jason Ardell https://github.com/ardell [email protected] ActiveModel::Serializers Questions? https://speakerdeck.com/ardell/ember-dot-js https://github.com/ardell/atljs Monday, July 15, 13

Slide 50

Slide 50 text

• 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

Slide 51

Slide 51 text

• Compiles coffeescript & handlebars • Combines/minifies javascript ActiveModel::Serializers Rails Asset Pipeline Monday, July 15, 13

Slide 52

Slide 52 text

• 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

Slide 53

Slide 53 text

Makes your API consistent & intuitive ActiveModel::Serializers ActiveModel::Serializers https://github.com/rails-api/active_model_serializers Monday, July 15, 13