Comparing Angular and React JS for SPAs

Comparing Angular and React JS for SPAs

• 1.
  1 Comparing React and Angular
• 2.
  Discussion Agenda • Reactand Angular Tool Overview • Side-By-Side Comparison • Sample Code • Architectural Comparisons: • Component Tree Architecture • Angular Digest Cycle • React Virtual DOM • Data Binding • Big Picture Comparison 2
• 3.
  Overview 3 Angular is aFramework for building Web Applications. React is a JavaScript Library for building User Interfaces.
• 4.
  Overview 4 Different problems areoften best solved using different tools. We will be discussing the features of React and Angular and how they are both best suited for building different types of Single Page Applications.
• 5.
  Overview – DeveloperInterest 5 Interestingly, in the 2017 Stack Overflow survey, React is the most loved technology, while AngularJS is the most used web development technology. In general, developers tend to enjoy working with React very much, while architectural decisions tend to be made favoring Angular. https://insights.stackoverflow.com/survey/2017#technology
• 6.
  Overview - Angular 6 •TypeScript-based open-source front-end web application platform for building single page applications. • Uses component based architecture. • Creates components by grouping structure and function into HTML templates. • Developers use components to build apps declaratively. • Provides simple framework solutions for foundational functionality (routing, HTTP, forms, etc) which can be customized. • Digest cycle re-renders entire view when data is updated. • Functionality is organized into modules which are loaded dynamically. • Angular apps are loosely MVC, MVW, etc. • Angular apps need to be built
• 7.
  Overview – React 7 •JavaScript library for building user interfaces. • Uses components to build UIs. • React components manage their own internal state • Components are written in JavaScript and JSX • Only contains library functions for building views • Builds views from encapsulated components so UI only updates necessary elements when data changes. • All components contain structure by implementing render() function which returns HTML. • React library is light, and needs outside tools to serve, reuse components, etc. • Standard tools exist, however (ex. create-react- app • React Uis also need to be built.
• 8.
  Side-By-Side Comparison ofAngular and React - Stats 8
• 9.
  Side-By-Side Comparison ofAngular and React - Features 9
• 10.
  Sample Code <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm"> <divclass="form-group"> <label for="name">Name <input class="form-control" name="name" required [(ngModel)]="hero.name"> </label> </div> <button type="submit" [disabled]="!heroForm.form.valid">Submit</b utton> </form> <div [hidden]="!heroForm.form.valid"> {{submitMessage}} </div> 10 var Saves = React.createClass({ getInitialState: function(){ ….. }, handleSubmit: function(e) { … }, render: function() { var savedText = ''; var submitText = 'Save'; if (this.state.saved) { savedText = 'You have saved this home.'; submitText = 'Remove'; } return ( <div className="saves"> <form onSubmit={this.handleSubmit}> <input type="submit" value={submitText} /> </form> {this.state.numSaves} saves. {savedText} </div> ); } }); JavaScript in HTML! JS Render function contains HTML! Angular Template React JS Class
• 11.
  Review: Component BasedArchitecture • Components are UI elements which encapsulate functionality and structure. • Components are custom HTML elements which contain HTML coupled with functionality defined in JavaScript. • Components also contain an isolated data scope. React components use their isolated scope to independently update the view when bound data changes. • The DOM is a tree of components. There is a root component and child components as in the basic DOM. 11
• 12.
  How Angular RendersComponents • Angular components exist in TypeScript Component files and their corresponding HTML template files. • Angular renders a view by loading the base component (defined in the base module) in TypeScript code and rendering the resulting tree of components. • When Angular renders a component, it loads the component TypeScript code into memory, then renders the resulting augmented HTML into the browser by parsing the HTML template file and adding functionality (events, bound data, etc) from the component code. • When data bound to the view changes, the framework Digest Cycle is triggered to refresh the rendered view. • The Digest Cycle checks all databindings and updates any necessary values in the augmented HTML, then re-renders the entire HTML DOM tree to refresh the page. 12 + =
• 13.
  How React RendersComponents • React components exist in JS files which contain HTML embedded into JSX. • A React view is built from independent components with isolated states. • The base ReactDOM.Render() JavaScript method renders the view by calling the render() method on each element in the DOM tree. Render() returns HTML. • Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. • The view consists of independent components which are only updated when the individual state changes. • When data bound to a React element changes, the render() method is triggered on the element and it is updated in isolation. 13 Every React component has a Render() method
• 14.
  React Virtual DOM •React handles the DOM considerably more efficient than Angular’s Digest Cycle does. • React keeps a copy of the DOM in memory, called the Virtual DOM. • When data on any component changes, React updates the Virtual DOM node associated with the updated data. • After updating the Virtual DOM, React diffs it with the actual DOM. • React uses the results of the diff to re-render any updated component on the actual DOM. 14
• 15.
  Angular Digest Cycle 15 •The Digest Cycle is the process by which Angular updates the view after model data has been updated. • The Angular framework registers a watch on all data bound elements. • When a data bound element changes, (or the digest cycle is manually triggered in code), the framework evaluates every data bound element to check if the value has changed. • The framework re-renders the entire DOM with the updated data.
• 16.
  Data Binding 16 • Angularuses 2 – Way Data Binding, where any updates on the UI are bound to the model automatically, and any model updates (service, async communication, etc) are immediately visible to the UI. Updating any piece of data triggers the Digest Cycle. • React uses 1 – Way Data Binding, where updates to the UI trigger events which call functions on the data model that update the data and state. Remember that components have individual data models. Disclaimer: Angular has optimized the Digest Cycle to work more efficiently, but I will leave the details for a further discussion
• 17.
  Big Picture Comparison •Angular’s Digest Cycle updates the entire view when any data bound to a UI element is updated. • Angular is a framework, so it contains a lot of useful of out-of-the box functionality that React would require customization to implement. • Angular is versioned and the standard implementation is well documented by Google. • Angular has a difficult learning curve, and in general is harder to debug than React. • The Angular CLI makes setup and development very easy, however. 17 • React diffs DOM updates using a copy of the DOM in memory and only updates relevant view components when data is updated. • The React landscape is quite mature, however, and it is easy to find tools to help streamline development. As a result, React apps are typically coupled with other JS libraries. • There is no standard React project configuration, and only a set of best practices (Redux, Flux, ect) • In my experience, React is easier to debug because the render() method is exposed in source code. • Use the create-react-app tool to do (almost) as much as the Angular CLI
• 18.
  Another Comparison Table