DEV Community

Dwayne πŸ‡¦πŸ‡Ί
Dwayne πŸ‡¦πŸ‡Ί

Posted on

Aurelia 2 Can Emulate Other Frameworks

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');
  }
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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

<input value.bind="value">
Enter fullscreen mode Exit fullscreen mode

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');
  }
}
Enter fullscreen mode Exit fullscreen mode

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()">
Enter fullscreen mode Exit fullscreen mode

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

<button click.trigger="handleClick()">
Enter fullscreen mode Exit fullscreen mode

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');
  }
}
Enter fullscreen mode Exit fullscreen mode

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

<input [(value)]="value">
Enter fullscreen mode Exit fullscreen mode

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

<input value.two-way="value">
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
monfernape profile image
Usman Khalil

I'm already loving it. I work on an enterprise level Aurelia project but I can't see many more projects coming.