DEV Community

Cover image for The Declarative Advantage: Why Angular Prioritizes "What" Over "How"
Victor Melo
Victor Melo

Posted on

The Declarative Advantage: Why Angular Prioritizes "What" Over "How"

#angular #webdev #typescript #beginners

Imperative vs. Declarative

Programming paradigms can be divided into two categories:

  • Imperative Paradigms: The programmer describes how the software can achieve a result by providing a detailed sequence of instructions.
  • Declarative Paradigms: The programmer describes what the expected result is, and the underlying system figures out the steps to get there.

Procedural Programming and Object-Oriented Programming are examples of imperative paradigms, while Logic Programming and Functional Programming are paradigms that lend themselves well to a declarative style.

It was once common for a programming language to be oriented around a single paradigm, for example, Haskell is a purely functional language. In contrast, languages are evolving to support multiple paradigms, with a growing emphasis on declarative patterns. You can now develop your Java code using lambdas, a concept that came from functional programming.

Where Is Angular's Declarativity?

In the context of web development, an imperative approach would manipulate the Document Object Model (DOM) to update a list. You would write code to:

  1. Find the list element.
  2. Create a new list item element.
  3. Set the text of the new item.
  4. Append the new item to the list.

A declarative approach, as seen in Angular, is simpler: you declare in your template that a list should be rendered based on a specific array of data. When the data changes, Angular automatically and efficiently updates the DOM to reflect the new state, without you having to write any of the manual update logic.

Using plain JavaScript (imperative), you would do the following:

<ul id="my-list"></ul>
<button onclick="addListItem()">Add Item</button>
Enter fullscreen mode Exit fullscreen mode 
let itemCount = 0;

function addListItem() {
  // 1. Find the list element
  const list = document.getElementById('my-list');

  // 2. Create a new list item element
  const newItem = document.createElement('li');

  // 3. Set the text content
  newItem.textContent = `Item ${++itemCount}`;

  // 4. Append the new item to the list
  list.appendChild(newItem);
}
Enter fullscreen mode Exit fullscreen mode

Meanwhile, in Angular (declarative), you do:

<ul>
  @for (item of items; track item) {
    <li>{{ item }}</li>
  } @empty {
    <li>No items found.</li>
  }
</ul>

<button (click)="addItem()">Add Item</button>
Enter fullscreen mode Exit fullscreen mode 
import { Component } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})
export class ListComponent {
  items: string[] = [];
  itemCount = 0;

  addItem() {
    this.items.push(`Item ${++this.itemCount}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

In the first example, you tell the code how to update the list; in the second, you describe the desired structure in the HTML template and let Angular figure out how to achieve that result. The track keyword in the @for loop is a key part of this, as it tells Angular how to uniquely identify each item, enabling the framework to efficiently update the DOM with minimal changes. The optional @empty block is another declarative feature, allowing you to describe a state for an empty list.

Advantages of Being Declarative

Declarative code has the following benefits:

  • Improved readability and reduced code length.
  • Enhanced predictability and easier debugging.
  • Increased productivity and maintainability.

In a declarative approach, when you want to understand how a particular thing (like a variable) behaves, you just need to look at its declaration. Meanwhile, in an imperative approach, the declaration might be separated from its assignment, so you need to look at more places to completely understand the behavior.

Conclusion

At its heart, Angular's declarative nature is about empowering developers. By shifting the focus from the low-level how to the high-level what, the framework allows you to think about your application in terms of states and desired outcomes, not a list of manual DOM manipulations.

This isn't just an abstract programming principle; it's a practical choice that leads to more readable code, fewer bugs, and a more enjoyable development experience. As you continue your journey with Angular, remember that you're not writing instructions for the browser; you're declaring your intentions for the UI, and the framework is your trusted partner in bringing those intentions to life. This fundamental mindset is the key to mastering Angular and building robust, maintainable applications at scale.

References

Top comments (0)