Battle of the Titans: Angular vs React

Choosing your JavaScript framework

When deciding on a JavaScript framework for your web application, there are two widely used options: Angular and React. Angular is an HTML-centric framework which helps faster cross-platform application development on the website. React is a JavaScript-centric library that helps to create UI components with faster rendering ability using virtual DOM Concept. This article describes the synopsis of the angular framework, react and their core and common design patterns.

About Angular:

Angular is a framework for application development developed by Misko Hevery and Adam Abrams to build single page applications faster with less code. The applications can be deployed across multiple targets such as web, mobile web, native mobile and native desktop. It provides numerous unique services to resolve many technical challenges such as mv*organized architecture for development, directives, context-aware communication, and complete testing framework for test-driven development. The view models are managed by controllers, factory, services, providers and soon.

Angular offers both one-way and two-way data binding. Also, it provides customized HTML elements which can be used as normal HTML tags. It has the full organized architecture to develop web applications   

Angular Architecture:
Angular Architecture diagram

Routing in angular can be done by using the ‘angular router module, NG-Route’.


In AngularJS, a Component is a special kind of directive, that uses a simpler configuration which is suitable for a component-based application structure.

The prominent open source reusable components angular provides MQCREA, Prime Faces, TERA Data, and VM ware.

Debugger/Testing/Code Quality/Build Tools:

Debugger: Angular Inspector, Augury

Testing: Jasmine, Karma, Protractor, Cucumber


Build Tools: Grunt, Gulp, BROWSERIFY, WEBPACK

Core Design Patterns:

Observer Pattern:
Observer Pattern issoftware design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.

Example: Angular $emit and $broadcast.

svApp.controller(“EmployeeCtrl”, function(e) { = “Am an employee of SoftVision”,
   e.$on(“emitting”, function(e,t){
   console.log(“In employment Ctrl ” + t);

svApp.controller(“DepartmentCtrl”, function(e) { = “I belong to Digital Department,” +
   “that makes human sense”,
   e.$on(“broadcasting”, function(e,t){
console.log(“In Department ctrl ” + t)

Chain of Responsibilities Pattern:
Chain of Responsibilities Pattern consists of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain.

Example: Angular Filters

Composite Pattern:

The composite pattern describes that a group of objects are to be treated in the same way as a single instance of an object.

   <input type= “text” id= “date”/>
   <input type= “text” id= “time/>
   <input type= “text” id= “dateTime/>


  • Dependency Injection
  • Reusability of components
  • Extended HTML components
  • Testable, Scalable.

About React:

React is a library to create views (V) as components and then compose them into complex UI.  Developed by Jordan Walkie to create reusable UI components that present data which changes over time. React can also render on server using node and power mob apps using React Native. It needs REDUX/Flux/MOBX and immutable JS for proper state management of components. Its main advantages are reconciliation, virtual DOM, and high security. Each component manages their own state and gets rendered independently using virtual rendering concept.                


Routing in react can be done by using react-router, react-router-DOM, react-router-native, react-router-REDUX, react-router-CONFIG

The react web is comprised of containers which in turn will have a list of components.

The prominent opens source reusable components react providesReact Strap, React Toolbox, and DEVARCHY.

Debugger/Testing/Code Quality/Build Tools:

Debugger: react-dev-tools, REDUX-dev-tools.



Build Tools: Grunt, Gulp, BROWSERIFY, WEBPACK.


  • High performance due to virtual DOM rendering
  • Reusability of components
  • Testable, Scalable
  • Merged easily with third-party components.

Core Design Patterns:

Command Pattern:

Command Pattern is very useful to design decoupled objects. The motivation of this pattern is to execute some piece of business logic at some point in the future.

Redux store is receiver (consists of all reducers).:

Receiver -Store

const Store = createStore(rootReducer, {}, applyMiddleware(…middleware));  

Command is – Action

const addEmployee { type: addEmployee,  data:{ model:Employee };

Executor – Dispatch

Store.dispatch({type: “ADD_EMPLOYEE”,data: {Name: “softvision0001”, id: “1”  }});

Container Pattern:

In react redux, the container component alone will be passing data to the presentational components and also perform action functions which send and receive data from a server

Example: mapDispatchToProps(), mapStateToProps() method of container

Components for HTML Elements:

Buttons are everywhere in web apps, and every one of them must have the type attribute set to “button”.

<button type=“button”>

Writing this attribute hundreds of times is error prone.

We can write a higher level component to proxy props to a lower-level button component.

const Button = props =>
<button type=“button” {…props}>

We can use Button in place of button and ensure that the type attribute is consistently applied everywhere.

<Button /> // <button type=“button”><button>
<Button className=“btn btn-default”>Send Money</Button> //

Common Design Patterns
The common design patterns in both Angular and React are:

     Modular:  Angular and React reusable components are being created as different modules with an export ability. They are imported in the required modules.

     Singleton: Angular factory objects always returns singleton object. State tree in react-REDUX uses Singleton Pattern.

When to choose Angular? When to choose to React?

Choose Angular: To develop web apps much faster with separation of concerns with

definitive architecture using enforced best practices.

Choose React: To develop reusable UI components that change over time. Also, when performance and security are major concerns.

Depending on your needs, you can now choose which system is the right fit for you.


Background Image