Mistral logo

My Experience With Vue.js Or How Vue.js Makes Perfectionists Happy

10.08.2018 - READING TIME: 5 minutes

My Experience With Vue.js Or How Vue.js Makes Perfectionists Happy

Author: Dalila Avdukić

 

Are you familiar with that oddly satisfying feeling when you finish a perfectly readable and understandable piece of code and it works just as you’ve imagined it would?

If your answer to this is yes, then you are probably a perfectionist at heart, as many software developers I know are.

Unfortunately, I am no exception to that rule. And while being a perfectionist sounds good in theory or on your resume, anyone who identifies with this word and has ever worked with Javascript frameworks before knows that being a perfectionist can drive you crazy sometimes. I have been there countless times.

If you have been using different JavaScript frameworks recently then you’ll know how incredibly rare of an occurrence that oddly satisfying piece of code can become as your project grows bigger and bigger. Well, I can tell you: not anymore.

About a year ago, when I was told I will be moving to a new project and using Vue for front-end development, my excitement and enthusiasm about it kept in check. I thought it would just be another JavaScript framework I will handle and learn to use.

However, Vue turned out to be so much more than I expected. So let us dive into the main reasons why I, as a perfectionist, enjoyed working with Vue.js so much.

The Learning Curve

As this was my first encounter with Vue.js, the first thing I obviously had to do was get familiar with the basics of it. Right from the start, what hit me was the incredibly short learning curve. Assuming you have some experience with JS frameworks, Vue allows you to dive into code right away, after watching just a few very basic tutorials or diving right into the official documentation (whatever you prefer). As perfectionists usually expect to excel at everything they do right from the start, this was a feature that made me greatly enthusiastic about each new working day I knew I would spend developing something using this framework. The question marks above my head I usually encounter on my first attempts with new frameworks were completely left out here. After getting a grasp of the basic concepts, all I needed for our project was the official documentation, which leads us to the next point.

Documentation

Vue’s documentation can be described with two words: pure delight!
Just browsing casually through the page gives you the sense that a fellow perfectionist stands behind this work.

The documentation is incredibly well organized. It gives clear and relevant examples and clearly communicates possible pitfalls and caveats to the developer. Such documentation completely rids you of the tiring and sometimes pointless search for solutions and explanations through Google or Stackoverflow.

Throughout the whole time on this project, the documentation always provided me with all the answers I needed. It leaves you with no doubt about what is the correct and the best way to implement the feature you are working on, which makes the perfectionist in me jump through the roof with happiness.

Freedom

The next incredible thing that Vue offers you in your coding experience with it is the freedom to organize your code, as you like (and as your level of perfectionism sees it fit :P).

Components are at the heart of it all, and it is completely up to you how you will break your application down into components and how you will structure your project to hold all the pieces together. Components are extremely easy to create, add and use, without worrying about adding and declaring them at several different locations in your code. This removes unnecessary boilerplate code whenever you want to create a new component, which you do regularly. For me, this meant having the opportunity to reorganize my code quickly whenever I felt a component was growing too big.

Restructuring the project and moving files around to make the code more organized is easily achievable with a framework like this, as moving a file and adding new folders does not break the application in a hundred different places.

This was extremely important to me, as I had the opportunity to regularly improve the structure of the project, rather than being obliged to stick to a structure that seemed good enough at the early stages of the project but proved not to be the best fit when things got more complicated. As a perfectionist, I felt the frustration of not having this opportunity when working with other frameworks.

However, with Vue, I could always look back at the end of the day and say “I like what this looks like”, without having the lingering feeling of thinking “If I could have just moved this somewhere else as well, it would be perfect.”

Readable and Organized Code

The last point I want to emphasize as a highlight when working with Vue is actually a result of all the above-mentioned points. The short learning curve together with the incredible documentation and the freedom to reorganize your code allows you to quickly get into writing readable and well-organized code.

One feature I personally enjoyed is the ability to write HTML, JavaScript and CSS for a single component in one file. This is not something you have to make use of, but I found it is the best way to keep components concise, organized and easy to come back to later on.

Other honorable mentions that contribute to readable and well-organized code are filters, directives, and mixins, which again are all easy to create, add and use. They all allow you to reuse code easily.

State management makes a big contribution to the readable code and is enabled through Vuex. Vue’s freedom plays a big role here, as it gives you the opportunity to use Vuex only where it fits, rather than being obliged to use it for all data in a component. This really helps in separation of concerns and keeping the components decoupled from each other. Each component is concerned only with data that is of value to it, while Vuex comes into play and shines when it is necessary.

Vuex deserves a complete article on its own, but it fills out all the checkpoints of Vue as well: the learning curve, incredible documentation, and freedom to organize your code.

Ultimately, all these mentioned points made using Vue incredibly intuitive for me. I, as a perfectionist, find working with intuitive tools the most enjoyable. It gives you the feeling of implementing features in the best possible way without wondering about technicalities too much. This enables you to focus on the feature itself rather than wondering if you got a good grasp of the framework you are using.

If you are looking for a comparison of Vue with a framework you are currently using, the official documentation offers a good overview of how Vue compares to other JavaScript frameworks at the following link.

In sum, regardless of the fact that you might want to consider talking to a psychologist about your perfectionism as I have done :), I do hope the incredible ease and enjoyment Vue brought to my work and this short summary of its main advantages will inspire you to give it a try yourself.