A teammate and I have been building an application in Aurelia for the last four months, and he and I have been creating and using ponents in these two different ways. I want to have some consistency and change everything over to one of the two styles, but I don't know which one is preferred or more suitable for our needs.

I chose to use <pose> because to me it feels cleaner and suits every need I have encountered, but if using the custom element is objectively better I want to switch to that.

For example:

(his-way view-model:)

import { bindable, bindingMode } from 'aurelia-framework';

export class HisWay {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) data;
}

(his-way view:)

<require from="./his-way"></require>
<his-way data.two-way="myModel" containerless></project-name>

(my-way view-model:)

export class MyWay {
  activate(model) {
    this.model = model;
  }
}

(my-way view:)

<pose view-model="./my-way" model.bind="myModel" containerless></pose>

Do I need to change over, and if not, what are some reasons I can use to persuade him to using the same style that I have been using?

A teammate and I have been building an application in Aurelia for the last four months, and he and I have been creating and using ponents in these two different ways. I want to have some consistency and change everything over to one of the two styles, but I don't know which one is preferred or more suitable for our needs.

I chose to use <pose> because to me it feels cleaner and suits every need I have encountered, but if using the custom element is objectively better I want to switch to that.

For example:

(his-way view-model:)

import { bindable, bindingMode } from 'aurelia-framework';

export class HisWay {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) data;
}

(his-way view:)

<require from="./his-way"></require>
<his-way data.two-way="myModel" containerless></project-name>

(my-way view-model:)

export class MyWay {
  activate(model) {
    this.model = model;
  }
}

(my-way view:)

<pose view-model="./my-way" model.bind="myModel" containerless></pose>

Do I need to change over, and if not, what are some reasons I can use to persuade him to using the same style that I have been using?

• javascript
• aurelia
• aurelia-templating

• One difference is the custom-element tag, wich I find very useful for my CSS. That is reason for me to use <his-way> instead of <pose view-model="./my-way">. – Randy Commented Aug 11, 2016 at 8:17
• Our designer doesn't like the dealing with the custom elements themselves, which is why we use containerless everywhere. I can't say I agree with the sentiment. – Anj Commented Aug 11, 2016 at 11:58
• 1 When using <pose> you can render a ponent that will be defined at run time. For instance, <pose view-model.bind="someViewModel" view.bind="someView"></pose>. Another advantage is that with <pose> you can reuse views and view-models. You can use the same view for 2 different ponents – Fabio Commented Aug 11, 2016 at 13:57
• 1 @FabioLuz These are good points, and I forgot about them although I have used <pose> in this way already. Thanks! – Anj Commented Aug 11, 2016 at 17:02
• You can although make the choice of the view dynamic for a ponent as well by using useViewStrategy() – zewa666 Commented Aug 12, 2016 at 13:49

4 Answers 4

Use the custom element approach when possible.

Compose targets dynamic scenarios. If your <pose> element's view and view-model attribute values are static (not data-bound) you probably should have used a custom element for the reasons described below.

Portablity: Custom elements are more portable because they have a higher degree of encapsulation. A custom element's template cannot access the outer scope, all data must be passed in via @bindable properties. This contrasts with <pose>, which allows accessing the outer scope, making it very easy to get sloppy and make assumptions about the environment in which a posed view will be used.

Features: Custom elements have more features than the <pose> element. Template parts/slots (transclusion), bindable properties, ability to "globalize" via globalResources and more.

Reuse: It's much easier for a team to reuse a widget when it's encapsulated in a custom element and globalized via globalResources. The team can simply write <mega-widget ...></mega-widget> as opposed to having to remember the relative path to mega-widget.html and mega-widget.js and write a valid <pose view="..." view-model="..."></pose> expression.

Better fit: Any use-case where you are creating a data-entry widget really deserves a custom element. It's far easier to use a currency custom element- eg: <currency value.bind="unitCost"></currency> than it would be to try and achieve similar results with <pose>. Not sure how you would acplish it really.

CSS: it's easier to target a custom element with css selectors than a specific pose element instance. mega-element { display: block; ... }

https://www.danyow/aurelia-custom-element-vs-pose/

The answer is no. You don't need to switch over for situations like the example provided. The Compose element (i.e. Components) and Custom Elements solve different problems. The former allows you to pose a view or view and viewmodel pair into another view. The default behavior matches up views and viewmodels based on name but I understand you could actually bind a different viewmodel each time (which might give some interesting uses in say, a for loop.) I use Components when I want to break a larger view down into more manageable chunks. I will also use them where I want code reuse, but I am not looking to customize it too much from one use to another e.g. footer, navigation.

Custom Elements I understand are basically WebComponents, an evolving web standard that takes advantage of the Shadow DOM. (You can read more about that at links below.) While similar, they have a lot more power than a simple Component and IMO a greater ability for reuse. Unlike a Component, a Custom Element can have a range of bound attributes and therefore give you more control over it as you use it in a view. The example of your teammate's doesn't really do them justice. One could argue that a Component would be a better choice in that situation.

• Aurelia Hub - Custom Components
• Aurelia Hub - Templating: Custom Elements Basics
• Aurelia Custom Elements & Content Selectors - April 2015

I personally wouldn't force yourself into only using a certain approach. Most frameworks suffer from the fact that they try to convince you that there is only one winning paradigm. But thats not true since each project, and even inside the project each requirement can be pletely different.

So when looking at whether to render ponents using the custom element name vs pose, first ask yourself what is the design goal you want to achieve. Unification in my opinion is not enough.

Going only with the custom-element approach is great because its easy to read and easy to get going for a kinda static page structure. On the other hand if your page requires a lot of dynamic position, the posed approach as the name suggests is the way to go.

So I'd tend to agree that pose is better or lets say more flexible, but at the same time also kinda verbose.

One argument against pose can be the use of custom attributes. E.g. if you use aurelia-i18n and would like to use the attribute-translation approach, you'd be better off using the custom-element syntax. So as you see its really all about the use-case.

EDIT:

If we really want to go down to the nitty gritty, the best argument for the custom element approach is that pose itself is actually nothing more than a custom element.

Another important aspect to understand between the pose element and a custom element is the life cycle that is invoked.

Using pose element will invoke the activate(params) of the Navigation Life Cycle, as well as the usual Component Life Cycle (created, bind, attached, detached, unbind).

This can be useful, and a nuance.