10.08.2018 - READING TIME: 5 minutes
My Experience With Vue.js Or How Vue.js Makes Perfectionists Happy
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.
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.
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.
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.
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.”
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.
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.
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.