One of the biggest advantages in React is the use of Declarative Programming. Compared to the more verbose and detailed imperative code of Javascript, React works efficiently by abstracting the control flow. This means that under the hood, the React program is able to work through the logic it is provided by the user in order to render the UI. Coding in react becomes more concise and easier to work with compared to plain Javascript.
React uses JSX, which is an HTML and Javascript hybrid which looks a lot lie HTML. JSX is a syntax extension of Javascript which allows programmers to render what they want efficiently, especially when creating complex, dynamic applications. JSX is declarative programming. It allows the user to program what they want while leaving React to work “behind the scenes”. When I started learning React, I thought declarative programming was just a process of using inherent code built into a program in order to produce the UI I wanted (i.e., using someone else’s code to code what I want). Functionally, this is the case, but “under the hood” it is clearly more complex.
While using JSX we are taking advantage of identifiers built into certain JSX tags which are compiled into standard Javascript. That JSX is element then uses state in order to render and manipulate the DOM. While it is easier for the user to code what they want and have it rendered to the DOM, there is a more sophisticated mathematical foundation underlying declarative programs compared to imperative programs. With this foundation we are trading off some performance in order to gain ease of use.
So how is declarative programming different from the imperative coding I first learned in Javascript? Beyond abstracting away some of the complexity, declarative programming is a is defined by domain specific languages, logic languages and functional programming. Essentially that means that instead of using loops and bodies that compare and state-keep, we are using models that do that work for us. For an example we can think of a standard JavaScript for loop which iterates over an array. It is typically going to be longer than declarative algorithms but it is likely to be faster. However, we are explicitly declaring steps when we write
for (let i = 0; i < array . length; i++)
We also need to determine what the function returns and explicitly state it.
Using a declarative approach, we would instead use a function including reduce function or something along these lines:
target. every ( element => array . includes (element))
When coding in a declarative style, like the one React uses, it seems more intuitive to the user. It seems more abstracted to be able to code in English and decipher what an algorithm is doing just by reading the words which are typically named appropriately. That is one of the best features of declarative programming. The readability of declarative programming makes working in, and learning languages that support it so much easier and more joyful to use. Making the transition from imperative coding to declarative coding seems like a more fluid and enjoyable experience when you are building out front end applications with languages such as React.
More complex advantages also include optimization possibilities. Because there is not an explicit set of instructions to follow, your computer is able to execute tasks in parallel. An example of this is SQL database which lets you display a query you are executing vs the one that was asked to execute. So, in a way, there is a tradeoff on performance vs ease of use but there is also an advantage in letting your computer optimize how it runs afterwards. Declarative programming allows user to write out the logic of software without describing the flow.
Declarative programming was introduced early when I was learning React. I have learned that React relies on more complex mathematical foundations in order to provide its users with ease and functionality. My interest and research in React and declarative programming has shown me the importance of learning about what is happening “under the hood”. I am curious to learn and explore some more of the foundational underpinnings which allow React to be such fun program to code in.
Languages such as Ruby which I have used as a backend language and for algorithms is another example of the advantages of declarative programming. Ruby tends to be well loved in part because of the simplicity of the syntax, and the readability of the language.
