Want to get things done and ship? 3 reasons to choose Vue over React in 2018.
I’ve had the privilege to use both Vue and React in previous freelance projects I’ve worked on. They’re both UI libraries designed to solve the problem of state management on the front-end. But, here’s why I decided to go with Vue instead of React for a recent redesign and 3 reasons why you should too if you want to be more productive.
After the team at RemoteLeads and I redesigned the payment page for Sponsored Jobs, we talked about going with React or Vue.js for the implementation. We ultimately chose Vue.js and after dozens of commits and iterations, we’ve released it publicly. You can check it out here.
Why Vue over React? To put it bluntly, it’s much easier to get started on an idea and iterate on it with Vue than it is with React. Here are 3 reasons why we chose it. Before diving in though, I want to start with a preface on a philosophy that I follow for building out website UIs quickly.
Interface First — building interfaces flexibly and fast.
In Basecamp’s free and inspirational book Getting Real, they have a chapter called Interface First. They describe programming as being the heaviest part of creating software. Paper sketches and even HTML / CSS are relatively cheap and quick to change, but code takes time to change.
Design the interface before you start programming. Too many apps start with a program-first mentality. That’s a bad idea. Programming is the heaviest component of building an app, meaning it’s the most expensive and hardest to change. Instead, start by designing first.
If you dive into programming first it’s really easy to lock yourself in. Not only from a technical standpoint but also from a psychological one. You start thinking, “Well, I wrote all of this code…” and once you get yourself into that frame of thinking you lose your flexibility. If you’re thinking you have something to lose right from the beginning, you’ve already lost before you’ve started.
React encourages a Program-First mentality
With React, you immediately start with a program-first mentality. How? The following tweet explains it perfectly.
Right from the beginning, I’m worried about everything I have to set up in my terminal. I’m configuring Webpack, JSX, and Babel to get ES6 to compile right. I can’t forget to npm install.
Not to sound obnoxious, but focus ends up on the technicalities instead of your idea right from the beginning. You get locked in and everything becomes heavy even before you’ve started. You start thinking, “Am I doing this the React-way?”
Vue embraces an Interface-First mentality
Vue, on the other hand, embraces just the opposite. Here’s the first thing you see on their docs. They embrace starting simply and iterating on your idea first before thinking about the technology too much.
At RemoteLeads we want to move fast and break things. Who knows if the first version will work? We didn’t even think about what library to use to build the payment page until after the redesign was done. Vue.js was an afterthought for us. And that’s exactly why we chose it.
The following reasons are why it’s much easier to embrace the principals laid out by Basecamp in Getting Real with Vue.js and actually start shipping stuff to production.
1) You can focus on the HTML and CSS first.
HTML and CSS are the heart and soul of everything on the web. That’s what people see on the page. And the good thing is that they’re both easily changed.
The beauty of Vue is that you don’t need any fancy setup right from the start to be productive and ship something quickly.
React has a backward way of thinking. You tend to start on the functionality first instead of styling out the page. You start with the javascript file and JSX. Right from the beginning, you’re worrying about compiling JSX. This makes sense for a monolith app like Facebook, but what about when you’re trying to ship something? I hear some people say you don’t need JSX, but why is the first example on React’s homepage using JSX?
2) Enter the program-mentality when it’s necessary. Add functionality after the HTML and CSS are done.
Vue.js was an afterthought for us. We knew we could add it in after we finished the HTML and CSS.
You go in and start adding directives into your already constructed HTML and CSS. Building out functionality this way lets you move fast because you’re building things up step by step. First the HTML, then the CSS, then the UI-related Javascript, and then making the Ajax calls, and so forth.
3) Increase Development Speed. You don’t need the terminal.
How much time is being wasted setting up Webpack that could be used to iterate on an idea? A lot of developers can relate to this one. I come from an HTML / CSS background. I started with HTML / CSS and then transitioned into Javascript and jQuery. That’s what I’m familiar with as a front-end developer. I understand JSX’s utility, but it serves no purpose but to overcomplicate development in the beginning. Want to get things done? Use Vue.js
Conclusion: Use what lets you move fast
Don’t feel pressured to use the latest technology to bring your idea to life. Use what works for you. Use what lets you move fast. For us, that’s Vue. It might work for you too.
