Member preview

Why I chose Vue.js over React

In the middle of 2015 I was working together with Zack Katz on the GravityView plugin and we knew we needed to improve the user experience configuring a view in the WordPress admin.

We developed a very fancy drag-n-drop interface where the user was able to pick some Gravity Forms fields and build a table or a list view with the form entries. We shipped this interface with the first plugin version all done with jQuery and jQuery UI. Unfortunately, the JavaScript file was big enough to make me start sweating as soon as I needed to dive in for some bug fixing and it was almost impossible to add new features without breaking anything.

jQuery was not an option anymore…

So I proposed we use a modern JS framework. By the time React was starting to gain some momentum among WordPress folks, so it made sense to try it.

At that time I was really fresh with vanilla JavaScript, I didn’t know anything about NPM, bundlers or transpiling, and React was completely new to me.

I started to experiment rewriting the existing GravityView admin interface using React.

Oh god, it was really hard.

One of the first things I dealt with was JSX and all the new world of this pseudo HTML flavor. With JSX came the need to use Webpack or browserify, and then Babel and a bunch of other modules to bundle some working code.

I failed. I didn’t have time to learn and master all this new JS paraphernalia and I abandoned the new interface project.

One year later, during the ECO newspaper project I was assigned to develop the comments interface. My first approach was to use jQuery, but I soon realized it would be very hard to achieve the design and the needed interactivity.

Vue reminds me aurora lights! — Photo by Federico Bottos on Unsplash

And so I started exploring Vue.js... I was able to Hello World in a couple of minutes! Awesome!

It was incredible easy to start writing some useful code.

One of the selling points of Vue.js is how approachable it is.

Already know HTML, CSS and JavaScript? Read the guide and start building things in no time! ~

And I agree! You only need to know HTML, CSS and a little bit of JavaScript and you are able to start building.

No build systems and…no JSX.

For the first projects using Vue.js I combined its directives with HTML on my WordPress PHP templates. I knew it was not ideal but one day I could improve it.

<div class="search-result-item" v-for="cell in list" v-cloak>
<h2>{{ cell.title.rendered }}</h2>
<p v-html="cell.excerpt"></p>

Yeah, I know…Very ugly…But at least I was able to deliver something.

The official documentation was/is really clear and easy to follow and I soon realized it was my main source of information to learn more about Vue.js and overcome some of the day-to-day obstacles.

Vue.js is also very flexible. For my first projects I could completely replace jQuery and all the jQuery libraries by finding their counterparts at Awesome Vue.js repository.

My urge to know more about Vue.js made me enroll in one Udemy course. Soon things like single-file components, mixins, Vue Router and Vuex became part of my development process.

From that point onward I built my own image carousel as a Vue mixin, and all kinds of frontend UI components like tabs, accordions, interactive lists with tons of filters… Suddenly I was no longer dependent on 3rd party JS libraries, some of them not actively maintained, for trivial UI things.

Some people say the React community is bigger and because of that you have more modules available covering all kinds of aspects. Yes, React’s ecosystem is bigger but Vue’s is big enough. Having more modules available is not per se a game changer for my own development process since I always try to deliver my own solutions for the sake of keeping some kind of control over the code.

I chose Vue.js over React because it doesn’t force the use of JSX, although you may use it. Templates are HTML based on very intuitive DSL directives. It’s easy to start and progress and documentation is awesome. Vuex and Vue Router are part of the Vue.js suite and the Single File Components structure makes total sense to me.

But the most important thing is that it gives me the tools, the joy and the freedom to address most of the UI challenges by myself.

A final note to recommend you a great presentation about Vue.js which covers the basics of Vue.js syntax, Vue Router, Vuex and testing.

Christoffer Noring uncovers why the adoption rate for Vue.js is through the roof and what makes it so great. He also looks at building professional apps in terms of which tools to use, how to test them and what libraries will empower you.