What is the difference between using <compose view-model = "./my-element"> and <my-element>? What are some scenarios when one of them is more suitable?
My teammate and the last four months have been developing the application in Aurelia, and we are creating and using components in different ways. I want to have some consistency and shift everything into one of two styles, but I don’t know which one is preferable or suitable for our needs.
I chose to use <compose> because for me it feels cleaner and is suitable for everyone I came across, but if using the user element is objectively better, I want to switch to this.
For instance:
(its view is a model :)
import { bindable, bindingMode } from 'aurelia-framework'; export class HisWay { @bindable({ defaultBindingMode: bindingMode.twoWay }) data; } (view of his path :)
<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; } } (view in my-way mode :)
<compose view-model="./my-way" model.bind="myModel" containerless></compose> Do I need to change, and if not, what reasons can I use to convince him to use the same style that I used?
Use the custom element approach if necessary.
Set goals for dynamic scenarios. If the values of the <compose> view and view-model attribute 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. The custom item template cannot access the external area, all data must be transferred using the @bindable properties. This contrasts with <compose> , which allows access to external space, which makes it very easy to be inaccurate and make assumptions about the environment in which the compiled view will be used.
Features Custom elements have more features than the <compose> element. Template parts / slots (switching), related properties, the ability to "globalize" through globalResources and much more.
Reuse . It is much easier for a team to reuse a widget when it is encapsulated in a user element and globalized through globalResources . A team can simply write <mega-widget ...></mega-widget> as opposed to having to remember the relative paths to mega-widget.html and mega-widget.js and write a valid expression <compose view="..." view-model="..."></compose> .
Better fit . Any use case in which you create a data entry widget really deserves a custom element. It is much easier to use a special currency element - for example: <currency value.bind="unitCost"></currency> than to try to achieve similar results with <compose> . You don’t know how you would do it.
CSS : it’s easier to target a custom element using css selectors than a specific instance of a compose instance. mega-element { display: block; ... }
I personally did not force myself to use only a specific approach. Most structures suffer from the fact that they are trying to convince you that there is only one victory paradigm. But this is not so, since each project and even within a project, each requirement can be completely different.
Therefore, when looking at whether to visualize components using the name of the custom element vs compose, first ask yourself what is the design goal that you want to achieve. Unification, in my opinion, is not enough.
Transitioning only with the help of a custom element is very large, because it is easy to read and easily suitable for any static page structure. On the other hand, if your page requires a lot of dynamic composition, then a folded approach, as the name implies, is a way of transition.
So, I would be inclined to agree that the composition is better or allows you to speak more flexibly, but at the same time also curious verbose.
One argument against layout may be the use of custom attributes. For instance. if you use aurelia-i18n and want to use the attribute translation approach, you'd better use the custom element syntax. Thus, you see that all this concerns a precedent.
EDIT:
If we really want to go down to nitty gritty, the best argument for a user approach element is that compose itself is really nothing more than a user element .
The answer is no. You do not need to switch for situations like the example above. The Compose element (i.e., Components) and user elements solve different problems. The first allows you to compose a pair of views or views and the viewmodel into another view. The default behavior is consistent with the views and views of the models based on the name, but I understand that each time you can attach a different view model (which can give some interesting applications in say the for loop.) I use components when I want to split a larger view down into more manageable pieces. I will also use them where I want code reuse, but I don't want to configure it too much from one application to another, for example. footer navigation.
The user elements that I understand are mainly WebComponents, an evolving web standard that takes advantage of the Dadow DOM. (You can learn more about this in the links below.) At the same time, they have much more power than a simple component and IMO, which gives a great opportunity for reuse. Unlike a component, a user element can have a range of related attributes and therefore gives you more control over it, since you use it in a view. The example of your teammate doesn't really justify them. It can be argued that a Component would be the best choice in this situation.
Another important aspect of understanding the compose element and the custom element is the called life cycle.
Using the compose element will trigger activate(params) of the navigation life cycle, as well as the normal component life cycle ( created , bind , attached , detached , unbind ).
It can be useful and nuance.