Delighting Users With Performant Apps
summary
Recreates an Apple Music–style web player using Ionic + Angular and shows concrete performance fixes: avoid animating box-shadow after paint-flashing and a 6x slowdown reveals ~60 style recalcs/sec and CPU spikes; instead promote pseudo-element to its own layer and scale that to cut repaints and battery use. Implements dynamic reflow with FLIP animations (getBoundingClientRect, compute deltas, 266-line production code for complex leaving transitions) and offload color extraction to a web worker using Color Thief — result runs smoothly at 60fps.
AI-written summary · about
chapters (14)
- 0:00Introduction to performance
- 1:26UI performance focus
- 3:13Native app expectations
- 6:24Imitating native UI
- 8:30Box shadows and performance
- 12:09Impact of box shadows
- 14:37Optimizing shadows with pseudo elements
- 20:23Dynamic animations and layout shifts
- 21:47FLIP animations explained
- 26:46Complex animations with FLIP
- 30:00Reactive background changes
- 32:24Web workers for heavy tasks
- 36:38Live demo of the app
- 39:57Q&A and closing
related talks
17mHigh performance design of angular
17mDelighting users with performant apps
31mMobile-friendly web apps with Angular
27mSmooth Moves: Rendering at the Speed of Right ®
33mPerceived faster Angular applications
34mHigh-Performance Applications with Angular
29mAwesome Progressive Web Apps with Angular
20mThrough the Sound Barrier: High-Performance Apps with Angular