- Case Studies
Author: PulsePlay Digital Technology Architecture Team
Source: State of the Octoverse 2021 (GitHub)
BASIS OF DISTINCTION
- Full-featured Framework
- The library is only concerned with UI components.
Provides a strong opinion on how your application should be designed
MVC design requires Flux to implement, but it provides you more flexibility in how you wish to organise your code.
As well as number of tiny libraries that aid in the development of complex applications
Creating highly active and interactive web applications
Large web applications with frequently variable data
Dynamic UI Binding
UI binding at plain object or property level
Direct linking of states of the UI
Supports both one way and two way data binding
One-way data binding means that a UI element can’t affect a component’s state.
Considerably less opinionated
Material Design Components – Angular includes a number of material design components that make UI configuration a breeze
Material-UI Library & Dependencies – Community- developed UI tools provide a wide range of UI components
Dependency injection is supported, allowing for separate life cycles for different stores
React does not fully enable dependency injection because each component has its own global state
Document Object Model Type (DOM)
- Real DOM
- Virtual DOM
- Incremental DOM – when a new DOM is created, it compares it to the previous one and applies the differences to the “actual” DOM, only allocating memory if necessary.
Virtual DOM – anytime the DOM changes, a new virtual DOM is created, compared to the previous one, and only the differences are modified in the “real” DOM.
Angular is using real DOM, which means it goes through the entire structure of HTML to find what is to be changed and “mutate” the tree to apply changes.
React JS is using a virtual DOM implementation, which means it doesn’t have to update all the HTML. It is just looking for the differences between the current and the old HTML and updating it accordingly. That means that React apps load much faster than Angular apps.
Why should I choose?
Huge community support
Your app is really large in size?
Object Orient Programming (OOP)
Good at choosing among best options
Some of React-based frameworks used by developers:
o Material UI
o Ant Design
o React Bootstrap
In Angular, NGRX is a state management library, which permits the use of reactive state management.
In React, every individual React component can have a state, so it’s necessary to manage the states of these components separately. Otherwise, in large-scale applications, a developer may face more bugs and errors than they would otherwise.
NGRX tends to follow FLUX/REDUX. The advantage NGRX provides is that it stores all the states in a single tree, allowing you to access all the forms from anywhere in an application.
Generally, REDUX works as a state management library for React. Another one is Recoil, which is the simplest, most lightweight option. But if you have a good understanding of React, you can use Hooks as the essential state management tool, even without an additional library.
Angular facilitates the web crawlers by generating static versions of the application that are likeable and searchable easily.
With the use of server-side rendering, Angular renders the application by creating a static view before it gets fully interactive.
Alternatively, you can also use rendeToStaticMarkup if you want to avoid creating DOM attributes such as data-react- id, which is useful for creating a simple static page generator.
It is up to you how cleverly you use the combination of JSON and client-side caching to increase server- side performance.
Nothing beats Angular when it comes to reducing the traffic between client and server.
Angular is designed in a pattern that has in-built testing requirements such as dependency injection and mocking the objects.
Since Angular has got Google as a backup, we can not doubt its upcoming improvements.
And it is capable of reducing the amount of code by eliminating the need to recompiling and quickly reflecting the changes in the frontend.
Mobile App Solutions
Angular framework, uses Ionic which is also a platform that allows developers to build high- performance cross-platform mobile applications using a single codebase
Choosing React JS allows you to use React Native to build native and cross-platform mobile applications.
Applications created via Ionic can be also used on the web or any other device
While React Native uses a bit different syntax than React does, it’s relatively easy to learn it if you are already familiar with React.
This open-source framework provides friendly tools to the developers along with powered services.
With React Native, you can create components and bind them in Objective-C, Java or Swift code.
It also incorporates a rich library and building blocks which make things way easier for the developer.
Angular’s tools include:
React’s tools include:
Code editing: Angular is compatible with a variety of code editors. Such as VS Code, Sublime Text, Aptana, etc.
Code editing: VS Code, Sublime Text, and Atom are popular options for React coding.
Project setup: Setting up a project is very easy with Angular CLI (command line interface).
Project setup: Create React apps (CLI) is used to set up a project in React.
Server-side rendering: Angular Universal does the server-side rendering in Angular.
Server-side rendering: React uses the Next.js framework for server-side rendering.
Testing: Jasmine, Protractor, and Karma are widely used for testing an Angular project.
Testing: Jest is well known for testing React apps. Enzyme is another testing utility designed to help React developers check their code.
HTML + TypeScript
JSX + J% (ES5/ES6)
Testing & debugging
Complete solutions within a single tool
Needs an additional set of tools
Allows a choice of libraries, architecture and tools
Angular is not a library – it’s a fully-fledged MVC framework. Because of that, a list of things to learn is much longer than in the case of React.js:
Since React is a lightweight UI library, the learning curve is much simpler than in Angular.
A list of things you have to absorb is quite short: JSX, a router library and a state management library.
Essential to have knowledge of writing components, managing internal state and using props.
o Dependency Injection
Google Cloud Platform
New York Times
Better error handling
Limited SEO options
Steep learning curve
Material design like infrastructure
Seamless updates thanks to Angular CLI
High pace of development requiring more time/resources to focus on quality, testing
View part only
Shortened time to market
According to official React’s website, “Concurrent Mode is a set of new features in React 18, released on the 29th of March 2022, concurrency was released as a built-in mechanism that enables React to prepare multiple versions of the UI at the same time.
Concurrency was available in earlier React versions, but only as an experimental element.
A key feature of Concurrent React is interruptible rendering, which guarantees that the UI will appear consistent even if a render is interrupted. Thanks to that, React can prepare new screens in the background, without blocking the main thread, and creating a fluid user experience.
A while ago (with v16 version) React changed its engine, elevating the speed from “just fast” to “blazingly fast”.
More than that, React Fiber enables the priority-based update system, so you can fine-tune your renderings to make sure the most critical updates are done first. Also, you can pause and start your work at will.
Ivy was created as a complete rewrite of the compiler, as some kind of response to React Fiber. It allows Angular developers to:
*Average metrics. It may change varying on conditional factors.
Certain Angular features that stand out but are not in React by default are:
Data binding, dependency injection (DI)
React Router v4
Material design components
CSS scoped to components
React Scripts TS
NPM is a short form of Node Package Manager, which is the world's largest software registry. The open-source web project developers use it from the entire world to share and borrow packages. The NPM also acts as a command-line utility for the Node.
Data binding is the process of making a connection between the UI and the displayed data.
An opinionated framework is one which is designed in such a way that it's users will experience the least friction with that framework when the framework is used in a way that does not violate the assumptions made by the framework designer.
Dependency injection is a pattern of design in which a class will ask for permission externally rather than creating itself. For instance, a computer class may need a “processor” class. The processor class, in that case, is the “dependency.”
Data abstraction is the process of hiding certain details and showing only essential information to the user.
The HTML DOM (Document Object Model).
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
The HTML DOM is a standard object model and programming interface for HTML. It defines:
NPM is a short form of Node Package Manager, which is the world's largest software registry. The open-source web project developers use it from the entire world to share and borrow packages. The npm also acts as a command-line utility for the Node.
The name npm (Node Package Manager) stems from when npm first was created as a package manager for Node.js. All npm packages are defined in files called package.
(a) Angular Official website
(b) React Official website
(c) Angular vs. React comparison
(d) Angular vs. React comparison
(e) Angular vs. React Usage comparison
(f) Angular Project Ivy
(g) What is Concurrent React v18.0
(h) The relevance of TypeScript in 2022
(i) NPM Trends
(j) Google’s discontinuation of Angular JS support