Thoughts on Frontend Architecture and Design Systems

I've developed some strong, but weakly held, opinions about React and SPA's after working with them for about 4-5 years.

When it comes to making a design system, the best option would be to use Web Components instead of React components. This way you have a lot of flexibility about where you can use your components: server-rendered HTML, Vue, iOS, Android, React, React Native, Flutter, etc. You can make generic components with Web Components and then embed them in any environment. For example, you can use Web Components in React to take advantage of React’s capabilities for state/ data management and syncing with the DOM. One example of a prominent use case with Web Components is by Apple. In 2019 they used Web Components for their Apple Music web client.

Another thing I’m getting interested in is the idea of progressive enhancement. According to this design philosophy a web page should begin with just basic HTML and CSS and then you can add Javascript to add interactions. This way you build a design that is usable on "older browsers and devices with limited capabilities"(MDN) while newer browsers and devices get the full experience. Approaching design this way also lowers development costs, increases simplicity, and helps you avoid taking a SPA by default approach. I think MVC frameworks like Ruby on Rails, Phoenix, and Django have great support for generating views that can be enhanced with simple Javascript libraries while React can be used on a case-by-case basis depending on the feature requirements. For example, if a page is either quite static with not much going on or does not need offline support, perhaps it does not need to be made in React. There are also interesting technologies like Hotwire, HTMX, and service workers that can be used to create a SPA-like website before going down the SPA route. Even React recommends a similar approach in their legacy documentation. According to them, the majority of websites don’t need to be single-page applications and you can add React in an incremental approach. While React has its benefits, you have to spend time thinking about things like SEO, the Back and Reload buttons, build tooling, etc. Using server-rendered views by default means you may not need to have these discussions. Instead, you can reduce frontend complexity and focus on where the value is created which is mostly on the backend with the data.

Another interesting approach I have recently discovered and am keen to look into and experiment with is to use server rendered views in native mobile apps to simplify development. This way you use the technology that is right for the platform, i.e., Swift for iOS or Java/ Kotlin for Android, and start by displaying your content in a WebView. Again, just like progressive enhancement, if you find this approach limiting then you can reach out to the native capabilities provided by the platform. I think this is a nice approach for apps or screens that require either a constant connection to the internet or do not have much interactivity. For example, I think an email client might be a good candidate for this while a game wouldn’t.

What do you think?