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