Home » JavaScript » Six Hat Thinking on Angular Vs React

About Saravanan Subramanian

Saravanan Subramanian
Saravanan Subramanian is a System Architect cum Agile Product Owner for developing cloud based applications for service provider back office enterprise applications using open source technologies. He is passionate about Cloud Technology and Big Data Analytics.

Six Hat Thinking on Angular Vs React

The idea of this article is compare and contract Angular and React, so that we can find the suitable one for our need.

1. Introduction

There are so much of information found on internet to ensure that we will get into analysis paralysis when trying to make a decision on Angular or React for the next Web Application.  So, I thought of applying the “Six Hat Thinking” methodology to organize my thoughts and classify the information and data points.

2. Six Hat Thinking – Decision Making Process

Color of HatAngularReact

WHITE – The facts, Just Facts 

  • Angular is a complete end-to-end framework
  • It supports MVC
  • Typescript
  • Two-way Binding by default
  • Asynchronous processing
  • Developed and maintained by Google
  • Focus on Single Page Application
  • Command Line support for development tools
  • Is a View library
  • Virtual DOM Technology
  • JSX – Supports pure Javascript coding for HTML/ CSS
  • One-way binding by default
  • State management for using Redux
  • Developed and maintained by Facebook
  • Supports Multi Page Application
  • Command Line support for development tools

YELLOW- Values and Benefits

  • Enables Java developers quickly develop Web Application.
  • Object Oriented Programming style
  • Dependency Injection
  • Very Small, because it is just View component.
  • JSX abstracts HTML and CSS, so its all JavaScript code.
  • Functional programming style
  • Virtual DOM

BLACK – Difficulties and Dangers

  • Initial learning curve of Typescript for non-java script developers
  • More hierarchical and structure might look complex for some Java Script developers
  • Slightly heavier size of application when compared to React.
  • Fear of JavaScript Fatigue
  • Scaling the application with more and more functionality
  • JSX limitations (Why not direct HTML/CSS)
  • Everything is component.  No Controller/Service.
  • Javascript library life cycle management

RED – Emotions and Feelings 

  • Happy that it supports OOPs.
  • Code structure enforced with MVC pattern
  • Everything under the hood solution.
  • Worried about finding a new JavaScript library every time, we need new function/technology (JavaScript Fatigue)
  • Worried that code may become unorganized over the period of time, since the code structure must be enforced by the maintainers and developers.

GREEN – New ideas and possibilities 

  • Typescript quickly enables Java developers to be come Web Developers.
  • Highly opinionated and enforces code structures
  • Different components for Model, View, Services and Routers.
  • No need for additional / external libraries.
  • Quick to develop application
  • Suitable for small team of JavaScript experts focused on Web UI development
  • Good for teams already worked on other Javascript librairies such as  Ember, Backbone, Dojo.

BLUE – Thinking about Thinking

Angular is suitable for:

  • Large and complex applications
  • Full stack developers with Java/C# knowledge
  • Developing Clean and Structured code
React is suitable for:

  • Large web application which is a collection of many small applications
  • The team with experience in JavaScript  and ready to build everything on their own
  • Teams focusing only Web UI development

3. Summary

As discussed, my decision would be based on team’s competency, willingness to explore new technology, nature of the application, project timelines. The points discussed under “Red Hat” may not be acceptable for everyone, but individuals emotions and feelings might affect the final decision.  Overall I feel both Angular and React are capable and matured technologies in their own unique way of building the web app.

References:

[1] – Angular – https://angular.io/

[2] – ReactJS – https://reactjs.org/

[3] – https://en.wikipedia.org/wiki/Six_Thinking_Hats

[4] – https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

Published on Web Code Geeks with permission by Saravanan Subramanian, partner at our WCG program. See the original article here: Six Hat Thinking on Angular Vs React

Opinions expressed by Web Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments