One of my first tasks during my software engineering internship was to evaluate and select a frontend framework to use for a suite of web applications that the company planned to build. The extent of my web development experience up to this point had been creating simple websites with a little bit of JavaScript embedded, but I only had a vague idea of what a web framework even was. So I started where any good intern would, with some well crafted Google searches like “what is a web framework?” and “which framework is best?”
After learning more about front end frameworks, I narrowed the choice down to Vue.js and React. It seemed like these were both frameworks that had been widely adopted and had a solid base of documentation, third party add-ons and libraries, and active user communities. Both Vue.js and React touted that they took advantage of “declarative rendering”, which sounded great, but I had no idea what that meant and why it was a good thing, so in this blog post I will describe what declarative rendering is and how it can help you as a programmer.
From Wikipedia, declarative programming is “a non-imperative style of programming in which programs describe their desired results without explicitly listing commands or steps that must be performed.” In a declarative web framework, you can create a template describing what the web page should look like, and if the state of the application changes, the page is re-rendered to reflect those changes without you having to write code to explicitly update the DOM.
For example, let’s say we have a simple web page that has a <p> element that displays the number of times a button on the page has been clicked. If we wanted to implement this in an imperative manner, we would attach a listener to the button. If the button is pressed, the listener calls a function to increase the value inside the <p> by one and re-render the page.
If we implemented this page using a declarative manner using Vue.js it might look something like this:
<template>
<p>{{ count }}</p>
<button @submit="increment">Increment</button>
</template>
<script>
export default {
data(){
return {
count: 0
}
},
methods: {
increment: function (){
this.count += 1;
}
}
}
</script>If you are not familiar with Vue, the template contains the HTML/CSS describing what the page should look like along with some Vue directives. The double curly brackets indicate that the value of the count variable should be rendered, and @submit=”increment” means when the button is pressed, the increment method will be called. The script section defines variables and functions. In the declarative model, we define a template of what the page should look like. We tell the browser to make a <p> tag that displays the value of count. When count is incremented, Vue will work behind the scenes to ensure that the page is re-rendered with the updated value of count.
This is a simple example of declarative rendering, but it can be very powerful and once you get the hang of it, your life becomes much easier as a programmer because you don’t have to focus your efforts on explicit instructions to update the DOM.
