Angular vs React

Architecture Quick Overview

Doguhan Uluca

SPA Targets

  • Native web
  • Progressive web
  • Mobile
  • Desktop

Why?

Shadow

DOM

vs

Virtual

DOM

Lack of Native F12 Dev Tools Support

😢

😞

scoping

performance

Redux

... is a predictable state container

  • Single source of trust
  • State is read-only
  • Changes are made with Pure "Reducer" Functions

Reactive Extensions

... programming with asynchronous data streams

  • rxjs
  • Observables
  • Toolbox of functions to combine, create and filter the streams

Event-Driven

Event Source

Event Handler

user clicks

window.alert('Are you sure?')

onClick='confirmSave()'

Publish-Subscribe Pattern

updated data

fetchDetails()

updateCache()

showToastMessage()

Pub/Sub or Event-based

Reactive Streams

Event Source

mouse clicks

filter(x >= 2)

throttle(250ms)

map(list.length)

<li *ngFor="let i in list | async">

window.alert('Are you sure?')

Reactive or Streaming

Code Architecture

Presentation

API

Business

Persistence

Best Practices

IDE

Patterns

Libraries

TESTING

View

View Model

Controller / Router

Services ($http, redux, logic)

Best Practices

IDE

Patterns

Libraries

TESTING

Anatomy

of an Angular App

Angular

app.ts

rootRouter

services

filters

directives

/a: default

/master

/detail

/b/...

/c

childRouter

/d

/e

/f

Anatomy

of a React App

React

App.js

Presentational

Container

Provider

Router

Component Legend

react-router

react-redux

Angular vs React Architecture (High Contrast)

By Doguhan Uluca

Angular vs React Architecture (High Contrast)

What are the similarities and differences between Angular and React? Why and when should you use one versus the other?

  • 1,884