Quote:
Originally Posted by Shoe Lace
rt1, can you sell us some more on using ember.js?
Backbone+Underscore (backbone depends on underscore) weighs about 10k.
Ember weighs about 40k.
What makes ember so much better than backbone and why does it need 4x the amount of code to do basically the same thing as BB?
Sure.
First 40k is nothing, especially since the browser will cache after the first request. jQuery is 32k and we never complain about that because of how great the benefits are. How big would jQuery have to become before you stop using it?
So first lets start with what Ember is... it's an MVC framework and MVC is really freaking important when there is application state. You're probably thinking well I know MVC because you code in Rails/Django, but that's not really MVC. Why? Because there is no state in HTTP. Each request does not depend on the last request, requests are short lived, and you do not have to manage state transitions between the requests. If the person requests the users page, you give the all the users page, if they request the home page, you give them the home page. The previous requests don't factor into the current request. In Javascript applications there is a lot of state... things like is the user currently logged in? Which part of the application is the user in now? If they are looking at list of orders and we need to filter by orders paid with visa, what do we apply that filter to? None of these questions exist in your standard webapp/http because each http request is stateless. Btw, this is one of the reasons why writing web apps so easy/awesome because http completely removes the complexity of having to manage state. Now they are we are starting to see more statefull server side apps (things that use websockets) we'll start needing help managing state on the server. Anyway lets get back to Ember... Ember gives you models (data), controllers (state), views (presentation/ui/events) so you do not have to manage any of this stuff yourself.
Backbone is not an MVC framework, it's probably more like MVVM, but you could easily build a MVC structure on top of backbone. When I was writing backbone apps I used collections as a controller layer and that worked pretty well, but I mean **** you could probably use backbone views as a controller layer as well. When you start having all of these different ideas that solve the same problem your code gets real ugly really quickly. Backbone is also really lightweight and is made to be built on top of (imo). It provides you with very little tools, no convention, and lets you choose whatever path you want to follow. This gives you speed and the idea of freedom, but ultimately it means you are writing more code and responsible for more things. More code often leads to more coupling and bad architecture, which is bad.
Ember is very convention over configuration (yay javascript buzzword of 2012!). I think the Ember guys sum it up best when they say 'optimized for developer happiness'. Lets get into a few things that make Ember apps fun to write.
1) Computed properties.
Basically you have a function that returns a value, but when you access that function you access it as a javascript property. This makes refactoring code really easy because internally you can express things as functions/properties, but externally they will always be viewed as a property.
We can go from:
Code:
user = Ember.Object.create({
name: 'ryan t'
});
user.name // = 'ryan t'
We can later refactor the above to become
Code:
user = Ember.Object.create({
first: 'ryan',
last: 't',
name: function() {
return this.get('first') + ' ' + this.get('last');
}.property('first', 'last')
});
user.name // = 'ryan t '
You can see how massive refactorings become really nice because you only have to internally refactor, to the outside everything stays the same.
2) Bindings.
Bindings are basically variables that are shared across multiple objects, including views and templates. This means you can have something like {{name}} in a template, and when the user changes their name the template automatically updates.
Think about a shopping carts. A user has one $10 screwdriver in his shopping cart. So you would have a page that displayed his cart, summed up all the items and printed out a nice total. What do you do when the user adds a $20 hammer? You do nothing, because ember does it all for you... Ember will automatically update the page to show a new item in the cart and a new total.
Here's a dirty example for how total might work: When the user clicks on a buyItemView it will add that item to the cart. When the cart changes a new total will be calculated and the html will be updated to show the new total cost of the cart.
Code:
buyItemView = Ember.View.create({
cartBinding = "cartController.content";
click: function() {
this.get('cart').pushObject(this.get('item'));
}
});
cartView = Ember.View.create({
cartBinding = "cartController.content"
total: function() {
return this.get('cart').map(function(item) {
return item.price;
}).sum();
}.property('cart').cacheable()
});
<html>Your Total is {{total}}</html>
There are a lot more things that Ember provides to make writing code easy. On the controller side there are a number of classes you can inherit from to manage arrays/lists/objects/statecharts. Views are the same, for example there are a number of built in classes that make updating objects from forms extremely simple. The Ember run loop is really smart about how it processes bindings/events, and the best part is you don't even need to worry about it because it is completely abstracted away from you. There's ember-data too, which makes syncing your javascript objects/relations really simple with your Rails/backend apps. There is so much more to Ember than I have mentioned in this post and tbh I haven't even scratched the surface.
I recommend checking out emberjs.com: the todos example is simple, but effective in showing you how to write a quick app. Also, all of the code in this post is a mix of ember, js, and pseudo code... and sorry for writing such a long post.
Last edited by rt1; 04-03-2012 at 08:22 PM.