Why Declarative Programming Techniques Work Well with Website Design

There has been a lot of rave over declarative programming techniques over the past few years, particularly amongst the community of front-end developers. But what exactly makes declarative methods so inviting and how does it fit into the often complex landscape of website design?

To start I will give a brief overview of declarative programming techniques and speak about how they compare to other common programming techniques. The central idea behind declarative programming is developing in a way that focuses on what the task is that you want to get done, not how to do it. Perhaps the best programming language to bring this idea to light is SQl.

Let’s start by creating a SQL table to store car information:

CREATE TABLE cars (make VARCHAR(20), model VARCHAR(20), year INT);

Here I created a table called cars with three fields, make (a string), model  (a string), and year (an integer). Now, I will populate the table with data.

INSERT INTO cars (make, model, year) VALUES (“Jeep”, “Liberty”, 2010);
INSERT INTO cars (make, model, year) VALUES (“Jeep”, “Wrangler”, 2002);
INSERT INTO cars (make, model, year) VALUES (“Chevy”, “Camaro”, 2019);

Now I want to manipulate this data in a declarative way:

SELECT *
FROM cars
WHERE cars.make = “Jeep”;

Here I am saying to grab all the cars from the database that have a make of “Jeep”. This is a pretty simple example but it proves the concept of declarative programming well. All my SQL statement did is said to pull all fields from the car table that had make = “Jeep”. This statement simply states what information is desired and then that information is returned. In the background SQL must go through the entire table check make for each entry and compare it to “Jeep” (this may not seem so difficult with this particular example, but imagine a table with thousands of entries!). These specific details are, however, obscured from the developer and all they know is that they are getting the information that they desire.

Let’s advance this concept by looking at an example in Javascript, or Typescript more specifically. A common concept in most programming languages is a for-loop. A for loop is a very powerful tool that can be used to do many things, including the filtering that I did with the SQL statement. However, with a for loop the programmer has to explicitly draw out exactly how to do the filtering for the machine to be able to perform the task correctly. Because of this, a for loop is an imperative programming construct. For example, let’s perform the same task in Typescript, this time using an array of car objects with fields for Make, Model, Year.

let cars: Car = [{make: “Jeep”, model: “Liberty”, year: 2010}, {make: “Jeep”, model: ”Wrangler”, year: 2002}, {make: “Chevy”, model: “Camaro”, year: 2019);

let cars2: Car;
for (Car car : cars) {
                if (car.make === “Jeep”) {
                                cars2.push(car);
                }
}

If we were to do this in a more declarative way:

Let cars: Car =[{make: “Jeep”, model: “Liberty”, year: 2010}, {make: “Jeep”, model: ”Wrangler”, year: 2002}, {make: “Chevy”, model: “Camaro”, year: 2019);

let cars2: Car = cars.filter(car ->{ car.make === “Jeep”});

As you can see this method is much more concise than the previous method as we don’t have to draw out exactly how to go through each car and filter them, we just need to say what we want to filter on. This is made possible with the filter() method. This is an example of another type of programming construct, functional programming. Functional programming and declarative programming often work together, especially in languages like Javascript. The idea of functional programming is that programs take in data and then return new data, but never directly manipulate the data. To make this a little clearer, one of the main constructs of functional programming is a pure method. Pure methods take in data as parameters and then return new data without actually modifying the parameters that get passed in. filter() is an example of a pure method. In the example above, a Car object gets passed into filter() (actually each Car object from cars got passed into filter() one by one) and then filter() returns a copy of the Car object if the condition holds true. The program is not modifying the elements of cars themselves but rather taking in the each element and returning new data based on the condition that is specified. This is what allows us to perform the task in a declarative way.

Now that we have the basics of declarative programming, let’s focus on it in the context of web design.

 A webpage generally consists of static components that merely act as containers for information (that may be getting updated constantly) and could perhaps be reactive as well. There is little concern on how the data gets to the component, we are just concerned that it is there and it is correct. In this sense we can abstract away all the nitty gritty details of how the information is rendered when sent to the component and just make sure that the component itself looks good and presents the information in an intelligible way. This is where the functional methods of Javascript allow us to easily accomplish our tasks.

In this example I will show how you can use Angular to display a simple webpage where information is retrieved and rendered in a declarative way.

Let’s start by creating a Car component, which will import the Component class so that it can be rendered as an html component

@Component({
elector: ‘app-car-list’
template:
<div>
                <input[value] = ”make” (input) = “make =$event.target.value”>
                                {{name}}
                <button (click) = “onclick()”> Submit </button>
                {{carsList}}
</div>
})

(Angular)

export class CarListComponent {
                make: String;
                carsList: String;

let cars: Car[] = [{make: “Jeep”, model: “Liberty”, year: 2010}, {make: “Jeep”, model: ”Wrangler”, year: 2002}, {make: “Chevy”, model: “Camaro”, year: 2019);

                onClick() {
                                carsList = “<ul>”;
                                let cars2: Car[]  = cars.filter(car -> { car.make === this.make});
                                cars2.foreach(car -> { returnString += “<li> car.model </li>”} );
                                carsList += “</ul>”;
                                return carsList;
                }
}

(Angular 2)

This code creates an angular component that describes a webpage with an input element and a submit button. The input element allows a user to input the model of car that they want to filter their car list by and then the submit button will initiate the filtering. This example is pretty rudimentary because our list of cars to choose from is defined directly in the component class but it still shows how we can do reactive data manipulation on web pages very easily with declarative methods.

I hope this overview and brief tutorial has been helpful in introducing the concepts of declarative programming and illustrating how these concepts are applicable to Web development.

Leave a Reply

Your email address will not be published.