How to use third party components in Aurelia application

[adriatic]

This subject is "brewing" in me for a long time and I believe that it is the right tome to address it from a point of view that addresses the most pertinent issues:

• Declarative versus Imperative programming as related to Aurelia Integration with third party components.
• Factors that influence the decision on use custom attributes, custom elements or both in a typical Aurelia integration with third party components
• Optimal organization of an Aurelia plugin.
• ...

(this list ought to grow, so we can be sure that all pertinent issues are covered and agreed upon)

[JeroenVinke]

On the matter of declarative versus imperative, I believe we came up with a good rule of thumb.

Lets use pseudocode of a grid as an example:

<grid>
  <columns>
    <column></column>
    <column></column>
  </columns>
  <datasource>
    <transport>
      <read>
        <url>http://demos.telerik.com/kendo-ui/service/products</url>
      </read>
    </transport>
  </datasource>
</grid>

We would have this if we did the complete configuration of the widget in the DOM. I believe we agreed that this is too verbose, and we decided that presentation stuff (the columns) should be configured via the DOM, and that the datasource (which does not show anything on the screen) should be configured via the view-model.

[charlespockert]

@JeroenVinke totally agree with this - we want to keep the option of configuring via the API, which is why all widgets support bindiing to an options attribute which proxies the options object on the kendo widget itself

Where applicable, assignments to this options property should update the widget, whilst assignments to individual properties should rebuild options (we've used Object.assign to drop the changed options on top of the existing options set). The only exception to this being controls that don't accept reconfiguration (like kendoButton which seems to be "fire-once", but we could re-initialise the DOM element if we wanted to add this ability...)

It might make sense to extract as much of that handling out to a helper module as I'd imagine it's going to be the same for every widget.

So for the your example since we are splitting out the presentation from the data/logic we would put the datasource in the VM and the columns in the markup

We definitely need to supply Aurelia templating in column markup - this is a must have for me, it's a much more declarative way of expressing your layout than putting <script type="kendo/template"> everywhere, or declaring column markup in your VM/JS

This needs to apply to any control that allows a user to supply their own template