In the world of Frontend, there are a lot of libraries and frameworks that improve the work of developers. Among the leading solutions are React and Vue.js. In this article we will try to introduce what they are, compare them and present their strengths and weaknesses.
What is Vue.js?
Vue.js also known as VueJS or just Vue is one of the most popular frontend open-source Javascript frameworks dedicated to Web solutions. As for the framework, it provides exceptionally much flexibility. Vue was created (and is still being developed like a baby) by former Google employee Evan You (https://evanyou.me/). He developed it from a small project to the current mature technology used worldwide without a large corporation behind the project. Of course, he does not work on it alone, over the years he has gathered around himself a trusted and competent group of specialists forming a core team and a dedicated community.
Vue.js is a progressive framework. In simple words, it means that it is possible to gradually add vue code to the application. For example, in an existing product, you can choose a place where we will start implementations and either stop there or expand this scope depending on your needs. Of course, when building applications from scratch, we usually lay the foundations for full implementation from the beginning.
Vue.js (especially in the Vue 3 version) is a flexible solution and applications, depending on the use of cases, can be built in different ways to choose the best solution for business needs. It can be used as standalone script, Embedded Web Components, SPA (Single-Page Application), SSR (Server-Side Rendering), SGG (Static-Site Generation) also known as JAMStack. Without going into details each of these approaches is recommended in different cases.
A bit of Vue.js history
While at Google, Evan You was looking for a framework suitable for a project focused on interactivity. Since none of them suited him, he decided to create his own. The goal was not money or fame, he just wanted a solution that he would use himself. First commit to the project was in 2013, and the first release in the beginning of 2014. At the beginning of development, Vue.js was a small library, basically a simple script that is why there is this “.js” in the name. It was only later that vue and its ecosystem were gradually expanded and thus, incrementally, Vue.js became a framework. Vue slowly grew and had more and more users, even though its creator developed it on weekends. In 2014 thanks to the support on Twitter of the creator of Laravel, the interest in Vue.js has definitely increased. In 2015 the first stable version named “Evangelion” was published. In the same year, the vue ecosystem was expanded with several key libraries such as vuex, vue-router, vue-loader and vue-devtools. After collecting funds mainly from patronite the creator of Vue.js could finally start working on it full time. Version 2.0 “Ghost in the Shell” was released in 2016, which, among other things, provided support for Server-Side Rendering and improved performance. In 2020, after many alpha and beta versions, v3.0.0 “One Piece” was released on a new repository. Work on this version took two years. In this version, the focus was on increasing flexibility so that the framework was even more progressive and allowed for better scaling of applications thanks to the Composition API. This change offers Better Logic Reuse, better TypeScript support, the ability to change the organization of the code so that the logic is not scattered, which can be a problem with larger components in the Options API known from the second version. Despite this, according to the current assurances of the authors, there are no plans for the Options API (which still works in some cases) to be deprecated. In 2022, Vue 3 became the new default version.
If you want to learn more about the history of vue.js and its creator from a business perspective necessarily watch the video below:
If you are interested in the new Vue 3, be sure to watch the video below from the VueConf Toronto 2021 conference. In this recording, Evan You (creator of Vue.js) personally talks about the new Vue 3, its capabilities and what new functionalities have been introduced in this version of the framework.
Check it out: https://youtu.be/2KBHvaAWJOA
What is React?
React also known as React.js and ReactJS is the most popular frontend Javascript library used to create user interfaces using component-based concept. It was created by Facebook, first it was used for their internal needs, then it gained a lot of fans after it was shown to the world as an open-source technology. Technically React is a library, but it has such a large ecosystem around it that it is often compared to frameworks. Over the years, it has earned a stable position among JavaScript technologies. Therefore, it is valued for its versatility. JSX is used to construct the elements, and JavaScript is used to render them on your website.
A bit of React history
In 2011 facebook employees Jordan Walke Tom Occhino created FaxJS, which was the foundation for React. During 2012 the development of this technology was significant. While working on facilitating the management of Facebook Ads, React was born. Later that year, Instagram was acquired by Facebook. This contributed to the decision to make React available as an open-source library.
This decision was announced during the JSConf US conference in 2013. In 2014, intensive promotion was carried out by organizing meetups. The React community was growing and more and more big players started using it. In 2015 React was stable. Furthermore, during that year Facebook released React Native – a library dedicated to create applications for Android and iOS devices ( if you want to learn more about, differences between React Native and React JS, we recommend our colleague’s article, which is available here. According to data from the “STATE OF JS” report, which is a source of information on the popularity of frameworks over several years, Reat was continuously the most used of the frontend libraries and frameworks from 2016 to 2021.
If you are interested in history of React check out the video below:
Vue.js vs React – why should you choose one of them?
Both of these solutions are mature and stable frontend technologies that streamline code writing, so that we can write faster and more accurately. React and Vue.js are powerful tools which, in the hands of dedicated developers, allow us to create web solutions suitable for both small and large products. Both technologies have been around long enough and are used by serious organizations that can be trusted definitely. What is important, both React and Vue allow you to create projects from MVP to really large-scale products. Thanks to their flexibility, they work well in Agile projects. You can start small and then gradually grow.
In both Vue.js and React.js, a user interface is based on components. This approach is called Component-based UI development. It improves the readability of the code, speeds up the programming process, and what is the most important fact, it allows you to reuse the code. Thanks to reusable components, there is no need to duplicate much of the code. For repeatable elements, we can separate the common part of the components and then provide only different information for each of them. Components can consist of other components, so an example of a component can be both a button and a large dialog box closed with this button.
Why do we use libraries and frameworks like React or Vue? What is the difference between these terms?
Both the framework and the library are pre-written code to help write our target code, to streamline the process and improve developer productivity.
Trying to put in non-technical terms the differences between a framework and a library can be referred to the amount of freedom. A library is such an add-on, a tool that we use when we decide we need it, we decide where we will use it and we have quite a bit of control over exactly how. Often the tool does not have all the functions, so when deciding on it we are aware that we will need other tools. But no one dictates to us exactly what tools.
Framework is more like a DIY kit with instructions. We are immediately provided with materials, templates, a set of basic tools that we will probably need, we can add something from ourselves, but rather in designated places, we do not have full control, because we consciously give it up when deciding on such a set, for that we are sure that the basic set is already there and we can start working.
Of course, in the case of a library, such a set of interacting essential libraries we can create ourselves and share it with colleagues, creating a standard which others can replicate in their projects
Vue.js vs React – similarities
Both Vue.js and React are mature technologies. React was deployed on Facebook in 2011 and in 2013 became an open-source library. Vue.js was developed in 2014 by Even You (former Google and Meteor employee – currently he and his team are dedicated to Vue.js project full time). It is also open-source technology.
Moving on, the next similarity, perhaps trivial but crucial, it will be the fact that both of them are built on JavaScript.
Furthermore, these technologies are well known in the Frontend Community which can be seen in theIn the State Of JS report. This is a survey repeated every year that gives a broad picture on trends in the JavaScript world. The graph below shows a comparison of the level of awareness about frontend libraries and frameworks.
Both solutions are still being actively developed. For the React side – React 18 was released in March 2022. For the Vue.js side there has been a massive move to a brand new version of vue.js in the community because (As of Monday, February 7 2022) Vue 3 has officially become the default version along with Pinia as the new recommended state manager.
Another common characteristic of both technologies is that they have gathered a huge and very vibrant community and support around them. Both Vue.js and React Developers all around the world also translate into the existence of a huge number of different tools, libraries of ideas and solutions. There are many forums, YouTube videos and e-learning platforms created by the community, people are active on discord channels and on twitter and other forms of communication. Both React and Vue.js have regular conferences devoted to them, but the topic of these two frameworks is met at many other related conferences dealing with Frontend-oriented topics.
In terms of technical similarities, one is that they both use Virtual DOM. It is a reflection, such a copy of the actual DOM (Document Object Model). Updating this virtual version is faster, and thanks to this, after comparing the previous version with the current one, differences are caught and only they are introduced in the real DOM.
Another important technical similarity is that both of these technologies are component-based. As it was written earlier, it allows for greater reusability, code readability and speeds up work.
Speaking of technical aspects, it is worth adding that both solutions also support TypeScript and PWA.
It is also important to note that both have backward compatibility
Differences between Vue.js and React
Core difference between Vue.js and React is that officially the first one is a framework and the second one is a library.
Vue also does not have a large corporation behind it that would elevate the technology’s reputation with its name and funds.
Another difference between Vue.js and React is how we bind the data. In Vue there are additional build options for two-way data binding for developers that prefer it. This means that the data that is displayed somewhere, e.g. in a text field, if it changes, its value will be automatically changed without our intervention, and we will also see the new value in other places where it is displayed. This approach can be both an advantage and a disadvantage, as always you need to know how to use it so as not to make a mess.
An additional difference that may affect the comfort of working with React is the syntax of the code, which will be discussed later in the section on syntax difficulty.
*As an addition: Until recently, as a big difference, I would have added React hooks, but with the advent of Vue 3, a similar concept appeared, i.e. Composition API.
Vue.js vs ReactJS – Side-by-side comparison
A brief comparison of selected features for vue.js and react is presented in the table below (both similarities and differences):
| React.js | Vue.js | |
| Developed by | Facebook (Jordan Walke) + open-source developer community | Author (Evan You) with core team + open-source developer community |
| Type of technology | Library | Framework |
| First release date | 2013 | 2014 |
| Reusability of code | CSS | HTML and CSS |
| Official documentation | Yes | Yes |
| Component based | Yes | Yes |
| Active community | Yes | Yes |
| Syntax | JSX | HTML, JSX |
| License | MIT | MIT |
| Virtual DOM | Yes | Yes |
| Ability to write in Typescript | Yes | Yes |
| Dedicated Dev Tools | Yes | Yes |
| State management libraries | Yes | Yes |
| Official CLI | Lack of official CLI | Vue-cli |
React – pros and cons
PROS:
- Extremely active and creative community developing an ecosystem around React.
- A wide range of additional library tools, libraries and tutorials.
- A large number of developers on the labor market.
- React enjoys great trust and has a well-established reputation.
- High flexibility.
- Good integration with TypeScript.
- Good for “Web+Mobile” products, because sometimes it is possible to reuse code written for the web when developing mobile applications using React Native.
- Behind React is a company with large funds.
CONS:
- By default, the code responsible for the visual part is mixed with the code related to the logic, this may make the code less readable and negatively affect the reusability of the code.
- The freedom that React gives can be a problem when we take over the code from someone else. Different conventions in writing code can make it difficult for new developers to find themselves in the project and continue it in a consistent way.
- Need to use external libraries (even though many of them are great).
Vue.js – pros and cons
PROS:
- Lightweight and High Performance.
- Single File Component system.
- Ease of integration.
- Good documentation and official learning materials. Easy to start.
- Good integration with TypeScript (Vue 3 itself was written in TypeScript).
- The author is dedicated to the project and continues to be the project leader. This helps maintain vision and maintain quality.
- Many of the developers who choose Vue JS are guided by the fact that they are comfortable writing in it. The plus side of this for business can be that the programmers who like the solution are more likely to educate themselves in it, investing their free time in it as well.
- Good developer experience (thanks to e.g. advanced devtools).
- Vue’s HTML-Based Syntax allows you to easily use existing HTML.
- Good organization of the code.
- Easy style management.
CONS:
- Separating Vue 2 and Vue 3 into two separate repositories can create confusion and give the impression of being less popular than it really is. Additionally, many of the unofficial sources describing vue are true for vue 2 and are no longer fully valid for vue 3. This may affect opinions about Vue.
- Vue.js ecosystem became a bit divided after release of Vue 3 and due to breaking changes required significant amounts of time for adoption and creation of better tools. But that has also inspired authors of tools also in other ecosystems.
- Some community materials are created by non-English speaking people, this can be tricky if you want to find a solution for a challenge that is not commo
Vue.js vs React – which syntax is more difficult?
One of the most common opinions is that the advantage of Vue is the simple syntax and easy entry threshold for new developers, including fullstacks who have, for example, experience with Laravel without a very extensive knowledge of JS. The difference in syntax is the default more traditional approach of separating HTML from styles and JavaScript code. This facilitates readability also for designers who often know the basics of HTML, which helps in cooperation between them and developers. Vue also imposes a slightly larger framework as a framework and not a library, which reduces freedom, but it can translate into code comprehensibility for other developers, forcing standards. An additional facilitation is good documentation and a database of official courses available on platforms such as VueSchool or VueMastery.
In the “STATE OF VUE 2021” REPORT” 93 percent of those surveyed used official documentation to learn Vue, and as many as 76 percent indicated documentation as the biggest advantage of frameworks in their opinion.
The react syntax is based on JSX, which is an extension of JS with XML-like syntax. It has its advantages, but it is less readable for a beginner.
However, it should be remembered that React is also very accessible for a person who knows JavaScript to start with, due to the huge database of tutorials and plugins created by the community. React is also very popular on bootcamps, so with the right teacher and self determination it is not so difficult to learn it from scratch.
Vue.js vs React – which is performing better?
When comparing pure React.js to pure Vue.js, the second one wins in terms of performance. Below you can see how React and Vue fared in js-framework-benchmark against each other.On this picture there is a comparison between Vue.js and React.js in terms of duration in milliseconds.
Source: “Official results for js web frameworks benchmark for React and Vue“ https://krausest.github.io/js-framework-benchmark/index.html
In this comparison, React is slower. Of course, there are ways to optimize the performance of React applications. If you are interested in this topic check out our article: https://desmart.com/technology/react-is-slow-oh-wait-tips-on-how-to-optimize-react-apps-performance/
Vue.js vs React – popularity in 2022
React and Vue.js are at the top of front-end solutions. If we focus only on mature solutions, leaving aside the current high interest in new solutions like Svelte or Solid (which is natural in the world of Fronted), they keep their positions which cannot be said about Angular, which, as we can observe in the chart below, has been drastically losing developers’ attention since 2016.
Source: State of JS Raport 2021 – Interest; https://2021.stateofjs.com/en-US/libraries/front-end-frameworks
The charts below show the details of the State of JS report on Vue and React. Based on it, we can conclude that in 2021, 80 percent of respondents have used React in the past, with more than 66 percent intending to continue using it. This is a very good result despite a small decrease from the previous two years. Respondents interested in React who have not yet had the opportunity to use it were more than 9 percent.
In the case of vue.js, there were almost half as many people who wrote in this technology among respondents in 2021, or 41 percent. On the other hand, the number remains at more or less the same level relative to 2020. Interested people with no experience with Vue in 2021, on the other hand, were more than twice as many as for React. In the case of Vue, we can look forward to the results for 2022 to observe what impact the entry of Vue 3 will have on the results, as it is possible that we will see an increase.
Source: State of JS Raport 2021 – Experience Over Timer Time; https://2021.stateofjs.com/en-US/libraries/front-end-frameworks
In an alternative survey conducted by JetBrains, when asked what JavaScript framework you regularly use, respondents who indicated Vue accounted for 43 percent. respondents, and React 49 percent. For this survey, the results are more similar.
Source: JetBrains survey – framework popularity (regular use); https://www.jetbrains.com/lp/devecosystem-2021/javascript/
Despite its transparency and accessibility for novice programmers, it is not very popular on boot camps (it is more often presented at universities, which may make it happen that people writing in Vue start recruiting with a delay). Therefore, there are fewer vue developers on the market than, for example, in the case of react.
The number of stars on GitHub may be a source of information on popularity and satisfaction with technology other than surveys. The chart below shows the number of stars for 3 frameworks (Vue, React and Angular). Again, Vue and React have similar results, while Angular lags far behind.
Source: https://star-history.com/
Another way to estimate the popularity of frontend technology can be the number of users of dedicated dev-tools.These are browser extensions supporting programming work, including debugging, i.e. a developer’s daily work tool. Here, too, the number of users for React is higher than for the other tool. For Vue it is over 1,000,000 devtools users, and for React it is over 3,000,000.
To sum up, when it comes to popularity, React definitely wins.
Most popular websites created with Vue and React
In the table below are the Big Brands that Use React and Vue for their products.
It is interesting to note that Facebook, which is the creator of React, also uses Vue.
This can be taken as an example that Frontend technologies and developers who specialize in them do not have to be treated as competition. That you can select technologies according to the needs of the project/product, taking advantage of the benefits from each of these solutions. This is how we treat them at Desmart. Technologies are tools for our developers, who know how to use them and specialize in them so as to make the best use of them while collaborating on a product.
Are Vue.js and React.js developers competing with each other in Desmart?
No, we don’t! We cooperate! Both technologies are based on JavaScript, so we have space to learn from each other and skills to help each other across teams. Frontend is a broader topic than the JavaScript framework itself. Despite specialization, most of the topics related to the continuous improvement of our methods and tools we use are common to us.
For example automated end-to-end (e2e) tests that simulate user behavior for web applications can also be used regardless of the chosen solution. Whether it’s React or Vue.js. The test itself written in Typescript is universal for both of these technologies. If it is possible to reuse such a test, there are no contraindications not to do it, and this allows us to streamline the process of covering applications with tests.
Moreover, to improve our work on products, we develop ourselves at joint meetings of the JS Guild. We exchange knowledge to stay up to date and look for better and better solutions.
Whenever we have the opportunity, we also try to isolate code fragments that can be reused regardless of the selected technology. Thanks to this, we rely not only on our experience, but also on all front-end developers. We also consult with a wider group before starting the project to make sure that we always choose the best solution and technological stack for the specific product.
Are you looking for a React or Vue team?
Drop us a line here, and let’s discuss how we can help you.
