A Decade in Review (Durandal vs. Angular)

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

** This post is updated on 26-07-2024 **

The web development landscape has evolved rapidly over the past decade. JavaScript frameworks, once a nascent field, have proliferated, matured, and often been replaced by newer, more innovative solutions.

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.

Durandal vs Angular 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.

Module loading: AMD vs ES6 module

AMD (Asynchronous Module Definition) was a popular approach for modularizing JavaScript code before ES6 modules became the standard. It relied on a loader like RequireJS to define and load dependencies asynchronously. While AMD offered a solution to module management, it introduced complexity due to its asynchronous nature and configuration requirements.

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

1
2
3
4
5
6
7

// 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 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');  
  }  
}

The transition from AMD to ES6 modules was a significant step forward, paving the way for more efficient and maintainable codebases.

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.

How the State is managed

State refers to the data that describes the application at a given moment. As applications grow, managing state becomes increasingly complex due to interconnected components and dynamic data flow.

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

Dependency Injection (DI) is a design pattern that promotes loose coupling by passing dependencies into objects rather than creating them within. It has become an essential feature in the modern JavaScript framework.

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.

1
2
3
4
5
6
7
8
9
10
11
12
13

// 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();  
  }  
}

Data Binding

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

1
2
3
4
5

<!-- 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.

1
2
3

<!-- 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. With many cool features, Angular 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.

The Future of SPAs

The future of Single Page Applications (SPAs) looks promising as they continue to evolve and adapt to new technologies and user expectations. As more businesses seek dynamic and responsive web experiences, SPAs are set to become even more prevalent. Some of the new enhancements may includes:

• WebAssembly Integration: This technology allows code written in multiple languages to run at near-native speed in the browser, improving performance for complex applications.
• Server-Side Rendering (SSR): More frameworks may adopt or improve SSR to enhance initial load times and SEO.

The emphasis on developer experience and tools will likely grow, making it easier to build, maintain, and scale large applications. Angular’s robust ecosystem, including tools for testing, debugging, and optimizing performance, will play a crucial role in this.

SPAs may increasingly use AI to provide personalized experiences, such as recommending content or optimizing user interfaces based on behavior.

Summary

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. While Durandal was remarkable in its time, the latest SPA frameworks have reached a whole new level!