Reactive Responsive Design: Part 1
Reactive Responsive Design is a term I coined to describe a new paradigm for front-end design. It’s rooted in responsive design and builds into it the principles of reactive programming with RxJS. What we get in return for this is a cleaner, more maintainable, more flexible, and more testable app.
At the heart of responsive design is the media query. The media query is a css3 standard that conditionally applies styling based on a specific css query. The most commonly used options are min-width
and max-width
, which when used together, provides a range of screen widths where styles are applied.
The problem is that media queries are a mess. Here are some reasons why:
- Where is my code!?
This is something I’ve often observed. Let’s say you have a web page with a lot of styling, and it has 5 responsive breakpoints. You need to take a look at the styling for the title on the page. You open the css file and find 1000+ lines of css with the title code spread throughout. - Teams can end up with different queries.
Especially when using modern JS frameworks you run the risk of different parts of a page having different breakpoints. This is an issue because your app could end up in a weird state on some screen sizes. What if a phone with an extra wide screen became popular and most of your app adjusted to mobile view on…