DEV Community

Cover image for Aurelia 2: A Fresh Take on JavaScript Frameworks

Aurelia 2: A Fresh Take on JavaScript Frameworks

Almir Hodzic on January 11, 2025

Lately, conversations about JavaScript frameworks have been dominated by popular names like React (technically a library), Next.js, Svelte, Angular...
Collapse
 
dansasser profile image
Daniel T Sasser II

Just from what I read here, it reminds me of NestJS but with templating. I'll definitely have to take a look at it. I do live Astro though. I've been using it for about 2 years now.

Collapse
 
hdzcalmir profile image
Almir Hodzic

Aurelia 2 offers a modular architecture and strong templating, similar to NestJS but with more focus on data binding and flexibility. If you enjoy Astro, Aurelia's reactive, component-driven approach is definitely worth exploring!

Collapse
 
glyad profile image
David Kossoglyad (Hire me!)

Anyway,... Let me add a few words to the technical aspects learned from the article:

  1. Regarding Event Aggregator: Event Aggregator as a design pattern targets initially distributed systems or low-coupled modules on the Model level. Using the EA for broadcasting events on the View-Model level is one of the greatest mistakes because the only source of trues in the MVVM application is the Model. Using EA may cause general inconsistency in the application's state. Just to remind us, EA is an optional addition to the Aurelia Framework.

  2. Regarding DI, IoC, and Containers: Yes, both Aurelia 1 and Aurelia 2 bring robust DI/IoC Containers. The interesting point is that both containers can work as standalone packages in any JS/TS application in the browser and server-side Node.js environments, and it's without bringing Aurelia dependencies. The second important point with DI/IoC containers is lifetime management. I haven't found something like Aurelia DI/IoC Container for JS/TS apps that provides the same lifetime management capabilities. Same as above I must say about registration by interface.

  3. I haven't tried the Dynamic Composition in Aurelia 2, but I actively use it with Aurelia 1. It's the killer feature for a web framework, which can be found in Aurelia only. In Aurelia 1, it allowed reusing the View-Model in front of the number of different contextual views, where routing is redundant. Also, it allows the creation of a clean MVVM ViewModel-first architecture. I hope Aurelia 2 preserved all the good parts of the Dynamic Composition from Aurelia 1.

Collapse
 
mroeling profile image
Mark Roeling

Well done!

Collapse
 
hdzcalmir profile image
Almir Hodzic

Thanks!

Collapse
 
glyad profile image
David Kossoglyad (Hire me!)

I’m using the Aurelia since 2015 and successfully built over ten web applications. The Aurelia 2 promises to be more cool

Collapse
 
hdzcalmir profile image
Almir Hodzic

Love to hear it!

Collapse
 
beggars profile image
Dwayne Charrington

People sleep on Aurelia because it's not a big name framework. But, mature developers realise that eventually it comes down to the right tools for the right job over trends.

Collapse
 
hdzcalmir profile image
Almir Hodzic

Absolutely agree! It's all about choosing the right tool for the job, and Aurelia delivers where it counts.

Collapse
 
juniourrau profile image
Ravin Rau

This is my first time hearing about Aurelia 2, thanks for writing about it.

Question, how does Aurelia 2 compare to Angular 2+ in these areas? Both frameworks use Dependency Injection and support event-driven patterns, but does Aurelia's approach offer specific advantages or a smoother developer experience?

Collapse
 
beggars profile image
Dwayne Charrington

In terms of learning curve, Aurelia beats Angular hands-down in every meaningful value. It's more intuitive IMO. You don't have to create modules or anything. For example, if you wanted to inject a service into a component:

@inject(MyService)
export class MyComponent {
    constructor(private readonly service: MyService) {
    }
}
Enter fullscreen mode Exit fullscreen mode

Or if you don't want to use decorators, you can use static inject on the class or the resolve function (which do the same thing):

// Using static inject
export class MyComponent {
    static inject = [MyService];

    constructor(private readonly service: MyService) {
    }
}

// Using resolve
export class MyComponent {
    private readonly service = resolve(MyService);
}
Enter fullscreen mode Exit fullscreen mode

It's also just as easy to leverage different forms of DI modes like lazy evaluation, singletons, transients and so on.

Collapse
 
hdzcalmir profile image
Almir Hodzic

Aurelia 2 offers a simpler, convention-based DI and intuitive event handling compared to Angular 2+'s more complex DI system and RxJS-based events. It reduces boilerplate, is easier to learn, and provides a more streamlined, flexible developer experience.

Collapse
 
abhirupa profile image
Abhirupa Mitra

Would love to dive deep here.

Collapse
 
hdzcalmir profile image
Almir Hodzic

Glad to hear that! It’s great to know my blog post inspired you.