Ember VS Backbone
• Structure overview
• Stand alone JS app
• Using with RoR
Backbone came out in June 2010
Many popular applications use the Backbone framework, including Twitter, Foursquare, and LinkedIn Mobile. Also worth noting is that a number of music apps were built with Backbone, including Soundcloud, Pitchfork, and Pandora.
Backbone weight just 6.4K.
Logic is outside of the DOM
Structure logic
Developed for work with REST API’s
Almost MVC - Model, View, Route + Collection
Philosophy
Model
Can be created, validated, destroyed, and saved to the server
!
model.get('attr') model.set('attr', val) model.validate(attributes, options)
There is no two-way data binding between your Backbone Views and Models
But it can be added by using next solutions:
http://rivetsjs.com/
http://nytimes.github.io/backbone.stickit/
Bindings
View
The main idea is to organize your code and give you an opportunity to use different callbacks and events triggers.
elAll views have a DOM element at all times (the el property), whether they've already been inserted into the page or not.
!!template: JST[‚tutorials/new_tutor'] !var BodyView = Backbone.View.extend({ el: 'body' }); !@$el.html(@template)
Events
events: 'keyup #tutor-input': 'updatePreview' 'click .submit-tutorial': 'submitTutor' ! 'click #bold': 'boldStyler'
Collections
Is a sortable collection of models, which can filter, manage and control them.
Accessing models:
collection.models collection.at collection.get
collection.add([{key: val}, {key: val}]) collection.remove collection.set collection.get(id) colleaction.at(index) collection.push(model, [options]) collection.pop(model, [options]) collection.pluck(“attr”) collection.where({job: ‘Some’}) !collection.fetch !Underscore methods: find, contains, sortBy, groupBy, toArray, size, first, last, indexOf, isEmpty
RoutesHash navigation - localhost#search/users/2
!
class Tutors.Routers.Tutorials.New extends Backbone.Router routes: '.*': 'addTutor' 'addTutor': 'addTutor'
navigate router.navigate(fragment, [options]) !!!!Execute method is called internally within the router: var Router = Backbone.Router.extend({ execute: function(callback, args) { args.push(parseQueryString(args.pop())); if (callback) callback.apply(this, args); } });
History serves as a global router to handle hashchange events, match the appropriate route, and trigger callbacks. You shouldn't ever have to create one of these yourself since Backbone.history already contains one.
Just call it like this - Backbone.history.start
Backbone.history
Events
Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.
book.on({ "change:title": titleView.update, "change:author": authorPane.update, "destroy": bookView.remove }); !// Removes just the `onChange` callback. object.off("change", onChange); !view.listenTo(model, 'change', view.render); !
!
Catalog of Events
• "add" (model, collection, options) — when a model is added to a collection.
• "remove" (model, collection, options) — when a model is removed from a collection.
• "reset" (collection, options) — when the collection's entire contents have been replaced.
• "sort" (collection, options) — when the collection has been re-sorted.
• "change" (model, options) — when a model's attributes have changed.
• "change:[attribute]" (model, value, options) — when a specific attribute has been updated.
• "destroy" (model, collection, options) — when a model is destroyed.
• "request" (model_or_collection, xhr, options) — when a model or collection has started a request to the server.
• "sync" (model_or_collection, resp, options) — when a model or collection has been successfully synced with the server.
• "error" (model_or_collection, resp, options) — when model's or collection's request to remote server has failed.
• "invalid" (model, error, options) — when a model's validation fails on the client.
• "route:[name]" (params) — Fired by the router when a specific route is matched.
• "route" (route, params) — Fired by the router when any route has been matched.
• "route" (router, route, params) — Fired by history when any route has been matched.
• "all" — this special event fires for any triggered event, passing the event name as the first
Benefits1) Standatized architecture of application, which will be very friendly for rails developers
2) Easy scallable and refactoring
3) A lot of methods for working with events, callbacks, models and collections
With Backbone, you have some given assertions:
Data lies in JavaScript objects, not the DOM
Event handling lies in JavaScript objects, not jQuery event bindings
The way you save data in a backend server is done through the objects that contain the data
http://backbonejs.org/
Initially released in 2011, Ember just hit version 1.0 last year.
LivingSocial, Groupon, Zendesk, Discourse, and Square are some of the most well-known applications that have adopted Ember. Ember creators Tom Dale and Yehuda Katz say it’s easy to see when a site is using Ember because of its loading speed.
69K minified and zipped
The first step to creating an Ember.js application is to make an instance of Ember.Application and assign it to a global variable.
!
window.App = Ember.Application.create(); !
INITIALIZING AN APPLICATION
CORE CONCEPTS
• TEMPLATES
• ROUTER
• COMPONENTS
• MODELS
• CONTROLLERS
• VIEWS
When your application boots, Ember will look for these objects:!!!
App.ApplicationRoute!App.ApplicationModel!
App.ApplicationController!the application template!
A template, written in the Handlebars templating language, describes the user interface of your application. Each template is backed by a model, and the template automatically updates itself if the model changes.
In addition to plain HTML, templates can contain:
• Expressions, like {{firstName}}, which take information from the template's model and put it into HTML.
• Outlets, which are placeholders for other templates. As users move around your app, different templates can be plugged into the outlet by the router. You can put outlets into your template using the {{outlet}} helper.
• Components, custom HTML elements that you can use to clean up repetitive templates or create reusable controls.
Templates
Router
The router translates a URL into a series of nested templates, each backed by a model. As the templates or models being shown to the user change, Ember automatically keeps the URL in the browser's address bar up-to-date.
A route is an object that tells the template which model it should display.
Each of your routes will have a controller, and a template with the same name as the route.
App.Router.map(function() { this.route("about", { path: "/about" }); this.route("favorites", { path: "/favs" }); }); !
Now, when the user visits /about, Ember.js will render the about template. Visiting /favs will render the favorites template.
{{#link-to 'index'}}<img class="logo">{{/link-to}} !<nav> {{#link-to 'about'}}About{{/link-to}} {{#link-to 'favorites'}}Favorites{{/link-to}} </nav>
COMPONENTS
A component is a custom HTML tag whose behavior you implement using JavaScript and whose appearance you describe using Handlebars templates.
They allow you to create reusable controls that can simplify your application's templates.
<script type="text/x-handlebars" id="components/blog-post"> <h1>Blog Post</h1> <p>Lorem ipsum dolor sit amet.</p> </script> !<h1>My Blog</h1> {{#each}} {{blog-post}} {{/each}}
<script type="text/x-handlebars" id="components/blog-post"> <h1>Component: {{title}}</h1> <p>Lorem ipsum dolor sit amet.</p> </script> !!App.IndexRoute = Ember.Route.extend({ model: function() { return { title: "Rails is awesome!" }; } }); !!{{blog-post title=title}}
Passing an arguments
MODELS
A model is an object that stores persistent state. Templates are responsible for displaying the model to the user by turning it into HTML. In many applications, models are loaded via an HTTP JSON API, although Ember is agnostic to the backend that you choose.
App.Person = DS.Model.extend(); !store.find('person', 1);
ONE-TO-ONE
App.User = DS.Model.extend({ profile: DS.belongsTo('profile') }); !App.Profile = DS.Model.extend({ user: DS.belongsTo('user') });
ONE-TO-MANY
App.Post = DS.Model.extend({ comments: DS.hasMany('comment') }); !App.Comment = DS.Model.extend({ post: DS.belongsTo('post') });
MANY-TO-MANYApp.Post = DS.Model.extend({ tags: DS.hasMany('tag') }); !App.Tag = DS.Model.extend({ posts: DS.hasMany('post') });
store.createRecord('post', { title: 'Rails is Omakase', body: 'Lorem ipsum' });
store.find('post', 1).then(function (post) { post.deleteRecord(); post.get('isDeleted'); // => true post.save(); // => DELETE to /posts/1 }); !// OR store.find('post', 2).then(function (post) { post.destroyRecord(); // => DELETE to /posts/2 });
DELETING RECORDS
CREATING RECORDS
ADAPTERS
App.PostAdapter = DS.RESTAdapter.extend({ namespace: 'api/v1' });
CONTROLLERS
A controller is an object that stores application state. A template can optionally have a controller in addition to a model, and can retrieve properties from both.
REPRESENTING A SINGLE MODEL
App.SongController = Ember.ObjectController.extend({ soundVolume: 1 });
<p> <strong>Song</strong>: {{name}} by {{artist}} </p> <p> <strong>Current Volume</strong>: {{soundVolume}} </p>
REPRESENTING MULTIPLE MODELS
App.SongsController = Ember.ArrayController.extend({ longSongCount: function() { var longSongs = this.filter(function(song) { return song.get('duration') > 30; }); return longSongs.get('length'); }.property('@each.duration') }); !!!<ul> {{#each}} <li>{{name}} by {{artist}}</li> {{/each}} </ul> !{{longSongCount}} songs over 30 seconds.
VIEWSViews in Ember.js are typically only created for the following reasons:
• When you need sophisticated handling of user events
• When you want to create a re-usable component
var view = Ember.View.create({ templateName: 'say-hello', name: "Bob" }); !!view.appendTo('#container');
Handling events
{{#view App.ClickableView}} This is a clickable area! {{/view}} !!App.ClickableView = Ember.View.extend({ click: function(evt) { alert("ClickableView was clicked!"); } });
INSERTING VIEWS IN TEMPLATES
// Define parent view App.UserView = Ember.View.extend({ templateName: 'user', ! firstName: "Albert", lastName: "Hofmann" }); !// Define child view App.InfoView = Ember.View.extend({ templateName: 'info', ! posts: 25, hobbies: "Riding bicycles" }); !<script type="text/x-handlebars" data-template-name="user"> User: {{view.firstName}} {{view.lastName}} {{view App.InfoView}} </script> !<script type="text/x-handlebars" data-template-name="info"> <b>Posts:</b> {{view.posts}} <br> <b>Hobbies:</b> {{view.hobbies}} </script>
RESULTUser: Albert Hofmann <div> <b>Posts:</b> 25 <br> <b>Hobbies:</b> Riding bicycles </div>
Benefits• Two-way data binding: objects in Ember are able to
register bindings between one another. That way, whenever a bound property changes, the other one is updated automatically.
• Computed properties: if you wish to have a property that is a result of a function, you can create them and assign a property as computed by that function.
• Template auto-updates: when an object is updated in your app, all the views currently displayed in the screen that are bound to that object automatically reflect the change, with no boilerplate.
Stand alone JS app
http://yeoman.io/
Backbone.js generator
• npm install -g generator-backbone
• mkdir my-new-project && cd $_
• yo backbone [app-name]
!
https://github.com/yeoman/generator-backbone
Ember.js Generator
• npm install -g generator-ember
• mkdir myemberapp && cd myemberapp(The directory's name is your application's name)
• yo ember
• npm install -g grunt-mocha
• grunt serve
Rails + JS Framework
• Backbone on Rails
• ember-rails
Backbone on Rails gem 'backbone-on-rails'
bundle install
rails generate backbone:install
rails generate backbone:scaffold NAME
https://github.com/meleyal/backbone-on-rails
http://moxa.ws/en/adding-backbone-js-in-rails-app-in-5-seconds/
Ember on Rails
gem 'ember-rails'
gem 'ember-source', '1.5.0' # or the version you need
bundle install
rails g ember:bootstrap -g --javascript-engine coffee
!
https://github.com/emberjs/ember-rails
QUESTIONS?