Imperative vs Declarative Programming

The first programming languages looked like assembly languages. With assembly, you have to tell the computer exactly what it needs to do at every point. You have to tell it which memory slot to store data in and which line of code to go to next.

This is full imperative programming. You have to describe every step you want to execute. Naturally, the first higher-level programming languages were also imperative:

These languages were a little more readable than Assembly, but the paradigm for writing code was the same: the developer had to tell the computer what and how it should execute the logic.

1
#include <stdio.h>
2

3
int main() {
4
    for (int i = 1; i <= 5; i++) {
5
        printf("%d\n", i);
6
    }
7
    return 0;
8
}

Then around the 1960s computers started becoming more powerful, and people realized that we could shift some of the cognitive load to the machines. Instead of telling the machine what to do, what if we could just tell it what we want and let the underlying system figure out the steps to get it done?

Thus the declarative paradigm was born. Some of the first declarative languages were:

Instead of telling the machine to loop through each item, and then print each one, we just tell it what we want to print.

1
(print (mapcar #'(lambda (x) x) '(1 2 3 4 5)))

Most modern general-purpose languages have capabilities of both built-in.

Imperative

Let’s use Dart, one of the most beautiful languages out there, as an example. To write imperative code, you must tell the computer what to do, step-by-step.

Let’s say you want to print all the numbers in an array that are greater than 3. The imperative approach would be to tell the computer what to do at each step of the process.

1. First, loop through all the numbers in the list.
2. Then, check if each number is greater than 3.
3. If it is, add it to the filtered list.
4. Finally, print the filtered list.

1
List<int> numbers = [1, 2, 3, 4, 5];
2
List<int> filtered = [];
3

4
for (int number in numbers) {
5
  if (number > 3) {
6
    filtered.add(number);
7
  }
8
}
9

10
print(filtered); // [4,5]

Declarative

The declarative approach tells the computer what outcome it wants, and then lets the computer do the cognitive load of figuring out how to do that.

Let’s take the same task of printing numbers greater than 3, but using a declarative approach.

1. Print a list of all the numbers from the array that are greater than 3.

1
List<int> numbers = [1, 2, 3, 4, 5];
2
print(numbers.where((num) => num > 3).toList()); // [4,5]

Usually, a declarative approach will have fewer lines of code, since it’s just telling the computer what outcome you want. The code also reads closer to the English language.

So that’s the key difference between imperative and declarative programming.

• Imperative: Tells the system what to do, step-by-step.
• Declarative: Tells the system what outcome you want.

Modern tech is Declarative

Given the lighter cognitive load necessary to write declarative code, most modern frameworks are referred to as Declarative UI Frameworks.

• React
• SwiftUI
• Flutter

For example, in Flutter, you write the code for the UI using “widgets”, and you declare these widgets in a tree-like structure that corresponds to how you want the app to look. You write what you want to see.

1
Column(
2
  children: [
3
    const Text('Hello, Flutter!'),
4
    const SizedBox(height: 16),
5
    const Icon(Icons.favorite, color: Colors.pink, size: 48),
6
    ElevatedButton(
7
      onPressed: () {
8
        print('Button pressed!');
9
      },
10
      child: const Text('Click Me'),
11
    ),
12
  ],
13
),

Previously, you would have to go through each step of the process of creating the component, setting its properties, and then adding it to the view.

1
// Create root layout
2
LinearLayout layout = new LinearLayout(this);
3
layout.setOrientation(LinearLayout.VERTICAL);
4
layout.setPadding(50, 50, 50, 50);
5
layout.setBackgroundColor(Color.WHITE);
6

7
// Create a TextView
8
TextView title = new TextView(this);
9
title.setText("Welcome to the Imperative UI!");
10
title.setTextSize(24);
11
layout.addView(title);
12

13
// Create a Button
14
Button button1 = new Button(this);
15
button1.setText("Click Me!");
16
layout.addView(button1);
17

18
// Set click listener for button1
19
button1.setOnClickListener(v ->
20
 Toast.makeText(this, "Button 1 clicked!", Toast.LENGTH_SHORT).show()
21
);

However, with these newer frameworks, only the UI layer is declarative. A fully declarative language seems unreasonable, since a step-by-step approach is necessary when writing backend logic.

Maybe AI is the ultimate declarative abstraction layer?

If you enjoyed this article and are interested in Flutter, check out this article next.