Vue for React developers

Even though I work primarily in React, during my relatively short career as front-end developer I have sort of built myself a reputation as the guy who looks at other people funny when they want to include an additional 2KB library in a project to do a thing that could be accomplished just as well by clenching your teeth and actually writing a couple of lines of Javascript code yourself. I'm the "go lean" guy, or the "vanilla Javascript" guy or the "our build tools are too complicated, and we don't really need Angular of Electron to display: hello world" guy. 

Indeed, I do believe that the essential skill of a React developer is to know when not to use it. Otherwise, you might find yourself trying to nail boards together with a microscope. So when I was allowed to try Vue, a front-end framework perceived as the lighter, leaner upstart, which is shaking the status quo of the Javascript world, I jumped in headfirst. Here are some things I've found out during my short affair with Vue as a React developer.

Vue isn't that much lighter than React

Even though Vue is often portrayed as lightweight, while the React is supposedly big and clunky, and Angular is an unwieldy behemoth, there's not that much of a difference. Vue is only a couple kilobytes smaller, and the performance of the two frameworks is pretty much on par. There might be some areas where Vue is faster, but React compensates by being more performant in others. So you don't gain that much in terms of weight or performance by using Vue. There go my developer infancy dreams. Angular is still an unwieldy behemoth, though.

React vs. Vue: Using ordinary HTML and CSS in components is both refreshing and a pain

What you do in React

To construct your view in React, you have to use JSX, which is React's way of putting "almost-HTML-but-not-quite" inside Javascript. It's not hard to learn, but it can take some time to get used to, and you'll have to get used to it, as it's the only way. Styles are also loaded and applied in Javascript, and even though you can write and import regular CSS files, the industry standard is using one of several CSS-in-JS solutions, such as styled-components. 

What you do in Vue

In Vue, on the other hand, the standard way is to write normal HTML templates and normal CSS stylesheets. A component in Vue is a single file divided into three parts: one for your HTML template, one for Javascript logic, and one for CSS styles. You have some options here. For example, the CSS part can be marked as scoped, which means the styles will apply only to this specific component. You can also use a variety of preprocessors, like SASS or stylus. 

How it's different

It's nice if you are coming from vanilla Javascript. There's not much new to learn. You do pretty much the same thing you did before, only structured a bit differently. Coming from React, though, it can be surprisingly hard. See, React gives you the entire power of Javascript to use all over your JSX markup and CSS-in-JS stylesheets. You can map through arrays, have multiple elements rendered conditionally with ordinary ternary operators. 

You can use boolean expressions for conditional rendering and template strings for inserting content. In Vue, you just can't. You can achieve the same effects, but you have to learn a special syntax. Where in React you would write something like this:

{isActive && <SomeComponent />}

In Vue you write:

<some-component v-if=”isActive” />

There's a tradeoff: you don't have to learn a weird way of mixing everything in JSX, but you have to learn some special magic to put logic into your rendering. Also, the tooling support (such as linting, type checking, autocompletion) is much weaker. In React, you are just writing Javascript, so the power of modern tooling is yours to command.

The alternative route

That's right. You absolutely can take an alternative route and use CSS-in-JS and all kinds of crazy stuff kids these days love in Vue. Also, not many people are aware that Vue supports render functions and JSX out of the box! So, all that talk about commanding the power of Javascript and modern tools in React? You can do the same in Vue! Now that's pretty cool.

The differences between Vue and React

The documentation is excellent

I've always had trouble finding anything in the official React documentation. It also has the annoying habit of automatically providing me with the localized Polish version. At the same time, I want to read the docs in English, as that's what the entire world uses for programming-related communication. None of that in Vue. Vue documentation is fantastic, I was always able to find everything I needed, and it didn't play "the good uncle" with me regarding languages.

Forms are a breeze

Sooner or later, any React developer feels the pain of dealing with forms in React. I mean, if there are entire libraries dedicated to making handling forms less horrible, something must be wrong. Tools like Formik are nice to use and all, but they shouldn't be necessary in the first place. Handling a form in vanilla Javascript is not that hard, but in React, it's just… let's call it annoying. 

If right now, you are nodding and muttering, "I feel your pain, bro," you'll be happy to hear that Vue handles forms gracefully and with style. You tell it which inputs are bound to which variables, write an onSubmit method, and you're good to go. It's that easy. To me, this is the killer feature of Vue and the reason I'd consider using it over React. It's very refreshing.

Vuex is like MobX with some Redux sprinkled on top

What's with the state management libraries and all the X? Anyway, if you ever used MobX, Vuex will feel familiar. I still have trouble wrapping my head around Redux and its intricacies, so I was happy that with Vuex, I didn't have to do that much head wrapping. You have a store, and change it with "mutations," which are just functions that change state. 

Then in your app, you 'commit' these mutations (which look a bit like dispatching actions). Nothing fancy here, but it's pretty easy to use. Also, Vuex is the officially maintained and supported state management library, something that React leaves to the community. So even if React's ecosystem is much larger, it's also more fragmented.

No concept of immutable component state

Speaking of state - if you are used to React's setState calls or the useState hook, you're in for a surprise: Vue does away with all that and instead allows you just to mutate all data as you please. If you are very functionally-programming-inclined, it might offend you, but to be honest, I haven't noticed any serious downside of this approach. It's just more straightforward and more intuitive.

Upward communication via events

If you use React, you know that passing data upwards in the component tree without using any state management solution is quite clunky. You pretty much have to pass a function as a prop, and the child component has then to call that function, which in turn changes the parent's state in some way and gives you the desired effect. It is unwieldy and also feels like patching your app up with cardboard and bubble gum.

Vue has an explicit solution to this problem: it uses events. The child component emits an event, and then you bind a function to that event in the parent component. It is a much cleaner approach, far more intuitive and making much more sense. 

My view on Vue for React developers

Unsurprisingly, it turns out that both React and Vue have their strengths and weaknesses. I liked some things about Vue (forms!), but also more than once I found myself missing this or that feature from React. There is no clear winner. It's not that Vue is this magical underdog that is just plain better, while React is more widespread due to being maintained by an evil corporation. 

React remains the most popular front-end library for a reason: it's simply very good at what it does, and its weaknesses can easily be compensated. That said, I highly encourage you to give Vue a try. React is very good, but Vue has some great features. If you’d like to know more about it, or discuss a project with us, please write to us: hello@start-up.house