Progressive enhancement and JavaScript frameworks — a complicated relationship

<p>There&rsquo;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&nbsp;<a href="https://en.wikipedia.org/wiki/Progressive_enhancement" rel="noopener ugc nofollow" target="_blank">common definition</a>&nbsp;of PE is that it can provide a high level of reliability to users because it ensures the application is usable via HTML alone &mdash; other &lsquo;layers&rsquo;, 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&rsquo;s the one I&rsquo;m going with.</p> <p>To quote Gov.uk, PE attempts to &ldquo;give all users the greatest chance of success&rdquo;. Even if the number of visitors whose browser cannot or does not load JavaScript correctly is small, it is not insignificant.&nbsp;<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>&nbsp;and found that 1.1% of visitors were not getting &lsquo;JavaScript enhancements&rsquo;. 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&nbsp;<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>