Views vs Components in Ember.js

I am learning ember.js, and I am trying to understand the difference between a view and a component. I see both as a way of making reusable components.

From Ember's website on views:

>Views 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

From Ember's website on 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.

So what is the main difference between a view and a component? And what would be a common example where I would prefer to use a view over a component and vice versa?

Ember.View

An Ember.View is currently limited to the tags that are created for you by the W3C. But if you wanted to define your own application-specific HTML tags and then implement their behavior using JavaScript? You can't do this actually with a Ember.View.

Ember.Component

That's exactly what components let you do. In fact, it's such a good idea that the W3C is currently working on the Custom Elements spec.

Ember's implementation of components tries to be as closely to the Web Components specification as possible. Once Custom Elements are widely available in browsers, you should be able to easily migrate your Ember components to the W3C standard and have them be usable by other frameworks as well that have adopted the new standard.

> This is so important to us that we are working closely with the standards bodies to ensure our implementation of components matches the roadmap of the web platform.

Also important to note is that a Ember.Component is actually a Ember.View (a subclass) but that is completely isolated. Property access in its templates go to the view object and actions are targeted also at the view object. There is no access to the surrounding context or outer controller all contextual information is passed in, which is not the case with a Ember.View which indeed has access to it's surrounding controller, for example inside a view you could do something like this.get('controller') which would give you the controller currently associated with the view.

> So what is the main difference between a view and a component?

So, the main difference besides that components let you create your own tags and in some point in the future when Custom Elements are available also migrate/use those components in other frameworks that will support custom elements, is indeed that at some point an ember component will make a view somewhat obsolete depending on the specific implementation case.

> And what would be a common example where I would prefer to use a view over a component and vice versa?

Following the above this depends clearly on your use cases. But as a rule of thumb, if you need in your view access to it's surrounding controller etc. use a Ember.View, but if you want to isolated the view and pass in only the information that it needs to work making it context-agnostic and much more reusable, use a Ember.Component.

Hope it helps.

Update

With the publication of Road to Ember 2.0 you are now encouraged to use Components instead of Views in most of the cases.

The answer is simple: use components

According to a training video that was recorded on August 2013, Yehuda Kats and Tom Dale (Ember Core Team Members) told the audience to not use views unless you're a framework developer. They've made lots of enhancements to Handlebars and introduced Components, so views are no longer necessary. Views are used internally to power things like {{#if}} and {{outlet}}.

Components also closely mimic the Web Component standard that will be build into the browser, so there are lots of side benefits to becoming comfortable building Ember Components.

Update 2014-11-27

It's even more important now to use components instead of views, as Ember 2.0 will be using Routable Components when a route is entered, instead of a controller/view. In order to future proof your app, it's best to stay away from Views.

Sources:

• Road to Ember 2.0: https://github.com/emberjs/rfcs/pull/15
• Future-proofing your Ember 1.x code: https://gist.github.com/samselikoff/1d7300ce59d216fdaf97
• There is no view, only component (Tom Dale): https://speakerdeck.com/tomdale/ember-2-dot-0-in-practice?slide=27

As it stands now - v2.x being current stable release - views have been completely deprecated. It is said that views are being removed from Ember 2.0 API.

So, using {{view}} keyword in Ember 2.0 will trigger an assertion:

> Assertion Failed: Using {{view}} or any path based on it has been removed in Ember 2.0

If you have to use views in Ember 2.0 you can use ember-legacy-views addon, which will be compatible with Ember until version 2.4.

So, to sum up - components are the present (views being removed) and the future - they will also replace controllers. See Routable Components RFC.