Durandal vs Angular

What has changed for Single Page App in the last ten years

Have you heard of Durandal? If you’re not a seasoned JS developer, you might not have. A decade ago, it was a popular single-page app (SPA) framework.

Back then, I worked on a significant project using Durandal for more than a year. I liked it. It was small, flexible, and easy to expand.

A decade is a long time in IT. Now, Durandal is no longer in use. The new generation of front-end JS frameworks is dominating the world of web applications.

Recently, I had a task to make a minor improvement to an old Durandal application. It felt like reconnecting with an old friend. Naturally, I compared it with the current JS framework, Angular 16.

As you can guess, Angular has surpassed Durandal in almost every aspect. However, many of the design concepts in Durandal still hold their own. Looking at these comparisons, it’s clear how much Single Page App (SPA) frameworks have evolved over the past decade. It’s kind of fascinating to see how far we’ve come.

Framework overview

Durandal was created as a lightweight SPA framework focusing on simplicity and modularity. It relied on a combination of libraries like Knockout and Require.js to achieve its goals.

Durandal provides the essential features for making SPAs. It’s also designed to be easily integrated with other libraries.

Angular, on the other hand, is a complete package. That’s why it is called “batteries-included.” This means that Angular provides everything we need to build a rich single-page web app well-suited for large and complex projects.

AMD vs ES6 module

Durandal used the Asynchronous Module Definition (AMD) pattern for module loading and dependency management. One example usage of AMD is as below:

// Define a module using AMD in Durandal  
define(['knockout'], function(ko) {  
    var viewModel = {  
        message: ko.observable('Hello, Durandal!')  
    };  
    return viewModel;  
});

Angular, as well as other new JS frameworks, use the ES6 Module. Unlike AMD, ES6 modules are native to JavaScript, eliminating the need for additional loaders or libraries like Require.js. ES6 modules allow for static analysis, which enables better tooling, tree-shaking, and improved performance. By default, ES6 modules provide better encapsulation, making managing dependencies easier and preventing unintentional conflicts. Here is an example of usage.

// Import the module  
import { greet } from './myModule';  
  
// Angular Component  
@Component({  
  selector: 'app-greeting',  
})  
export class GreetingComponent {  
  message: string;  
  
  constructor() {  
    // Use the imported function  
    this.message = greet('John');  
  }  
}

Component-Based Architecture

Component-based architecture is a fundamental design paradigm in modern SPA frameworks. It involves breaking down the user interface into reusable, self-contained components, fostering modularity and maintainability in web applications.

Durandal has the concept of the component but lacks the structured component-based architecture seen in modern SPAs.

Angular emphasizes a component-based architecture and enforces a structured development approach by encapsulating functionality within reusable components, promoting a clear separation of concerns and maintainability in web applications.

State Management

Durandal uses a combination of view models, routing, lifecycle methods, and storage options to help us manage and maintain the state. As the application grows, tracking and managing the state transitions between different components and views may become more challenging.

There are many state management frameworks in Angular. The most popular one is NgRx, a state management library inspired by Redux. It offers a structured way to manage the application state, making it easier to handle complex data flows.

Dependency Injection

Durandal doesn’t provide a dedicated dependency injection container but offers a modular structure and integration with AMD (Asynchronous Module Definition) loaders like Require.js.

Angular’s Dependency Injection (DI) is a powerful mechanism that lets us manage and inject dependencies effortlessly. With its built-in DI, we can keep our code clean, organized, and testable, making it an excellent feature for building robust web applications.

// Angular component with dependency injection  
import { Component } from '@angular/core';  
import { DataService } from './data.service';  
  
@Component({  
  selector: 'app-example',  
  template: '<p>{{ message }}</p>',  
})  
export class ExampleComponent {  
  constructor(private dataService: DataService) {  
    this.message = this.dataService.getMessage();  
  }  
}

Binding

Durandal employed two-way data binding with Knockout, allow it to handle dynamic UI updates.

<!-- Durandal binding -->  
var vm = {  
    message = ko.observable('Hello world')  
};  
ko.applyBindings(vm);

Angular provides its own two-way data binding mechanism, and it has improved performance and flexibility over time.

<!-- Angular HTML template -->  
<input [(ngModel)]="message" />  
<p>{{ message }}</p>

Other modern frontend JS frameworks like React utilize one-way data binding, which enhances performance by updating the data state through events.

Tooling, CLI, and performance optimization

Durandal kept things simple and modular but didn’t have a CLI tool. It also doesn’t come with the built-in performance optimization feature.

Unlike Angular, it didn’t have server-side rendering support out of the box.

Angular comes with its CLI — a rich toolkit for building, testing, and deploying Angular apps. It makes life easier for developers and supercharges productivity.

Angular 16 takes it up a notch with cool performance tricks like AOT compilation and improved tree-shaking. This means quicker load times and smaller bundles, making the app faster overall.

Angular 16 also rolled out the improved Angular Universal, giving us a proper server-side rendering capability. This makes your pages load faster and boosts the SEO.

These significant advancements have levelled up modern Single Page Apps (SPAs). They’re powerful, easy to maintain, and super fast. Comparing Angular with Durandal is like comparing a fancy new sports car to an older model. Durandal was remarkable in its time, but the new generation SPA frameworks have taken things to a whole new level!