Why we chose Vue.js and it’s awesome

Let me explain you why we chose Vue.js over React here at Muxu.Muxu, and why it’s awesome.

A little context

Vue.js is a JavaScript framework for creating single page apps (SPAs). SPAs are all the rage right now, and for good reason. They allow for a more fluid and responsive user experience by loading a single HTML page that dynamically updates as the user interacts. The use of AJAX and HTML5 in this way means that much of the work is done client-side, removing the need for constant page reloads. More interactivity means more JavaScript, so it’s important that your code is well-organised and easily testable. This is where JavaScript frameworks come in.

There’s lots of choice out there — Vue.js, Angular, React, Meteor, Ember.js to name a few. Each has its unique selling points. I’m going to go to explain how we implement Vue.js at Muxu.Muxu, and why it is our framework of choice.

First, a brief intro to Vue.js. Vue.js was built by Evan You in 2014 after he worked for Google, using Angular. His aim was to build a lightweight framework, based on all the parts he particularly liked about Angular. Vue.js’ features include:

• components to extend HTML elements;
• simple and intuitive state management of models for greater reactivity;
• a variety of way to apply transition effects when items are updated in the DOM;
• hot reloading of DOM elements.

That’s all well and good, but put like that it’s quite abstract. So how do we implement this framework at Muxu.Muxu?

Our implementation

We use Nuxt.js which is a framework based on Vue.js. It enables server-side rendering of HTML. This means that the client (the browser) isn’t responsible for fetching content, which can often be slow. The user isn’t faced with a ‘loading’ screen whilst the content is retrieved. Whilst this might not be a problem for SaaS sites, here at Muxu.Muxu we mostly generate landing pages. So if the user — and potential customer — is waiting for content to load, that’s a problem.

Thanks to this server-side rendering, Vue.js is also better optimised for SEO — again, an important point for landing pages. Furthermore, we are able to display content translated in the user’s language, by using the HTTP header accept-language. Rendering everything server-side is a way around the problem of certain browsers not supporting JavaScript — although that is increasingly less of an issue.

Why Vue.js?

We based our choice to use Vue.js on a number of factors.

It’s super fast.

It’s reactive. It combines the best features of other frameworks such as React, and offers a virtual DOM that listens for changes and re-renders only the elements that need re-rendering.

It’s well-document. This is key — I wasn’t able to find any React or Angular documentation that is as clear as the documentation provided by Vue.js. This made it easy to learn. For all of the developers at Muxu.Muxu, whether junior or more-experienced, the documentation is really our bible. Vue.js is also easy to set up, with a CLI that provides everything you need to get started building a single page app. That’s a key takeaway from our experience — you really can get started in just a few minutes.

Of course, getting the most of any framework is a never-ending saga for any developer. The devtools in Chrome and Firefox make debugging way easier. Plus, the community is growing, which is an important factor that reduces the learning curve — unless you already know how to tackle every problem you might encounter !

Vue.js and React share the same concepts, router, state, components etc. I have no doubt a React developer can easily understand a Vue.js project, and vice versa. That’s why when recruiting, we are open to both profiles.

As with many types of JavaScript applications, scalability can be an issue. As it happens, we prefer to break up our larger applications into several smaller applications, so Vue.Js suits our needs perfectly.

Competitors

React is a key competitor, and you may be wondering how Vue.Js compares. I found Vue.js to be better documented and thus easier to get to grips with. Historically there is a sprawling jungle of information available related to JavaScript. You can find sophisticated, thoroughly documented libraries — but of course the opposite is completely true too. To be able to separate the good from the bad, and to be able to usefully apply the better resources, you need to understand every part of your code. Good documentation helps enormously with this.

Over to you

It’s interesting to note that some big names have also opted for Vue.Js over other frameworks, including GitLab, Alibaba, Wizzair and Euronews. One thing that all JavaScript frameworks have in common is their common goal of helping you make great applications. I have given you some insight into our use of Vue.js so that you can decide if this framework could suit your needs, and envisage how you might implement this lightweight, reactive, simple framework in your own apps.

Next time we’ll talk about integrating Contentful with a Vue app, which is a very powerful CMS that lets your clients build their own pages.

Article translated with the help of the amazing Emily Fiennes ✨