Amber.js (formerly SproutCore 2.0) is now Ember.js (and released)
yehudakatz.com
yehudakatz.com
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.
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.
https://github.com/SteveSanderson/knockout/wiki/Plugins
I'd also like to point out that in the upcomming release Knockout ads several nifty improvements: http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-be...
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!
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.
[1] http://lists.w3.org/Archives/Public/public-webapps/2011AprJu... [2] http://lists.w3.org/Archives/Public/public-webapps/2011AprJu... [3] http://dev.w3.org/html5/spec/Overview.html#attr-style-scoped
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.
Ember.js does not show such examples at - http://www.emberjs.com/examples
Will such examples be showcased in the future or is it not a part of Ember.js?
SproutCore 1.x isn't very mobile-friendly at the moment. The original reason the SproutCore 2.0 rewrite began was to make the framework lightweight so that it'd be more suitable for use on mobile platforms.
I've started a project, Ember-Titanium, that enables native mobile app development using Ember's runtime on the Titanium Mobile platform. The project is still in it's infancy, but I've already been successful at building apps with it.
Sooner or later we're going to have to work out an approach to globally distributed names that's less naive than "somebody else chose that first, choose a different name!"
*Yes, I made that "fact" up myself.
You know what's 1990-vintage? The set of HTML controls you have at your disposal, right now, even with HTML5, to send to the client to progressively enhance. At some point you have to draw the line. Require JavaScript and offer an API for the content. It'll be better specified than a bunch of markup anyway, which has a tendency to change at the whim of designers and marketing.
This library is supposed to be small and tightly focused. Providing progressive enhancement should be up to the developers using the library, not the library authors. Including it in the library would dictate too much about how things must work on the server, thus limiting the audience.
All modern JavaScript frameworks still generate HTML that's shown in the browser, so it's not like we no longer have to worry about that. The only thing that has changed is that we now generate the HTML in the client, not on the server; this has both its advantages (only needs to download data after the first load, only needs to update what has actually changed etc.) and disadvantages (you need to implement your own "progress indicator", slow page load on mobile where the cache is smaller, the webpage no longer gradually loads when you're on a slow connection, you need to worry about state).
If you have a simple request/response page on your website, nothing beats what we have today. And all websites have some plain request/response pages. These JavaScript frameworks seems to be an all-or-nothing and it seems to be hard to share components between the browser and the server. Why should I need copy-paste templates/layouts around?
> This library is supposed to be small and tightly focused. Providing progressive enhancement should be up to the developers using the library, not the library authors. Including it in the library would dictate too much about how things must work on the server, thus limiting the audience.
Looking at the example application (Todos), I'll have to say I wonder how to make this work on the server:
{{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}
<!-- Insert this after the CreateTodoView and before the collection. -->
{{#view Todos.StatsView id="stats"}}
{{#view SC.Button classBinding="isActive"
target="Todos.todosController"
action="clearCompletedTodos"}}
Clear Completed Todos
{{/view}}
{{remainingString}} remaining
{{/view}}
{{view SC.Checkbox class="mark-all-done"
title="Mark All as Done"
valueBinding="Todos.todosController.allAreDone"}}
{{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
{{view SC.Checkbox titleBinding="content.title"
valueBinding="content.isDone"}}
{{/collection}}
</script>
You're right about JavaScript generating the same controls in HTML that could be rendered on the server. I wasn't very clear about that, but the hard part is the progressive enhancement of the interaction with the controls, not their rendering. When people talk about progressive enhancement, they don't just mean the visual/DOM rendering. I really think that a number of people still expect these controls to work (even if just primitively) without JavaScript, by just using typical form submissions and no AJAX. This is where I meant that you have to draw the line. At some point the typical submit form, follow link, request/response cycle is so far from the user experience you're going for that you just have to admit that your application requires JavaScript.
Most of the Ember apps I'm aware of are using it.
Also, you might want to check out rake-pipeline-web-filters for additional functionality: https://github.com/wycats/rake-pipeline-web-filters
Do you recommend any libraries for managing url state?
;-)
Just like the HN front page, there is only room for the candidate who gets the most votes to win a seat in Parliament, so our democracy functions without downvotes.
How does it work where you live?
If each visitor to HN could only upvote one article a day then it would be similar.
If what you are trying to say is that it's not democracy regrdless of how the arrows work, I agree. It's not democracy because it isn't a system of social governance.