Clash of Front End Technologies – Angular Vs ReactJS

September 8, 2017 | Sudhir Ganesh, Director – Engineering, Celestial Systems

Summary: Since last few years there has been quite an explosion of JavaScript frameworks in the technology landscape, both open source and proprietary. However, only few of them have got acceptance and traction in terms of adoption by the industry to build large scale web applications. There are significant factors that determine adoption of a technology such as learning curve, code maintenance, upgrades, support and last but not the least cost. Many large-scale enterprises have invested time and effort in developing new JavaScript technology and are competing against each other to gain significant market share. This white paper focusses on two such frameworks “Angular and ReactJS” developed by tech giants Google and Facebook respectively. Both these technologies are unique in their own sense and have significant importance in development of front end for web applications. In this whitepaper, we shall focus on comparison of key features of both the technologies.

Angular

Angular is developed and maintained by Google and was first released in 2009 as an open source JavaScript framework for front end development for dynamic web applications. It is well structured and has a great deal of support in the developer community. Using Angular it is easy to extend HTML syntax to develop UI components for the web application. There is significantly less amount of code that needs to be written for data manipulation. This is achieved by means of two-way data binding and dependency handling. Other major advantage of Angular is that it can be easily used, modified and shared by anyone.

ReactJS

ReactJS was being used as an internal IP by Facebook and Instagram and was released as an open source library in 2013. It is not exactly a framework and focusses on performance oriented view rendering in the front end of the web application. ReactJS uses a special syntax “JSX” which is very much similar to HTML. Using the concept of Virtual DOM ReactJS ensures that only the changed portion of the UI gets updated instead of the whole component or page. Hence all the UI updates happens automatically.

Simple Hello World Programs in Angular & ReactJS

Despite basic differences, there are some similarities and overlaps in some of the functions in the two. 

Angular

ReactJS

<script src="/angular.min.js"></script>

<div ng-app>

  Hello {{ "World" }}

</div>

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('root')

);

How does one decide which technology to use and when? The following comparison gives insight into significant points to consider before choosing between Angular and ReactJS.

Comparison Point

Angular

ReactJS

Technology Type

Web Application Development Framework that works on Client side

JavaScript Library that works both on Client and Server side

Development and Maintenance

Google

Facebook, Instagram

Usage

To develop dynamic Single Page Applications

To develop UI for large dynamic data applications

Programming Language

JavaScript/HTML (No need to learn any new language)

JSX (Java Serialization to XML) syntactically similar to HTML

GitHub Contributors

1602(as on 8th September 2017), Large Community support

1052(as on 8th September 2017), Developing Community

DOM Type

Regular (Heavy weight, less organized, slower)

Virtual (Light weight, more organized, faster)

Data Binding

Two Way (Displays value in the view as well as automatically updates the same in the model)

One Way (Only binds updated value of the model to the view)

Ramp up Time

High (Difficult to learn and understand)

Low (Easy to learn and understand)

When to use?

For quick deadline leveraging the need of a comprehensive development framework

For dynamic content in Single Page view of the web application

References:

1. https://code-maven.com/getting-started-with-angularjs

2. https://www.tutorialspoint.com/angular2/

3. https://facebook.github.io/react/docs/hello-world.html

4. https://github.com/facebook/react

5. https://github.com/angular/angular.js

 

ホーム     企業     オファリング     リソース     キャリア     問い合わせ

テクノロジーパートナー

SENCHA     APTELIGENT     MOXTRA     LEANPLUM     SAUCELABS

 

© 2001-2017 Celestial Systems Inc. All Rights Reserved.