AngularJS Vs ReactJS(FaceBook)

Overview

Before starting off with the article I'd like to provide some background as to why this article may be important to starting your next project. I have used AngularJS 2 with Ionic 2 in order to develop the Mobile Application for Reforest Sri Lanka which is available at PlayStore. I have been using ReactJS for about 6 months at CAKE LABS (PVT) LTD during my internship where I was able to clearly see pros and cons of the library.

Introduction

As I have mentioned ReactJS is a "library" it is basically a rendering engine. Whose primary focus is to render. It is build around the concept of the Virtual DOM and the component based architecture. When ever a change happens the Virtual DOM is completely rendered whilst only the tags having a net difference in the Real DOM are then updated. As the mechanism implies all the HTML tags are indexed by the library by injecting them with ID parameters, making it impossible for you to add ID's or rather unconventional if you do so. Due to the component based architecture this enables the reuse of components which makes the development quite easy. At the same time the framework uses JSX (Java Script XML) syntax which seems to be HTML but are not. Thus the styling of the component becomes a not so simple task in the right React way.

Angular JS is actually a framework which  provides all the required libraries off the shelf. This makes the development easy and at a mature level, this makes the size of the minified UI to be reasonably smaller in size since we are reusing the functions provided by the framework itself without having to install third party libraries such as Fetch, Isomorphic Fetch or request handling libraries such as JSONP. All the features are documented in the official website, which was quite not stable until recent. AngularJS 2 also comes with the component based architecture which makes the reuse of components possible but as not simple as in the case of ReactJS. I'd rather like to say its bit messy and not so straightforward with the concept of directives and modules.

Feature Comparison

Angular JS 2	React JS
Use the HTML DOM straightaway	Uses a virtual DOM then updating the real DOM
Uses dependency injection model and some ECMA Script 7 features	Still in ES 6
Uses components and modules	Uses components
HTML/CSS styling can be applied straightaway	Needs to use additional libraries such as Radium in order to reuse styles Can use inline styles which is quite difficult Styles are provided in the form of JSON objects since we use JSX

When to use what

This quite not straight forward. If the system is so large and there are components that are being heavily re used, the ReactJS might help. Still there might be many additional libraries required in order to handle the Data Architecture (Discussed later in a separate blog) such as Redux/Relay/Reflux. On the other hand the development effort of the React JS framework will be quite high since it is heavily typed and the task of the UI engineer is not just to style but he/she will have to consider the logic in a component. For an example simple expand collapse might require a change in the logic. See the below example.

Class Component1 extends React.Component {

    this.state = { menuOpen: true };

    hanldeOpenClick() { this.setState({ menuOpen: !this.state.menuOpen }); }

    ....

    render() { return <div style={{ LOGIC }}> <MENU_TO_OPEN/> </div> }

}

This would just be handled with CSS or with a lesser number of lines of code in Angular JS 2.

In the template

<div class="{ open ? 'open' : 'close' }">

    <MenuComponent></MenuComponent>

</div>

In the component class

export class ComplaintCard { 

    open: boolean;

    constructor() { this.open = false; } 

    openMenu() { this.open = !this.open } 

}

This might look quite simple but in React render its completely JS and in Angular template its pure HTML. With my experience Angular 2 did a great Job in the ionic application and ReactJS was OK at my internship, yet we had to go through difficulties when including external render component such as maps, color pickers and etc. We had to use raw HTML injections which was not quite a good thing in the library perspective, but after all served the purpose. It shall be noted that React Native and Angular JS with Ionic 2 are completely two different entities which are orthogonal to each other in fundamental terms.

Conclusion

If the system consists of a large number of Components that can be reused, and heavily interactive React JS is the choice. If the system is modular, with several big components, yet of lesser number of reusable entities Angular JS would be fine. Learning curve for React JS is lesser but the development effort will be greater. It also requires a full stack developer with good knowledge in JS + HTML + CSS to get the full use of it which can be easily segregated with Angular JS 2.