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

Pub/Sub or Event-based

Event Source

Event Handler

user clicks

window.alert('Are you sure?')

onClick='confirmSave()'

Pub/Sub or Event-based

updated data

fetchDetails()

updateCache()

showToastMessage()

Pub/Sub or Event-based

Reactive or Streaming

Event Source

mouse clicks

filter(x >= 2)

throttle(250ms)

map(list.length)

<li *ng-for="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

By Doguhan Uluca

Angular vs React Architecture

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

  • 1,677