React vs Vue.JS: Which Front-end Framework to Choose in 2018
--
The number of JavaScript frameworks grows every year. In fact, there are some many of them now that even front-end developers themselves lost count. Some people may say that such abundance is an advantage. However, there is also a negative side to having so many frameworks to choose from, especially for software houses. Why?
Every time you start working on a new project, you face the dilemma: should you go for the latest and greatest or stick to the good old stack of technologies?
The second option will undoubtedly be more time-saving since you’ve already had experience in working with this or that framework (plus, you don’t need to turn the Internet upside down in search of documentation, which you also already have).
On the other hand, there is your desire to be ahead of the tech curve. After all, if you’re not following the trends, you’re as good as done in today’s extremely competitive market.
So what should you go for? In this article, we’ll briefly consider the status quo in the world of modern JavaScript frameworks, comparing React and Vue.JS, which are among today’s most popular front-end technologies.
But before we dive in, please check out our newly released landing page about our mobile app development expertise:
And now — let’s go!
A bit of statistics
On the chart above, you can see that most of the front-end folks give their favor to React. What’s interesting here is that React is favored not only by those who have already used the framework, but also by those who are even considering using it. If you look at the statistics on Angular.JS, however, things are far from being great. More than half of the people who have used the framework wouldn’t want to go back.
In the meantime, Vue.JS is snapping at React’s heels. However, despite its recent popularity, a solid part of the front-end developers who have heard of the framework, have little interest in applying it in practice. The reason for this is quite prosaic. When you’ve handpicked your own stack of technologies and been using it for a while, you’re less likely to switch to some other framework every year.
Sometimes, though, you don’t have the luxury of choosing between several options. For example, when you receive a project with legacy code to work on. In such case, there is no other way but to content with what you have.
Another important thing to mention is that a lot of websites are still using jQuery. I’m not saying that it’s bad or something since it’s impossible to overrate the contribution that jQuery has made into web development.
Nonetheless, implementing certain tasks with jQuery is nothing but painful and time-consuming. Today, it’s obvious that some things would look more elegant had they been written using modern technologies.
Let’s have a look at the most popular frameworks according to GitHub statistics.
Based on this graph, you can see that Vue.JS is rapidly gaining popularity despite being pretty “young” both in terms of wide application and community. Likes is one thing, but real contributions is totally different. In other words, the more complex an application is, there more difficult it is to choose the right technology for it. From a more general perspective, this may become a major challenge, slowing down the development of the project.
While React was strengthening its positions, another framework, which I’ve mentioned earlier, emerged. Vue.JS was gaining popularity, so we decided to give it a try. It didn’t take us a while to acknowledge the flexibility and convenience of Vue.JS As a result, I’ve decided to compare React and Vue.JS to figure out their differences and specifics.
If you prefer using templates…
You should definitely go for Vue.JS. Similar to Angular, Vue.JS uses double braces for expressing data binding while directive (special html attributes) are used for adding functionality to a template. Such templates are much easier to work with. Let’s have a look at a simple code sample. The task is to store the value of the input field in state.
React:
Vue.JS:
You can see that Vue.JS is much more simple and easy-to-understand (at least for those who worked with neither React or Vue.JS). Moreover, the code sample written in Vue.JS is basically ES5, which means it works perfectly without “babel” as opposed to the sample in React, which uses ES6.
Taken from https://npm-stat.com/
If you need a big ecosystem…
Your choice is React. No surprises here. Being the most popular front-end framework automatically makes it the biggest one in terms of ecosystem. This means you can find more articles, tutorials, guides, and, more importantly, coverage on StackOverflow.
Additionally, React comes with a whole bunch of extensions and tools, which can save your time and effort while working on a project.
Enough with the lyrics. It’s time for some practical examples.
Project “RBMalta”
One of the tasks on the project was to create a page with a map. The map was also supposed to have markers, a set of various filters, and an area for displaying the results of applying filters.
On paper, the task looked like nothing but a piece of cake. However, when we started working on the task, it turned out to be trickier than we expected. This was due to a big number of overlapping interactions. Most of them were filters, which changed depending on certain factors. Need I to say that implementing such functionality with jQuery would simply take too much effort and time.
So our team started looking for options. At first, we were going to use React. It had everything we needed to implement such complex interface. However, when you’re half-way through the project it’s not that easy to introduce a completely new technology, i.e. React. Nonetheless, we decided to see if such move could pay off.
After analyzing the pros and cons of solution, we came to a conclusion that React’s component-based approach wouldn’t give us the benefits we were looking for. On the page, there weren’t that many elements that we could divide into components. In addition, there was quite a lot of logic. So, using React would result in one big “container” component.
At the same time, the template approach perfectly was a perfect fit for the project. Moreover, we needed a certain amount of flexibility to work with Google Maps, which wouldn’t be possible with a ready component in React.
Solution
As a result, we applied the default Vue.JS approach using data binding and an html template. It allowed us to use haml and even Ruby methods for rendering filters without any issues.
The display and field values are controlled with Vue directives “v-show” and “v-model”. Now, when applying a filter you don’t need to worry about how the results are displayed since the reactivity does all by itself. The template for rendering elements is connected to the data array through “v-for”.
It’s also much easier to handle events now. For this purpose, we assigned directives to the event handler, which changed the required data. Since there was quite a lot of logic on the page, using one Vue controller eventually became a bit challenging. Even then the solution was much better than working with tons of jQuery code. In general, Vue.JS turned out to be very effective within the RBMalta project.
Project “PYRO”
Another example of when Vue.JS was a perfect fit on a project is PYRO. We received this project with a ton of legacy code in jQuery.
Initially, we only needed to connect the vue gem. However, there was a tiny detail. On the page, there was a dynamically changing set of choice fields, which came back with a query depending on the state of the choice filter. Clicking a checkbox started a query and the state of the filters changed. Handling such functionality through v-model turned out to be very effective.
As a result, we were able to introduce a SPA application into a monolith project.
Conclusion
We’ve said this once and we’re going to say this again:
there is no silver bullet when it comes to technologies. It’s simply impossible to create a solution that would satisfy the needs of everyone. What’s possible, though, is to find a solution that would fit your specific task.
(But before you set on this quest, you should have a perfect understanding of what your project and its requirements are about. Otherwise, it’ll be just another time-waster).
For more than three years, React.JS has been in our stack of technologies. After using it on a big number of projects, it’s proven itself as a truly remarkable technology. After spending some time working with its competitor, we’ve concluded the differences between Vue.JS and React:
Advantages of Vue.JS:
- Flexibility in working with templates;
- Simplicity of the syntax and short learning curve;
- Fast rendering and small size.
Advantages of React:
- Perfectly fits scalable apps, easier to test and maintain;
- Can be used for native and web apps;
- Huge ecosystem;
- A big set of tools.
With that said, there are more similarities than differences between them. Here is a quick list:
- Fast rendering with Virtual DOM;
- Small size;
- Reactive components;
- The ability to easily integrate with routers, collectors, and state managers;
- A-class maintenance.
In our case, both solutions have proven themselves great. Again, you should choose a framework based on your specific task as well as the skills of your team. With that knowledge, making the choice is much easier.
Hope you’ve liked the article, guys. If so, please support it with claps and by hitting the subscribe button!
