In the previous chapter, we talked about the differences between code libraries and frameworks 👨💻 In this chapter, we are going to dive deeper into understanding the concepts and technologies of product developers in the Web world. Let’s talk about the differences between React, Angular and Vue and how it affects us as test automation engineers.
Table of Contents –The Mindset of Developers: The World of Mobile [Part 2]
- Chapter 1 – The Mindset of Developers: Code Libraries vs. Frameworks
- You’re here → Chapter 2 – The Mindset of Developers: React vs. Vue
- Chapter 3 – The Mindset of Developers: The World of Mobile
Just from a quick glance at their home page, you can see straight away which one of them is a code library and which is a framework:
These JavaScript-based tools are three of the most popular ones today for building Web-based software, and this is not only my opinion 😉 You can easily see this backed up in all kinds of surveys, comparisons and download charts, such as the following: https: //www.npmtrends.com/@angular/core-vs-react-vs-vue
The site NPM Trends shows downloads statistics of JavaScript development packages, and according to the filter I built, you can see that in terms of popularity – React is the most popular of the three, with almost 9 million downloads/installations, while Angular and Vue are falling behind with something like 2 million downloads/installations.
In terms of Stars (number of followers) ⭐, Vue seems to be the most valued of the three (surprisingly there is no correlation between “Valued” and “Popular”). Furthermore and unsurprisingly, since React is a code library while the other two are frameworks, React weighs much less than the others (2.8KB in total).
Angular which was very popular a few years ago, has lost its fame in recent years… I assume it had a lot to do with the fact that every version they releases was kind of like “throwing away everything we wrote and starting all over again…”, and developers did not like that there was no backward compatibility.
The results above align even if you’ll search and filter these tools over at Stack Overflow or Google Trends 💡 Now, let’s dive into each and every tool and understand the differences between Angular vs. React vs. Vue.
The Mindset of Developers: Angular vs. React vs. Vue
- Angular
- React
- Vue
- Comparison Scoreboard of Angular vs. React vs. Vue
- Where Test Automation Comes Into The Picture
Angular
This framework, written by Google, was released to the world in early 2010. At the time it was called Angular.js, and this framework was great news for client-side development, which pretty quickly became the most popular out of all the other tools in the market. About 6 years later in 2016, Google released version 2 of the framework (the name was abbreviated to Angular) and it was completely re-written. This upset quite a few Angular developers, since a bunch of their code suddenly became obsolete (unsupported). Therefore while transitioning to the new version many decided to abandon it. The main reason Google developers decided to change Angular’s architecture was due to competition, as two years earlier a “new guy” came into town: React, (developed by Facebook, Google’s competitors).
The MVC (short for Model View Controller) on which the first Angular version relied on was updated to supporting standalone modules. I will not go into too much depth with the technical stuff here, but think of it as if the second version now supported Extensions (such as Chrome browser extensions) or Plugins, so we could independently install any “plugin” (module) we wanted and work with it. More versatile, more comfortable, more economical, and in short – better!
Over the years, Google developers have kept releasing new versions (currently on version 10) that continued to break the backward compatibility, which involved continued frustration from the developer’s side, and is one of the reasons I think Angular is currently falling short after React in the race for popularity.
In terms of Angular’s learning curve, it’s quite steep and requires a lot of learning in order to be able to start coding with Angular. This is another one of its disadvantages that causes developers to be less excited about using Angular.
When a developer starts working with Angular he/she must know a variety of principles like Directives, Decorators, Services, Components, Pipes, Dependency Injection, and more…
React
React has been written and maintained by Facebook since 2013. Given the fact that React is very popular, it has a very large developer community that constantly takes care of creating third party libraries, making it more and more powerful 💪
Since React is just code libraries and not a complete solution, there are fewer principles required to learn before starting to code with React (as opposed to the Angular equivalent). By the way, the component that React mainly uses is the JSX (short for: JavaScript xml), Which is a nice way to write HTML within JavaScript code.
React are pretty stable code libraries, which means that if you built a product over their API 5 years ago, it is likely that even today your same code will work with an upgrade to the new version of React. In our case, it’s just like comparing it to Selenium code libraries.
With the success of React’s libraries, developers took up the initiative to write a new product called: React Native, designed to work in the mobile world (we’ll talk about this world in the next chapter of our series).
One of the advantages of these libraries is also one of the disadvantages – the product moves very very fast, many aspects are updated and added to React at a dizzying pace, so its online documentation for example is not always up to date.
Vue
The youngest of the three contestants, written in 2014, and unlike the other two, does not have the behind-the-scenes support of a software giant. It was created by a small group of independent developers (Ex-Google), and is also part of the reason it took a while until it was fully noticed and acknowledged for its wonderful capabilities (only in recent years Vue began to flourish).
Vue or Vue.js is a flexible and lightweight framework, for creating web interfaces. Any beginning JavaScript programmer can work with this framework quite easily because its learning curve is quite moderate (some argue about which is easier to learn – React or Vue… I will not go into that).
One of the notable disadvantages of Vue is the relatively small community that supports this framework, thus creating a situation where the number of plugins and third party libraries that support Vue is significantly lower than Angular or React.
Some claim that Vue is the best tool out of the three. It is based on Angular & React and actually based on another buzzword from Facebook called Flux which is a kind of design pattern for building client-side applications over web.
Scoreboard – Angular vs. React vs. Vue
🏆 To conclude, below are the scores I chose to give each of the tools reviewed of Angular vs. React vs. Vue:
And this is where automation comes into the picture…
Okay, so now that we understand the technologies and the differences of Angular vs. React vs. Vue, it’s time to understand how does this affect us, the automation developers? Will this affect the choice of test automation tool we want to work with? 🤨
Since Angular generates unique attributes for its elements such as ng-bind, ng-click, ng-repeat, etc, a JavaScript automation framework called Protractor was written for Angular applications, which means that this framework incorporates a mechanism for identifying elements that are unique to Angular attributes, and that also has an internal Wait mechanism for the framework’s events.
Protractor‘s popularity skyrocketed very quickly a few years back, but dropped just as fast not too long after. Nowadays, there is not much usage of this framework, the reason being that in the new versions of Angular, there is no longer a need for a unique mechanism for identifying elements. Automation developers’ knowledge level in identifying elements (especially XPath and cssSelector) has increased immeasurably in recent years, thanks to a large number of tutorials all around us! Another reason Protractor is no longer in much use derives from the fact that, as mentioned above, Angular’s popularity is decreasing over time.
With the rise of Protractor in JavaScript, which is a relatively unpopular programming language amongst automation developers (did anyone say Callbacks? Did anyone mention Promises?), more and more wrappers have begun to appear in other languages as well, i.e. ngWebDriver in Java or Protractor .NET in C#.
Vue, React and Angular produce SPA applications (short for Single Page Application), which are modern applications. This is where the automation framework Cypress comes into play. The main complaint about Cypress from the testers’ side is that it does not support multi-tab (switching between tabs), but in SPA there are no tabs. Then again, if you are looking for an automation framework that supports testing across multiple tabs and supports all types of modern applications, you might want to check out TestProject‘s free end-to-end testing platform (using their AI-powered codeless test recorder or their open-sourced OpenSDK for any programming language of your choice – Java, Python, C#, and even soon supporting Node.js too!).
❓ The question here is not “Which automation framework/library to chosen while dealing with Angular / React / Vue products?”, but rather the more critical questions here is “Who is going to write the tests? Who is going to implement the framework?”
In case the answer is: Only the developers are going to write the tests (yes, there are such places), or it’s a combination of the developers and the automation engineers, then they will almost always go for the tools such as: Puppeteer/ Cypress/ Playwright, because they feel very comfortable using the same development environment (that is JavaScript based of course) and they will drag along with them the automation engineers.
On the other hand, if the automation engineers are going to be the ones writing the infrastructure and are the ones who will decide what to implement, then in most cases Selenium WebDriver will prevail using either Java or Python most often. In fact, all automation tools (frameworks/libraries) usually work in front of the DOM (short for Document Object Model), thus the technology (Angular / Vue / React) that generates the page is not that much of a factor as for when choosing which automation tool to work with. For learning more about how to choose the right tool for your needs, I recommend reading these great articles: How To Select The Right Test Automation Tool, How to Select the Best Tool – Research Process, Criteria for Selecting the Right Functional Testing Tools.
I hope you enjoyed this 2nd part of the Mindset of Developers: Angular vs. React vs. Vue. In the next chapter, I am going to talk to you about development tools in the mobile world: React Native vs. Xamarin vs. Flutter… You definitely have got something to look forward to 👀😉
—
Reference: https://atidcollege.co.il