Copied from one of my posts on the previous announcement with some tweaks:
Both Ember and Backbone fall into what I call the KVO frameworks category (Angular, Javascript MVC, Knockout, Batman, others). Both use jQuery for DOM manipulation and revolve around the idea of having a canonical model and having that as the center of your app. As you change the model, it fires events that you use to update the DOM. The difference is that Backbone is philosophy.
Backbone provides a basic but complete set of tools for observing model changes combined with a set of utilities that are useful but not prescriptive to make wiring up DOM events, URL handling, etc straightforward. It works with what's in jQuery/the browser. All together, it provides the organization most js apps are sorely lacking but doesn't dramatically reduce LoC over what you could do with well factored jQuery and underscore. It's nice enough that the YUI team basically adopted it wholesale for the App framework in 3.5.
Ember is all about binding. You can not only observe properties but bind them to other properties bidirectionally so that changing one causes the change to propagate through all bound values including things like values being arrays. This extends to the Handlebars templating (which was written for Ember) where you can bidirectionally bind, for example, a boolean on your model to a checkbox and to a class on a div so that checking the checkbox toggles the class without anything in your app directly manipulating the DOM. Setting this up is just the attribute plus two object path strings in the template. This works not just between the template and model but also between model objects, for arrays of models, and for nested models and nested views. Used properly, this takes care of a significant fraction of client side state managment and a resulting reduction in LoC.
The cost is that Amber is 7x the size of Backbone, the templating language is tied to the framework, and there's more overhead in understanding the concepts, how they fit together, and how to apply them to your code. When I talk to people who are writing jQuery spaghetti, I steer them towards Backbone for the simplicity and superior docs but mention that I use Ember for my own projects.
My impression is that the biggest difference is automated two-way bindings between views and models. Under Backbone, you have to do that binding manually. With Ember, this means that you don't have to always be explicitly triggering events to cause view re-rendering or invoking persistence callbacks from your views to trigger model saves.
The "computed properties" is also nice; it looks to enable the decorator pattern on models pretty trivially in the context of the two-way bindings, which generally does a lot for producing clean code.
My gut is that this is "Backbone biased towards a specific flavor of application design". Backbone is awesome, but by its own admission, is more of collective toolset than a full-blown framework. Ember looks like it's sort of a midpoint between Backbone's spartan foundation and Sproutcore's kitchen-sink framework. I'm excited to try it out.
Especially considerring Knockout Model plugin that basically adds Backbone-style capabilities to KO models. Other notable plugins give easy bindings for jQuery UI widgets, Underscore support for collections and external templates:
My favorite are control flow bindings that let you write templating code right inside your HTML and not withing script tags. When you have to write markup inside a script tag you editor might get the whole autocompletion, formatting and syntax coloring wrong. And in past it was relly annoying for me. So having templates in HTML, not in script is really great.
One thing that helps a lot is that all bindings are defined inside data-attributes which keeps markup valid. Most editors support them well, too. Ember's double-braced template attributes are really weak choice in this regard.
And if you're worried about javascript bits inside data-bind attributes you now have an option to separate them via binding providers (see blog post above). The syntax is somewhat clunky but still workable and I suppose it can be improved.
Provided that Knockout has a vibrant community and growing support inside .NET world I think Ember has nothing to offer to make me switch.
And that's unfortunate. Today I see like most frameworks converges to some common ground. Knockout gets more features from Backbone. Backbone gets more features from Knockout (there's at least one bindings plugin for BB although it pales in comparison to Ko). And as far as I can see we as a JavaScript community reached the next base.
- We started with simple Ajax libraries.
- Then we moved to widgets.
- Now we got MVP frameworks and think more about organizing our applications in general.
What's the next step? That's the most important question for me and for other JS professionals that I talked to at recent local conference. When I saw Yahuda's announcement I really hoped that he'd give us a clue. Instead we got another MVP variant and not a top one although a pretty solid.
I suspect that Ember still will get some users. Yahuda has dedicated fans (me included) and Knockout as something coming from .NET world has a somewhat hard time getting adoption among the general JS crowd. Maybe that's a good thing: two frameworks are very similar and can learn from one another. But I personally hoped for more.
Still, congrats on releasing the thing! Keep it up!
> What's the next step? That's the most important question for me and for other JS professionals that I talked to at recent local conference.
Components with bindings IS the next step. Douglas Adams quote:
"The History of every major Galactic Civilization tends to pass through three distinct and recognizable phases, those of Survival, Inquiry and Sophistication, otherwise known as the How, Why and Where phases. For instance, the first phase is characterized by the question, 'How can we eat?' The second by the question, 'Why do we eat?' And the third by the question, 'Where shall we do lunch?'"
Whenever the topic of web app development has come up in the past 5 years or so, I always think of this quote. In the case of front end development, the questions are "Can we do this?" (CGI, asp/jsp/php), "Can we make this feel better?" (ajax, rails & co), and "How shall we structure our app?" (components, binding, widgets). This last phase only kicked of in earnest about a year ago and I'm still evangelizing the approach to even relatively up to date developers. They've heard of Backbone, for example, but haven't investigated and don't know how it applies to day to day work.
Going forward, expect to see interoperability concerns addressed. I've seen proposals for this in the form of html5 component model [1][2] and style tag's scoped attribute [3]. This provides a common ground for people to mix different libraries/components on the same page with a reasonable confidence that things won't break.
I also expect one of the KVO frameworks and it's associated widget system to "win" like jQuery has won DOM manipulation. What makes widget frameworks in the browser fun is that people have an expectation of being able to completely restyle everything and the only way I know of to do that cleanly without forcing a lot of fragile markup is with sass/less/stylus, so I expect to see those increase in popularity.
As a whole, web apps have been less sophisticated than equivalent complexity desktop and mobile apps. I've long believed that much of this is due to us re-writing a half-assed widget system from scratch for every project. This consumes a significant fraction of the time/money/effort allocated to a project which apps on other platforms can put into additional capabilities or polish. As such, I think the wide adoption of a KVO framework and widget library will be an inflection point for the quality and sophistication of apps in the browser. I'm looking forward to it.
