An in-flight port from Angular to React, a tale of performance and happiness
summary
A production e-commerce checkout (Nets Easy iframe) gets rewritten piecewise from Angular to React while releasing every three weeks; webpack and bundle-analyzer reveal ~4 MB payload bloated by Angular, RxJS and jQuery which is trimmed to 725 KB (eventual 82% reduction). State runs in parallel Redux and ngRx via a custom Angular service and middleware to mirror actions, effects become redux-saga generators, and tests plus BrowserStack keep stability. Result: startup drops from ~6s to ~300 ms, fewer bugs, faster feature velocity and happier developers. Redux/ngRx parity redux-saga for side effects 4MB → 725KB (82%) 6s → 300ms
AI-written summary · about
chapters (27)
- 0:00Intro
- 1:24What is Easy
- 2:54Demo
- 9:00Release cycle
- 9:39Demonstration
- 12:02Technology
- 13:57Components
- 15:06Component tree
- 15:55Templates
- 16:44Angular to React
- 19:57Performance
- 20:30Production
- 21:15State
- 23:38Relaxed
- 24:24How it works
- 26:17Action lifecycle
- 28:39Angular component
- 29:36Redux component
- 30:54Side effects
- 32:29Funk vs Saga
- 35:20Bootstrap
- 37:54Results
- 40:40Tools used
- 41:40What did we replace
- 42:24Test coverage
- 43:19Why did we choose this gradual approach
- 45:02Should everybody rewrite
