Comparing Angular and React JS for SPAs

Discussion Agenda
• React and 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

Overview
3
Angular is a Framework for
building Web Applications.
React is a JavaScript Library
for building User Interfaces.

Overview
4
Different problems are often 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.

Overview – Developer Interest
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

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

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.

Side-By-Side Comparison of Angular and React - Stats
8

Side-By-Side Comparison of Angular and React - Features
9

Sample Code
<form (ngSubmit)="onSubmit(heroForm)"
#heroForm="ngForm">
<div class="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

Review: Component Based Architecture
• 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

How Angular Renders Components
• 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
+ =

How React Renders Components
• 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

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

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.

Data Binding
16
• Angular uses 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

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

Comparing Angular and React JS for SPAs

Recommended

More Related Content

What's hot (20)

Similar to Comparing Angular and React JS for SPAs (20)

Recently uploaded (20)

Comparing Angular and React JS for SPAs