{"id":21555,"date":"2018-04-30T12:15:36","date_gmt":"2018-04-30T09:15:36","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21555"},"modified":"2018-04-30T12:03:01","modified_gmt":"2018-04-30T09:03:01","slug":"six-hat-thinking-on-angular-vs-react","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/six-hat-thinking-on-angular-vs-react\/","title":{"rendered":"Six Hat Thinking on Angular Vs React"},"content":{"rendered":"

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

1. Introduction<\/h2>\n

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.\u00a0 So, I thought of applying the \u201cSix Hat Thinking\u201d methodology to organize my thoughts and classify the information and data points.<\/p>\n

2. Six Hat Thinking \u2013 Decision Making Process<\/h2>\n\n\n\n\n\n\n\n\n\n
Color of Hat<\/th>\nAngular<\/th>\nReact<\/th>\n<\/tr>\n
\n

<\/h2>\n

WHITE \u2013\u00a0<\/em><\/strong>The facts, Just Facts\u00a0<\/em><\/strong><\/td>\n

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

<\/h2>\n

YELLOW- Values and Benefits<\/em><\/strong><\/td>\n

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

<\/h2>\n

<\/h2>\n

BLACK \u2013 Difficulties and Dangers<\/em><\/strong><\/td>\n

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

<\/h2>\n

<\/h2>\n

RED \u2013 Emotions and Feelings\u00a0<\/em><\/strong><\/td>\n

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

<\/h2>\n

GREEN \u2013 New ideas and possibilities\u00a0<\/em><\/strong><\/td>\n

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

<\/h2>\n

BLUE \u2013 Thinking about Thinking<\/em><\/strong><\/td>\n

Angular is suitable for:<\/p>\n
    \n
  • Large and complex applications<\/li>\n
  • Full stack developers with Java\/C# knowledge<\/li>\n
  • Developing Clean and Structured code<\/li>\n<\/ul>\n<\/td>\n
React is suitable for:<\/p>\n