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?”<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
From Wikipedia<\/a>, 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. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n If we implemented this page using a declarative manner using Vue.js it might look something like this:<\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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,… Continue reading What is a declarative web framework anyway?<\/span><\/a><\/p>\n","protected":false},"author":11930,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/users\/11930"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/posts\/10\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/rudb2\/wp-json\/wp\/v2\/tags?post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<template>\n <p>{{ count }}<\/p>\n <button @submit=\"increment\">Increment<\/button>\n<\/template>\n\n<script>\n export default {\n data(){\n return {\n count: 0\n }\n },\n methods: {\n increment: function (){\n this.count += 1;\n }\n }\n }\n<\/script><\/code><\/pre>\n\n\n\n