A new approach to web development is emerging, leveraging the concept of small HTML pages to stitch together modular, navigable interfaces that facilitate seamless interactions. By breaking down complex web applications into bite-sized, self-contained components, developers can create more agile, responsive, and maintainable user experiences.
Overview
This modular strategy involves avoiding in-page interactions that require JavaScript in favor of multi-page navigations that rely on HTML and are enhanced with CSS view transitions. For example, a website's menu can be implemented as a separate page that is linked to from other pages, rather than using JavaScript to expand or slide out the menu.
How it Works
The implementation of this approach involves creating a link to the menu page from other pages, and then using CSS view transitions to enhance the navigation interaction. When the menu page is navigated to, the link is changed to an X that closes the menu, which is still just a link back to the previous page, but enhanced with JavaScript to actually do a back in the browser history. This makes it so opening/closing the menu doesn't add an entry to the browser history.
The code for this implementation is straightforward, with the normal page having a link to the menu page, and the menu page having a link back to the previous page with an onclick event that checks the document referrer to determine whether to use history.back() or window.location.href.
Tradeoffs
This approach requires careful consideration of what is essential to navigation and how the interaction can work across multiple pages. It also requires ensuring that page size stays small so the interaction is both fast and robust while remaining intuitive to use. However, the benefits of this approach include simpler and more maintainable code, as well as improved performance and responsiveness.
In conclusion, the modular web development approach using small HTML pages offers a promising way to create more agile, responsive, and maintainable user experiences. By avoiding in-page interactions that require JavaScript and instead using multi-page navigations with HTML and CSS view transitions, developers can create faster, more robust, and more intuitive web applications.