Vue is a great JavaScript framework for designers

Monday, 25 September 2017

I am building something for the web (a big countdown timer) and found out about a JavaScript framework that is great for a designer who does not really know what they are doing (me). The framework is Vue.js and this post is about why I think Vue is the best, even for some people who do know what they are doing.

VueJS logo
The Vue logo, because what other image could I add to this post.

How I know that other framework should are for me

A few years ago, I started building a little web app and never really finished it. After having messed around before with JQuery, I learned there are better ways too to do web programming. JavaScript frameworks were emerging like everywhere, but the one that looked good to me at the time was AngularJS. It is also called Angular 1, not to be confused with Angular, which actually is Angular 2. I did a course on Code School that I enjoyed very much and learned some cool concepts like two-way binding and how to make components in a reusable way.

Then I learned about the second big version of Angular coming out some time soon and things being very different there. So instead of spending more time learning Angular 1, I postponed doing more work on my side project and waited for that nice, better and easier Angular 2. It turned out that 2 was very different from 1. Despite making it open source, the Google team behind Angular decided to basically throw Angular 1 out of the window and start something completely new with no backward compatibility, under the same name nonetheless. That meant I would have to basically learn everything new. I did not find that very attractive, considering the same could happen when (if) Angular 3 comes out.

In the meantime, many developers fell totally in love with ReactJS. Now I am not saying it is not great and everything, but I think most will agree that React is relatively complex. After an introductory presentation of one of my developer coworkers, I thought if I were to learn another framework, React would be it. I never felt like I had the time to start a course on it and did not know how to start using it without one. So again, for a long time I did not work on my app.

Then there were rumors about the React license having a weird clause, allowing Facebook to be able to retract it as soon as you’re considered a competitor. Now I am still not sure if that was a correct interpretation and it does not matter anymore. Facebook is about to change the license and make React proper open source.

But a few months ago, I did not know that and because the React learning curve is so steep, I was glad to have an additional reason not to learn React. Also, I dislike Facebook as a company more and more and would not mind not being dependent on them for anything.

So there I was, willing to learn something new, with finally some occasional free hours of time. React and Angular no longer of my interest I started comparing other frameworks. So that was when I found Vue.js. In English it is pronounced ‘view’, but I prefer the French variant, because it’s a French word and only Tim Cook calls the iPhone X ‘iPhone 10’. Just saying. I spent a couple of evenings with Laracasts’ free course and was good to go!

Why Vue is so nice

A couple of weeks into making my app, I have no regrets of my decision. Here is what is so nice about Vue:

  • Vue is easy to learn as I mentioned. This is important because I don't do many programming projects. When I learn how to solve a problem, it may very well be the last time I have to solve such a problem, so it better be fast.
  • Vue has many, if not all of the features that Angular has. At least all the ones I understand. It also has a shadow DOM like React (developed seem to care about that, but I still do not know how what that really means).
  • Vue does not have all kinds of funny concepts. It has data, functions and components. Compare that with AngularJS's 'directives' and controllers. I still could not explain the exact differences between those!
  • Vue's syntax is straightforward, basically JavaScript objects. Vue components are easy to interpret for anyone who knows a bit of HTML (actually, the same goes for Angular, but that does not make it not true).
  • Vue does not require build tools. Angular and React apps are written in typescript, which requires a script to turn it into JavaScript that browsers understand (building). I know there are some benefits to that, but I just want to make things quickly, before I decide they are worth doing it properly. The more tools a project needs, the more time I need setting it up. With Vue, you can use typescript, ES6 and whatever build tool you want, but you do not have to.
  • It is free and has a great open source community behind it. This reduces the possibility something will happen like with AngularJS, where Google decided to basically stop development and create something new and call it Angular.
  • There are enough users for it to have a large plugin building community. Now some plugins do actually require building, but it is nothing like Angular where you have the option to make things without typescript, but all examples and courses use typescript.

Alright, that is all. There are also all kinds of technical reasons why Vue is great and powerful, but I am not the person to write about that. If you are a designer or collaborate closely with a designer, I hope it helps picking the framework for your next project: Vue.