Progressive enhancement and JavaScript frameworks — a complicated relationship
<p>There’s long been an incompatibility between progressive enhancement (PE) and front-end JavaScript frameworks, making it a real challenge to build modern web applications that satisfy all use cases. However, a step change in front-end technologies means we have more options available. In this article I assess design patterns and use cases whilst considering the business impact so that you can choose the most appropriate course for your project.</p>
<h2>What problem does progressive enhancement solve?</h2>
<p>A <a href="https://en.wikipedia.org/wiki/Progressive_enhancement" rel="noopener ugc nofollow" target="_blank">common definition</a> of PE is that it can provide a high level of reliability to users because it ensures the application is usable via HTML alone — other ‘layers’, such as fonts, styles and JavaScript are treated as enhancements. There are notable challenges to that definition but for the purpose of this article that’s the one I’m going with.</p>
<p>To quote Gov.uk, PE attempts to “give all users the greatest chance of success”. Even if the number of visitors whose browser cannot or does not load JavaScript correctly is small, it is not insignificant. <a href="https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/" rel="noopener ugc nofollow" target="_blank">Gov.uk conducted a robust test</a> and found that 1.1% of visitors were not getting ‘JavaScript enhancements’. A progressively enhanced website should therefore be usable by close to 100% of users.</p>
<h2>What problems do UI frameworks solve?</h2>
<p>UI frameworks have solved a multitude of architecture and application design problems. They provide developers with a clear separation of concerns between UI, business logic and data and they handle complex interactions in a scalable way. They allow for component-driven development (CDD), which has transformed how organisations design, develop and manage UI collateral. Templating languages, such as <a href="https://handlebarsjs.com/" rel="noopener ugc nofollow" target="_blank">Handlebars</a>, attempted to solve this but they did not offer the power, structure and flexibility that UI frameworks do.</p>
<p><a href="https://rbultitudezone.medium.com/progressive-enhancement-and-javascript-frameworks-a-complicated-relationship-254892b652cb">Website</a></p>