Converting an online game to work without any JavaScript

Summary

Client-side rendering has become the dominant paradigm for building web apps. But frameworks like React can lead to major JavaScript execution bottlenecks during page load. For many web developers there’s a clear solution for this: Ship less JavaScript to the browser. Whether websites have to work without any JavaScript at all is a question almost as old as the web itself. By now, the answer is clear: No, they don’t. It’s firmly established that websites should be more than just structured and styled text. JavaScript execution is an integral part of (almost) every browser. Still, there are benefits to shipping less JavaScript to the Browser. So I wanted to do a little case study and see how far I could take this with my online board gaming website. The answer: I could take it all the way. My Goal: Fully optional JavaScript The vast majority of users will experience my (or any other) website with full JavaScript functionality, including fast client side rendering and websocket connections. It is not an option to degrade the experience of these users for a little experiment. So my goal was to make JavaScript execution optional without giving up any of UX benefits for users who have JavaScript enabled. These days one would call this “Progressive Enhancement,” meaning that just the HTML works on its own and CSS and JavaScript are not mandatory, but provide enhancements like fancy styling and a higher degree of interactivity. And while my gaming site is not usable without CSS, the principle stands. The site is fairly complex: It has online multiplayer games with real-time updates and a login functionality to save running games, so it’s a good proving ground for this idea. Look Mom, No JavaScript! So, how did I do it? Let me walk you through the key components. Server-Side Rendering The basis for all of this is that the whole website and game can be rendered on demand on the server. But I can’t rely on Server-Side Rendering alone, or else my page would be transported back...