I know you probably tell yourself: “Yet another post on Why we chose Vue.js”. But don’t leave now. I think posts like this are important for the startups that struggle to choose between technologies especially in the web development world.

When I started to work for Phytochemia , I faced a big challenge: combining IT with Chemistry. Basically, I was mandated to rewrite a web application initially developed by a chemist with coding knowledge. The project motivated me a lot and the most interesting point was that I had carte blanche, I could use any technologies.

For the back-end, It was easy to choose the best technologies according to the current and future needs. But when it came to choosing the front-end, it was another story.

My front-end struggle

The first “working” prototype was a classic server side rendering + JQuery for the dynamic parts (AJAX, DOM manipulations). For example adding options dynamically to a select element using JQuery.

JQuery version of adding options to a select

Not so frustrating but I don’t want to manipulate the DOM by myself and if I change something in the HTML, I can break everything.

As the project became larger and complex, my JQuery setup gave me more frustrations than productivity. So I decided to go with the flow and use a real front-end library to improve my productivity. In the past years, I had the chance to try some popular front-end libraries such Angular and React.

I didn’t consider Angular for this project because we didn’t plan to make a big SPA (Single page application) and the learning curve was bigger than the alternatives. Then there was React with a more realistic learning curve and a nice ecosystem but the JSX turned me off.

If you want a more detailed comparison, I encourage you to go and read the following link:

My discovery of Vue.js

I had already heard about Vue.js but I never took the time to play with it. So one day I decided to give it a try for a little application. For example I will make a Vue.js version of the previous JQuery example.

Vue.js version of adding options to a select

The Vue.js version is more simple and easy to change if needed.

To be honest with you, I fell in love with Vue.js ❤️ and it rekindled my love for the front-end again. It took me an afternoon to learn the basics of Vue.js and to develop my little application. My first thought was to rewrite everything with Vue.js, something that I didn’t do immediately. But I still took the time to rewrite the core feature of the web application in order to improve performances. That’s how I discovered more power with Vue.

So why Vue.js after all?

What makes Vue.js so attractive? First, its simplicity like I said. In only one afternoon I managed to learn the library and develop something which is still in production now. As a matter of learning curve, I think it is reasonable.

Second would be its flexibility: there are 7 ways to define a component template with Vue.js. Some people would say that this is too much and that it can lead to more confusion than necessary but in my opinion, these 7 ways simply add more possibilities for the library. Keep in mind that you are not forced to use all of them. This brings me to my next point: the Single File Components (SFC).

The SFC are my favorite feature of Vue.js and according to me one of the most powerful one. With SFC you can put in a single file the HTML, Javascript and CSS of a component so you can use the advantages of each language without having to separate the logic between multiple files. Those files have the .vue extension. The only downside is that you need to use a module bundler such Webpack or Browserify.

However, the Vue.js documentation is awesome and will help you to setup the webpack configuration which is not too complex after all. Furthermore, the documentation was another reason why I chose Vue.js. The documentation is very well explain and easy to navigate within. There are guides, API reference and examples everything that you will need to work with Vue.js.

In summary

Among the large variety of possibilities that the front-end world has to offer to us, Vue.js turned out to be a revelation for me in term of functionalities and learning curve. I think that React and Angular are still good choices too, but unfortunately they didn’t meet our requirements.

I’m really satisfied of my choice to go with Vue.js. Since my beginning with this awesome library, I continue to love it a little more every day. Moreover, next thing that might be of interest would be Vuex the state management pattern library for Vue.js applications.

Here are some interesting links about Vue.js

Give it a try you won’t regret it!