Doguhan Uluca PRO
Author of the best-selling Angular for Enterprise-Ready Web Apps. Google Developers Expert in Angular. Agile, JavaScript and Cloud expert, Go player.
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?
