Agile Software Development

Part 1: Web Development Frameworks React JS, Vue JS and Angular JS in comparison – Software Architecture and Popularity

by Christian Derwein 07 Jun 22 4 minutes

[Sassy_Social_Share]

Software Architecture – What are the architecture differences between the development frameworks React, Angular and Vue

React JS

React can be used as a UI library for rendering elements without enforcing a specific project structure and is therefore not a framework in the strict sense. React Elements are the smallest building blocks of React applications. They are more powerful than DOM elements because the React DOM ensures that they are updated efficiently when something changes. Components are larger building blocks that define independent and reusable parts that are used throughout the application. They accept input, called props, and create elements that are then displayed to the user. React is based on JavaScript, but is most often combined with JSX (JS XML), a syntax extension that can be used to create elements that contain HTML and JS at the same time. Anything created with JSX could also be created with the React JS API, but most developers prefer JSX because it’s more intuitive.

Vue JS

The core Vue.js library focuses exclusively on the view layer. It is called a progressive framework because you can extend its functionality with official and third-party packages like Vue Router or Vuex to make it a true framework. Although Vue is not strictly related to the MVVM (Model-View-ViewModel) pattern, its design was partly inspired by it. With Vue, it will work mainly on the ViewModel layer to ensure that application data is processed in a way that allows the framework to render an actual view. Vue’s templating syntax allows for the creation of view components and combines familiar HTML with special directives and features. This templating syntax is preferred, although raw JS and JSX are also supported. Components in Vue are small, self-contained, and can be reused throughout the application. Single File Components (SFCs) with the .vue extension contain HTML, CSS, and JS, so all the relevant code is in one file. SFCs are the recommended way to organize code in Vue.js projects, especially larger projects. Tools like Webpack or Browserify are needed to translate SFCs into working JS code.

AngularJS

This article is about AngularJS 2 and not the first version of the framework, now known as AngularJS. AngularJS, the original framework, is an MVC (model-view-controller) framework. But in AngularJS 2, there is no strict link to MV* patterns as it is also component-based. Projects in AngularJS are divided into modules, components and services. Every AngularJS application has at least one root component and one root module. Each component in AngularJS contains a template, a class that defines the application logic, and metadata (decorators). The metadata for a component tells AngularJS where to find the building blocks it needs to create and render its view. Angular templates are written in HTML, but can also include AngularJS template syntax with special directives to output reactive data and render multiple elements, among other things. Services in AngularJS are used by components to delegate business logic tasks such as retrieving data or validating input. They are a distinct part of AngularJS applications. Although AngularJS does not enforce their use, it is highly recommended to structure applications as a set of distinct services that can be reused. Since AngularJS is developed in TypeScript, its use is recommended to get the most seamless experience, but plain JavaScript is also supported.

Popularity

React JS

React is one of the most popular JS projects with 160k stars on GitHub. It is developed and maintained by Facebook and used internally in many of its projects. It is also used to power over 2 million websites, according to BuiltWith’s usage statistics.

Vue JS

Of the three frameworks, Vue has the most stars on GitHub, with 176k stars. The project is developed and led by ex-Googler Evan You. It is a very strong independent project in the open source community and is used by over 1 million websites, according to BuiltWith.

AngularJS

AngularJS is developed by Google, but surprisingly it is not used in some of their flagship products like Search or Youtube. It is commonly used in enterprise projects and powers over 97,000 websites according to BuiltWith. It is the lowest rated of the three frameworks, with 68,000 stars on GitHub. However, when AngularJS 1 switched to AngularJS 2, a completely new repository was created instead of continuing the AngularJS project, which also has 59,000 stars.

[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