Adopting Vue as a React Developer

Hi, In my previous post, I talked about efficiency, and in this post, I’ll talk about my adoption to Vue as a React developer and the problems that I find both frustrating and interesting at the same time.

Religious Choices

Let’s begin with a story of mine. I was comfortable with React but was told to use Vue to build some frontend stuff at my workplace. I didn’t get it and thought

Why the heck would they like to get it written with Vue ? React is so much cool, Don’t they know ?

Anyway, I finished that project. In the end, I got an interesting answer that I never came up with before. The reason of their choice was easy learning curve of Vue.
So, to this problem, solution was quite straightforward, Don’t be religious with solutions you are trying to adopt. May be your favorite solution is not intended for that problem.
But then, I found that I wasn’t alone and this was not the only problem. There exists some problem in the way people around me were writing Vue.

Vue Component Giants

I was given to fix some issues in several projects. Looking through the codebase, I found that the existing components where so huge that good luck remembering template block when you scrolled to script block.

I can understand the pain. Those who were given the task to write those components were so in hurry that they ended up writing everything in a few components instead of breaking things apart but the sad part was that they made it their habit despite of knowing that it will cost a lot more time and a lot of merge conflicts to solve the mess they created and add features or bug fixes.

Write giant components when you are in hurry but try breaking them apart progressively so that you and your fellow developers don’t have to bang their head against wall understanding your giant components when they should be busy fixing bugs or developing new features.

There is npm for that

I found a very strange but common pattern of doing npm installs for every tiny thing. I mean it’s not good to rewrite everything but refusing to write a single line of JavaScript and adding yet another dependency in your already big bundle size is not good either when you are working in a team. The easy availability of Vue plugins is the reason why this pattern in very common among those writing Vue. One colleague of mine literally asked me If she can write JavaScript inside templates.
Write JavaScript when possible so that you don’t end up bloating your bundle size just because your where lazy and used some unnecessary plugin for a single feature of it. Keeping a utils or helpers folder for that is always a good idea.

Spaghetti Code

Since Vue is relatively easy to adopt, newcomers end up writing so much of spaghetti code. When we work in a team, we end up maintaining and reviewing code of others and for some of us it feels like, this crap certainly needs to be rewritten. If you feel that way, think about the effort it will take and new problems you will introduce. Things can be refactored progressively and that’s a much better way.

Vue for React guys

Some of those who write React hate Vue. I was one of them but I ain’t anymore. The primary reason of this hate to Vue among React developer is the way they think reactivity works. In Vue, the reactivity is achieved in a natural way, for example, pushing some elements to an array triggers reactivity due to the observer attached with it.

Choosing right tools

Some of us have trouble with tooling, and don’t even think about configuring webpack yourself if you are a newcomer. Going with latest official cli tooling for whatever framework you are using is always the right choice unless you want your most of the time to be spent configuring tooling for your project instead of writing actual business logic.

I forgot the history

I asked a promise and async/await freak to write callbacks and he failed. I’ve encountered a try block without catch and comparing truty values with true and falsy values with false inside conditional statements. It looks like some of us have forgotten how to write basic JavaScript in the chase of working with newer syntax and latest features, most of which is built upon the older features. If you are one of those, be warned about the consequences.

Happy Koding.

Be the first to comment

Leave a Reply