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

Victor Melo — Sat, 09 Aug 2025 13:25:52 +0000

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:

Find the list element.
Create a new list item element.
Set the text of the new item.
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>

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

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>

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}`);
  }
}

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

Do you know what is an RFC?

Victor Melo — Wed, 31 Aug 2022 10:27:59 +0000

RFC is the document used to propose changes to Internet Engineering Task Force (IETF). A definition I found online is:

The Request for Change (RFC) is formal request for the implementation of a Change. The RFC is a precursor to the 'Change Record' and contains all information required to approve a Change. Further information is added as the Change progresses through its lifecycle. The level of detail depends on the size and likely impact of the Change. Often there will be references to further documents containing more detailed information, e.g. a detailed 'Change Proposal'. As major Changes are typically implemented as projects, the RFC often takes on the role of what is also known as a "Project Charter".

An RFC contains all information related to the proposal sent, so it is the source of truth for any question you have related to the theme.

Interesting RFCs:

IP: https://www.rfc-editor.org/rfc/rfc791
TCP: https://www.ietf.org/rfc/rfc793.txt
HTML: https://www.ietf.org/rfc/rfc1866.txt
HTTP: https://www.rfc-editor.org/rfc/rfc2616
QUIC: https://datatracker.ietf.org/doc/html/rfc9000