Chapter 4 User InterfaCe DesIgn Evaluating UI frameworks To evaluate UI frameworks, you should consider the following: Data Flow The main difference between Angular and React is the way of handling data and managing the state of application. Angular is a fully featured MVC framework. React is just more of a ‘V’ in the MVC. Angular allows two-way data binding, while React allows one-way data binding. Unidirectional data flow, also called one-way data binding, means any changes you make to the model affect the view, but not the other way around. This way, the data only flows in one direction, whereas with two-way or bidirectional data binding any changes you make to the model affect the view, and vice versa; hence with React, state management is provided and managed by a third-party library (Flux, Redux, MobX). Angular is capable of managing state itself, but React needs to integrate with other third-party libraries. Angular has more features out of the box than React. Language Angular is a JS framework build using typescripts, whereas React is a JavaScript library but recommends using JSX(XML syntax to JavaScript). Instead of writing the traditional way—a classical approach of separating markup (HTML) and logic (JS)—React combines them in the components using an XML-like language that allows you to write markup directly in your JavaScript code. Performance DOM is the Data Object Model of the DXP application. Angular uses the browser’s DOM, while React uses a virtual DOM. A virtual DOM is a simplified version; therefore, by using a virtual DOM you can change any element very quickly without rendering the whole DOM. Therefore, React has better performance over Angular. Both technology stacks are flexible and powerful. Their usage depends upon the business application. Both accomplish the same thing but React needs the support of an additional library that provides framework capabilities to the RTS; otherwise it is ideal for a logicless application. 139