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
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?
