My First Vuexperience

For the last six weeks, I've been developing a web app written with a framework, you've probably heard of — Vue.js.

My feelings about it were mixed initially. I've been seeing this name a lot before but never was curious enough to try to use it for some project. So it was a great opportunity for me.

Interesting

Well there are two interesting parts of what I've seen: keeping all the component in the single file and change detection (aka reactivity)

Single File

My favorite thing in Vue is keeping everything in one file... unlike Angular. And unlike React it's not just script — you have css/scss in the same document as well as an html-like template. And I have to say it: despite the need to learn one more set of condition and cycles, I like this approach more than just js-way in React's jsx... and no, putting template and styles inside the Angular's component decorator is not a good solution ;-))

Change Detection

Didn't go in the internals of Vue, and don't know how performant it is, but from what I've seen in the console, Vue is creating its own getters and setters for each object/array properties. So every time you are pushing something into an array it detects the change and updates the view.

No need to reassign the array or object. No need to call setState() or similar. It just works. Great!

Not So Impressive

Bundle Size

I understand that it's specific to the app I was working on, but the main file — app.js — is over 3 MB. Routes are loaded the asynchronous way. Everything is compiled for production. Probably if I dig deeper I will find the way to split some of the components out (Vuetify for example), but overall it's not what I would expect from a project with 20-30 components and framework like Vue.

Component Object

Every component in Vue is returning a JavaScript object. This object has properties and methods. And this is a mess.

I have no clue why data() is not on the lifecycle hooks list (just between beforeCreate() and created()). And what about the computed property? Logically it should be calculated (first time?) at object init, but what about methods in it, are they evaluated too?

What about the magical and extendable instance properties (like this.$ref)? Some libraries are expanding them (ex: vuex adds this.$store) and if you are not the one who add the extension, then you'll never know it's there.

With Angular and React you also have lifecycle hooks, but the developer sees where everything else is being imported and where to look for additional information.

I understand that after a few application written with Vue, the developer can get used to it. But for me now it looks like a black box and that's not what component logic should look like.

My Conclusion

With a few great ideas and realization like jQuery on steroids, Vue is an option for somebody who wants to invest in it for the long run.

I'll wait a bit. Maybe in the next version, it will be possible to create methods outside the component object. Or their change detection system will be adapted for some of the other frameworks.

For now, I'll spend my free time to Svelte — similar single file per component, not that crazy change detection but much more clean scripts. But the app size is tiny and almost no ecosystem... everything is a compromise ;-))