Angular vs React

Architecture Quick Overview

Doguhan Uluca

@duluca

TheJavaScriptPromise.com

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