Agile Software Development

Part 2: Web Development Frameworks React JS, Vue JS and Angular JS in comparison – Software Ecosystem and Common technologies

by Christian Derwein 15 Jul 22 6 minutes

[Sassy_Social_Share]

Ecosystem

Open source packages save valuable time in front-end application development. Not only that, they are often better than custom components and packages because they are tried and tested. It’s important to pay attention to the availability of ready-to-use components, themes, and other tools that make it easier to create new features.

React JS

Many front-end applications rely on global state management to store information, such as who is logged in and other user settings. The most popular project for JS state management is Redux. Most developers use the official React bindings for Redux, which are maintained by the Redux team. Due to the popularity of React, it’s extremely easy to find input components and ready-to-use elements. They are all just a Google or GitHub search away. The React ecosystem also includes React Native, which lets you build native iOS and Android apps from a single codebase written in React. So React can also be a good choice for building mobile apps with web technologies. React is part of the MERN stack, which consists of MongoDB, ExpressJS, React and NodeJS. The great thing about this combination is that a single language – JS – drives the entire application.

Vue JS

Even though Redux can be used in Vue, there are no official bindings. But that shouldn’t worry you, because Vuex is the official state management library designed specifically for Vue applications. Apart from integrating very well with Vue, it is easy to debug using the Vue developer tools. In the early days of Vue, it was harder to find ready-made components. Since the community has grown, there is a wide range of input components and advanced elements that can be used to speed up front-end development. For custom agile software development of mobile applications, there is an emerging project called Weex. Weex is developed and used by Alibaba, but it is not as mature and powerful as React Native. Also, since the project tends to be developed and used in China, it is harder to find documentation and solutions to problems in English. Vue integrates well with Laravel, which is why they are often used together. Laravel provides a full JS and CSS framework to allow Vue to be used in new projects.

AngularJS

For state management in AngularJS, the NgRx project can be used. It was inspired by Redux, but is specifically designed for AngularJS. As with Vue and React, there are many ready-to-use components that you can import into your projects. The small difference with AngularJS is that there are many official components in the AngularJS Material project. This is an official project from Google that provides Material design components for AngularJS applications. With NativeScript, you can create cross-platform mobile applications in AngularJS. It also supports Vue, but the support for AngularJS is more mature. AngularJS is part of the well-known MEAN stack, which combines AngularJS with MongoDB, ExpressJS and NodeJS. Similar to the MERN stack, it relies entirely on JS on both the front-end and back-end.

Common technologies

AngularJS, React, and Vue can all be used for custom agile software development of Progressive Web Apps, or PWAs. PWAs are not mobile apps, but web apps that smartphone users can add as shortcuts to their home screen, providing a similar look and feel to native mobile apps. You can also find premium templates and pre-built apps for each framework, but AngularJS and React have more premium options available than Vue.

Performance

When choosing a framework or library, performance must also be considered. In many cases, there is no need to worry about performance, especially for front-end interface development of a small project. However, as a project grows in scope and complexity, performance can (and will) become more of an issue. It is important to note that the quality of frontend development and adherence to web performance best practices are more important than the choice of framework. However, since there are some performance metrics and differences, I’ll take a closer look at them and explain how they can impact development efforts.

JavaScript framework benchmark: Angular vs. React vs. Vue

The results of the JS framework benchmark show that all frameworks perform quite well on most benchmarks, such as creating or appending rows in a table. Vue is significantly slower than AngularJS and React when selecting rows. On the other hand, AngularJS and React are not very efficient at swapping rows. These are the only significant differences in the rendering benchmarks – and in most cases they will not produce noticeable results. Since selecting rows is a more common functionality than swapping rows, this benchmark puts Vue in third place behind AngularJS and React, which share the top spot. When it comes to memory and boot time, React and Vue perform very well, but AngularJS is a bit slower. AngularJS takes up to 150 ms to launch a simple script and requires more memory to run.

Perf Track: Angular vs. React vs. Vue

Perf Track from Google Chrome Labs shows production data from thousands of websites. These stats are influenced by many other things and not just the framework of choice, but let’s look at the numbers.

Delay on first input

For all three frameworks, more than 80 percent of websites fall within the acceptable range for first-entry delay, which indicates how long it takes for the user to interact with the page.

JavaScript bytes

By far, the leanest applications are those developed with Vue. 68 percent of Vue applications load less than 1 MB of JS. AngularJS and React applications, on the other hand, tend to have larger code sizes.

How to use these metrics

A trend can be seen from these numbers, but don’t be too quick to draw conclusions. For example, the last number could be explained by the fact that Vue is used for custom agile software development of more lightweight applications, while AngularJS is used for larger projects. The statistics can help make a good decision, but they cannot be used as proof that one framework is faster or better than another.

Advanced features

For advanced applications, the front-end framework used should be able to perform some tasks that improve performance and scale better.

Two key technologies are server-side rendering (SSR) and virtualization.

React JS

React supports server-side rendering with the official ReactDOMServer package. For virtualization, a popular third-party tool called React Virtualized can be used.

Vue JS

Server-side rendering is also supported in Vue with the official SSR package. In addition, the Nuxt.js framework can also be used, which is built on top of Vue and supports SSR. The virtualization options in Vue are unfortunately not that strong. Vue Virtual Scroll List is the best solution for virtual scrolling, but it is a bit “buggy” and not as stable as the options for React and AngularJS.

AngularJS

AngularJS has the official AngularJS Universal package for SSR and an official component for virtual scrolling and efficient rendering of large lists.

[ratemypost]
Christian Derwein

Today - Entrepreneur and CEO of moweex - mobile & web development agency

Former - Collaboration & IT-Manager for Austria biggest industry company. Developer, Consultant and project leader for web and mobile projects for small and medium-sized enterprises.

Goals: Do what you Love and do it often. This is your Life. Start doing things you love. Live your dream and share your passion.

Specialties: Webdesign, Webdevelopment, Mobile Development (iOS, REACT native, Ionic), ScrumMaster, Creating ideas and think one step ahead, Communication, Business Development

Show all articles by Christian Derwein
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments