Aurelia 2 Can Emulate Other Frameworks

#aurelia #javascript #vue #angular

Soon there will be a new version of Aurelia dubbed Aurelia 2. If you are not familiar with Aurelia, it is a standards-compliant open-source Javascript framework that has been around for five years now. Maintained by a passionate core team and beloved by its community, Aurelia 2 sees the framework take a leap into its next evolution.

While Aurelia sadly does not get the level of love other frameworks and libraries do such as Vue and Svelte, I think Aurelia 2 will change this as it offers developers a powerful framework that allows them to work the way they want to work.

One of my favourite features about Aurelia 2 is the new flexible templating syntax. I don't mean the ability to create custom attributes and components (Aurelia has always been able to do that), I mean Aurelia can be configured to understand templating syntax of other frameworks and libraries.

In-fact, out-of-the-box, Aurelia 2 comes with support for two variants of templating syntax: Angular's at (@) syntax and Vue's (:) colon syntax.

This very simple block of configuration code tells Aurelia to use the colon syntax for binding:

@attributePattern({ pattern: ':PART', symbols: ':' })
export class ColonPrefixedBindAttributePattern {
  public [':PART'](rawName: string, rawValue: string, parts: string[]): AttrSyntax {
    return new AttrSyntax(rawName, rawValue, parts[0], 'bind');
  }
}

While this code might look foreign to some, basically says whenever you see : being used inside of a HTML view, match it and then map it to Aurelia's bind attribute.

This would then allow you to write Vue-esque syntax for binding like this:

<input :value="value">

Behind the scenes, Aurelia is rewriting this to work like you wrote it like this:

<input value.bind="value">

And similarly, this configuration code tells Aurelia to support Angular's "@" binding syntax:

@attributePattern({ pattern: '@PART', symbols: '@' })
export class AtPrefixedTriggerAttributePattern {
  public ['@PART'](rawName: string, rawValue: string, parts: string[]): AttrSyntax {
    return new AttrSyntax(rawName, rawValue, parts[0], 'trigger');
  }
}

The same story as the Vue example, you're mapping the @ character in your HTML views to be mapped to Aurelia's trigger attribute.

Which would then allow you to do things like this:

<button @click="handleClick()">

Behind the scenes, Aurelia is rewriting this to work like you wrote it like this:

<button click.trigger="handleClick()">

These are two simple examples which come with Aurelia 2 without anything else needed. But, what about Angular's banana in a box style syntax for two-way binding you ask? (Okay, maybe you didn't ask), well to make Aurelia support that, you would configure it like this:

@attributePattern
export class BananaInBoxAttributePattern {
  ['[(PART)]'](name, value, [target]) {
    return new AttrSyntax(name, value, target, 'two-way');
  }
}

In your templates, you would then be able to do the following:

<input [(value)]="value">

Behind the scenes, Aurelia is rewriting this to work like you wrote it like this:

<input value.two-way="value">

Conclusion

As you can see, the possibilities are actually quite endless. The above examples are just simple scenarios showcasing how Aurelia can emulate other frameworks' templating syntax from binding to displaying values. I know of no other client-side Javascript framework or library that offers this level of flexibility for templating, do you?

The real power in something like this is during migration of an existing application. While progressive enhancement is one solution, imagine being able to emulate existing syntax and migrating your applications over with very minimal rewriting need to make them work in Aurelia?

As a fun little exercise, you could try implementing your own templating syntax or allowing other aspects of Angular or Vue to work within Aurelia views.