As a developer here at Fabled Solutions, one of my favourite things to do is write code that can be used across many different applications. Writing reusable code makes it more valuable as it saves a considerable amount of time and effort while building other, later projects. Those are the main reasons why I have fallen in love with frontend frameworks.
I know there are a lot of frontend frameworks out there — Angular, Ember.js, React, and Vue.js just to name some of the more popular ones — but I’ve come to appreciate Vue the most. To be fair, I have also worked with Vue the most, so this article is more of an opinion piece to convince you to use Vue for your next project.
Why use a frontend framework?
There are a lot of reasons to use a frontend framework. The biggest one for me, as I’m sure you have already guessed, is reusability. A common concept that frameworks share is components. These are small, self-contained pieces of code that can easily be used to render content to a webpage. For example, I could create a navigation bar as a component and add it to any page I want a navigation bar on by simply using the custom HTML entity that relates to that component (e.g.
). The framework then replaces that single tag with all the complicated HTML that I have written in the component itself. Depending on the way the component is built, it can even be transferred to another project.
Vue makes transferring your components to other projects really simple. Vue uses the concept of plugins to make global components and functions even easier to use. I mostly use plugins for very general HTML such as building a table or creating a modal, however, the community has a large variety of plugins with which you can use to build an entire website.
Data-driven rendering just works
Frameworks also take a data-driven approach to rendering. This means that the data on the javascript side of things determines what is displayed on the HTML side of things. This is a huge bonus for web pages that have a lot of interaction built in. With a framework, you can forget having to check that the data on the backend is actually in sync with what is being displayed in the HTML. Frameworks do all the heavy lifting for you.
Vue’s data-driven approach is also very easy to read and understand. Vue has a custom file type (.vue) that moves components into their own file. These Vue template files put all your HTML, JavaScript and CSS for a component into a single file. The HTML is even written as normal HTML, so there is no need for a render function or having a bunch of javascript mixed in with your HTML. This alone puts Vue above the other frameworks in my opinion.
Why Use Vue?
I have already stated a few reasons why I think Vue is a good choice for a frontend framework, but I want to bring up few other points on Vue. First off, Vue is very easy to learn. If you are using Vue template files you simply need to know basic HTML, JavaScript and CSS. There is no need to learn the complexities of JSX syntax or the more complex API syntax that some of the other frameworks require.
Vue is also very small when compiled. Even though Vue does a lot of the heavy lifting for you, it doesn’t take up a lot of space. In the world of web, where page speed is everything, this is great news. Unfortunately, with frameworks, everything is rendered using javascript so scrapers and bots may have a tough time getting info from your page. There are other packages that can help with rendering the page completely before it even leaves the server. If you want more information on these packages, take a look at this awesome blog by Anthony Gore about server-side rendering Vue with Laravel. The Vue core team has also put together a guide to server-side Vue rendering.
