Why we are starting with Vue.js now

At our last company meetup, I wanted to show to the team a new idea to improve our user experience in a particular flow. As I started to think how I could pitch this project I quickly saw that I needed much more than a few slides with wireframes. I needed something that they could see first hand and even play with. I needed to get the team excited about building this feature.

I have been watching from the bench the emergence of new popular JS frameworks in the past year or so. Names like React.js, Angular 2, and Vue.js appeared frequently on my twitter feed, weekly email newsletters, and conversations with other colleagues.

I thought this could be a great opportunity to learn more about each of them and build a real prototype for the meetup. Because it's too easy to get distracted by new shiny toys and not building anything useful, I decided to constrain the experiment with the following rules:

• I would look at React.js, Angular 2, and Vue.js. I don't want get distracted with other libraries.
• I would build something more substantial than a "Hello World" example. I want to build something useful towards the prototype.
• I would dedicate no more than two hours to each library. My evaluation points for the trial were:
  • Can I use it along with our current small jQuery/Coffeescript codebase in our existing Rails app?
  • Is it fun for me to write?
  • In two hours, how much progress did I make?

So far, we haven't written heavy Javascript applications at DNSimple. The only exception (because there is always one) is when we launched zone.vision. At the time I was experimenting with Mithrill and decided to use it for this side project and build our first single page application.

This was a couple of years ago. That's like the dinosaur age in the Javascript world, so it was time again to assess our possibilities.

Evaluating the libraries

It's unfair to evaluate a library in two hours. It's not enough time to get intimate and build something interesting with it. It's like pretending to fall in love with someone during a speed-dating night. But, like speed-dating, two hours is enough to know if you'd like to see this person/library again.

Angular 2

Sadly I didn't get too far. I had issues trying to get Angular to work within our Rails app. It seemed that Angular wants to become the owner of the user interface - it does not integrate with our existing ERB files. I couldn't find a way to make them work together. The truth is that I wasn't too excited to work in TypeScript for a simple prototype because that would have been one more thing to learn on top of the library. So I abandoned Angular. I might come back to it at some later point.

React.js

I was happy to take some time to try React. After reading through the react-rails gem instructions, I made my first attempt at a "Hello World". The JSX syntax is strange and sometimes frustrating. It feels like HTML but it's not, and that got me banging my head on the keyboard way too often. I confess that I struggled a bit to simply use conditionals in JSX.

At the end of my couple of hours I had a bit more than a "Hello World". Overall I was happy with the experience and would have continued with React if I hadn't tried Vue.js.

Vue.js

Out of the three libraries, Vue has the best and most approachable documentation.

I was able to drop the library on the default Rails asset pipeline and got a simple "Hello World" working within minutes, which was very encouraging. I am glad I wasn't forced to install anything extra to get started.

At the beginning, errors were cryptic and it took me a few trial-and-error cycles to build something a bit more interesting than "Hello World". Some of our small jQuery/Coffescript widgets would stop working if Vue was attached to an element too high in the DOM. This is because we had special handlebar logic and Vue thought it should/could take over that. The workaround was to narrow the scope of the Vue app to only Vue components.

The idea of Vue components clicked right away and I saw how beneficial it was to start thinking that way.

<welcome message="hello"></welcome>

I like that I was still dealing with HTML and my Vue code was just reacting to data and events on the components. With jQuery, my code had too much familiarity with the DOM. It knew where to hook and insert data or listen to events. With Vue.js I was free of that spaghetti code.

Shortly after, I pasted a jQuery Ajax into a Vue component and got away with it! I could see the idea for my prototype advancing rapidly. Vue.js was letting me focus on what I needed to build.

After 2 hours, I had something very tiny in comparison to what I demoed at the meetup, but I knew right away I wanted to work more with Vue.js.

Conclusion

This post is not here to tell you which Javascript library to use. All of them are very capable tools. In my constrained scenario, I chose the one that help me build the prototype that I was looking to show/sell the team.

With a low barrier of entry, no code transpilation, or adding anything extra to the project, I was able to get the team on board with my proposal.

And personally, I haven't been this excited about the possibilities of writing more Javascript in a long time. We now have at least one Vue.js component in production.

If you are looking for a more in depth comparison, you should have a look at https://vuejs.org/v2/guide/comparison.html.

Share on Twitter and Facebook

Sebastian Hermida

Appreciates the finest things in life: clean code, good illustrations and carrot juice. Someday he will run a marathon.