Reactive Responsive Design
summary
Proposes replacing scattered CSS media queries with JavaScript-driven breakpoints using window.matchMedia wrapped in observables, implemented as the rxrs library and a centralized window-size service. Demonstrates a survey-editor prototype that combines sidebar state and viewport observables to decide layout, prevent unused components from mounting (only load when needed), and reduce asset requests on mobile. Claims easier maintenance, uniform breakpoints across a team, straightforward RxJS marble testing for layouts, and no observed performance regressions.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 0:46State of responsive design
- 3:37Problems with media queries
- 7:31Using matchMedia and observables
- 10:20Introducing rxRS library
- 12:07Practical usage examples
- 14:31Codifying app breakpoints
- 14:59Handling complex layouts
- 18:10Reactive responsive demo
- 20:43Loading components conditionally
- 22:07Testing layouts with observables
- 23:19Summary and pitch
related talks
33mOne App Fits All: Building Responsive Experiences in React
15mResponsive Design vs. Adaptive Design
43mMediaqueryless Responsiveness
28mResponsive Components: Present & Future
35mModern CSS Replacements for Better Responsive Code
01h 01mThe Evolution of Responsive Web Design: What's Next?
36mFunctional-Reactive User Interfaces in the modern Web Platform
13mBreaking Out of Media Queries