NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Difference between Declarative and Imperative Programming with Real Examples

In this article we’ll concentrate on two of the existing programming paradigms: Imperative programming and Declarative programming. We’ll check the main features of both of them and try to understand what pros and cons they have.

image00

Different approaches to the development process tend to establish programming paradigms. By the paradigm in this case we mean a class of programming languages that is formed according to the style of programming. A paradigm can be concerned with the way the code is organized or with the style of syntax and grammar.

Some languages relate to only one paradigm, others – to multiple paradigms. So, it can be hard to identify the list of strict rules that we can use to define what paradigm this or that language falls into.
Check our latest articles: Real-time Firebase apps and Cross-platform Electron applications.

Imperative Programming

So, what is imperative programming? The shortest way to answer this question is to say that by using the imperative programming language we try to say HOW we want to do something. For this purpose, we use statements that can change the current state of the application.

In imperative programming, you use assignment statements to locate some information in memory to use it later. The wide use of looping statements allows executing sequences of statements. If you want to check whether some condition is met before performing some actions, you can use conditional branching statements.

To better understand how this paradigm works, let’s take a look at a small example. Imagine that we want to change the color of a button after a user clicks it. According to the imperative paradigm, we have to know how we want to do it. Thus, we have to check the current state of the component and manipulate it. Here’s the code example:

if(user.likes()){
    if(!hasBlue()) {
        removeRed();
        addBlue();
    }
} else {
    if(hasBlue()){
        removeBlue();
        addGrey();
    }
}

As you can see, we’ve used the if statement to check what’s currently rendered on the screen. Then, according to the received info, we performed a particular action.

If you have tons of such elements, it can be pretty hard to understand what’s going on in the code at first sight. You should analyze the code to see what this code does, as if you were an interpreter. Moreover, this code is related to a particular context, which means that it’ll be a difficult task to reuse it in another project.

Examples of imperative programming languages

Imperative programming is probably the most widely spread paradigm. The most popular examples of imperative programming languages are C++, Java, and PHP. The main characteristics of such programming languages are direct assignments, common data structures, and global variables. Here’s an example of the code written in C++. It calculates factorial using recursion:

#include
using namespace std;

int factorial(int n);

int main()
{
    int n;

    cout << "Enter a positive integer: ";
    cin >> n;

    cout >> "Factorial of " << n << " = " << factorial(n);

    return 0;
}

int factorial(int n) {
    if(n > 1)
        return n * factorial(n - 1);
    else
        return 1;
}

But despite the high popularity level, we have to admit that imperative programming languages can be non-scalable and sometimes too complicated. Moreover, they’re more error-prone than declarative programming languages.

Declarative Programming

Here’s the second big question. What is a declarative language?

The term Declarative programming is often used as an opposite to the Imperative programming. Shortly speaking, this paradigm allows you to declare WHAT you want to be done.

This style of developing implies description of the logic of computation but not its control flow. By describing only the result that you want to get from the application (instead of the ways of reaching this result), you can minimize unwanted side effects. Developers describe the results they want to get without explicit description of required steps.

To better understand what we mean, let’s jump to the example with the button that we’ve mentioned earlier. In the case of declarative language and with the use of the React library, it may take the following form:

if (this.state.liked){
    return ;
} else {
    return ;
}

In this example, we’re focused on the UI for a given state. There’s no need in extra checking. We just say what we want our application to do. Without a doubt, now it’s easier to understand what’s going on.

Examples of Declarative Programming Languages

The examples of declarative languages that’ll help you understand the concept are SQL and HTML. When you use one of those, you just describe your goals without specifying how you want to achieve them. For example:

<h1>Imperative vs. Declarative UI libraries and Which You Should Choose</h1>
Different approaches to the development process tend to form the established programming paradigms.

The declarative programming paradigm is much simpler to understand and much safer to use. It’s more scalable and provides you with the possibility to reuse your code. You don’t have to worry about the implementation details.

But don’t think that declarative and imperative approaches are essences from two different universes. Many declarative implementations have some sort of imperative abstraction layer.

When you use a UI library that follows the declarative programming paradigm, you assume that it knows how to perform all required steps to make the things done. But these steps stay behind the curtain.

Webix and Programming Paradigm

What programming paradigm is Webix based on?

Webix allows you to use a collection of advanced ready-to-use UI components such as Chart or DataTable. According to the principles of declarative programming, all you need to do is to define what you want to get without bogging down in the implementation routine.

For example, to create a simple chart, you just have to choose the proper widget, define the type of a chart, and the source of data:

webix.ui({
    view:"chart",
    type:"bar",
    data: dataset
});

When you create a layout and have to deal with sizing, you can simply say that you want to make one component twice bigger than others by using the gravity property:

webix.ui({
    // some code here
    { view:"button", value:"Save", gravity:2 },
    { view:"button", value:"Load"}
});

Why Webix Implements Declarative Paradigm?

The reason of preferring such an approach to the others was the intention to provide a developer with the possibility to design user interfaces as fast as possible. Webix widgets have advanced out-of-the-box functionality and created code can be reused with ease.