Battle of the Titans: Angular vs React

Choosing your JavaScript framework

Bhanu Gunda

Bhanu Gunda

Full Stack Technical Lead at Softvision
Bhanu is a Full Stack Technical Lead at Softvision with over 12 years of experience in Full Software Development Life Cycle (SDLC), including Requirements definition, Architecting, Planning, Design, implementation, Testing, Building, Deployment, and Production support of a brand new Application or Enterprise product and enhancements of existing systems
Bhanu Gunda

Latest posts by Bhanu Gunda

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:  

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

Components:

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

Code Quality: JSHINT, JSLINT, ESLINT, TSLINT, Sonar QUBE.

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) {
   e.data = “Am an employee of SoftVision”,
   e.$on(“emitting”, function(e,t){
   console.log(“In employment Ctrl ” + t);
});

svApp.controller(“DepartmentCtrl”, function(e) {
   e.data = “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.

<div>
   <sv-date-time-picker>
   </sv-date-time-picker>
</div>
<sv-date-time-picker>
   <input type= “text” id= “date”/>
   <input type= “text” id= “time/>
   <input type= “text” id= “dateTime/>
</sv-date-time-picker>

Benefits:

  • 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.                

Architecture:

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

Components:
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.

Testing: REACT-TEST-UTILS, REDUX-TEST-UTILS.

Code Quality: JSHINT, JSLINT, ESLINT.

Build Tools: Grunt, Gulp, BROWSERIFY, WEBPACK.

Benefits:

  • 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.

 

Share This Article


Bhanu Gunda

Bhanu Gunda

Full Stack Technical Lead at Softvision
Bhanu is a Full Stack Technical Lead at Softvision with over 12 years of experience in Full Software Development Life Cycle (SDLC), including Requirements definition, Architecting, Planning, Design, implementation, Testing, Building, Deployment, and Production support of a brand new Application or Enterprise product and enhancements of existing systems
Bhanu Gunda

Latest posts by Bhanu Gunda

3 Comments
  • Devaraja
    Posted at 08:12h, 21 May Reply

    Do you think virtual DOM in react JS is key for its popularity? If the concept of Virtual DOM was not there what other advantages that could hold react JS up?

    • Bhanu Gunda
      Bhanu Gunda
      Posted at 10:20h, 21 May Reply

      React JS is a JavaScript Centric Framework. We Use JSX to render HTML components. While all other front end frameworks are HTML Centric.
      Java script is more robust and scalable than HTML.

      The other advantages are:
      Reusable components.
      Server Side Rendering
      One way data-binding
      React Native(for Mobile Applications) as well.

  • Hanna Frenk
    Posted at 13:23h, 31 July Reply

    I would prefer angular over react because With AngularJS we break the application code into several files and it’s based on the three layers — Model, View, and Controller — typical of single-page applications. Thank you for giving your knowledge and study.

Post A Comment