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
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.
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.
3) Increase Development Speed. You don’t need the terminal.
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.