Four highlights from JAMStack Conf 2022
I had the pleasure of attending the 2022 JAMStack conference in San Francisco at the beginning of November. The JAMStack is an architectural approach that broadly follows a couple of principles:
- Pre-rendering — The entire front end is prebuilt into highly optimized static pages and assets during a build process. The prebuilt site then can be served from a CDN.
- Decoupling — Clean separation between systems or services to allow for easy composability
- Enhance with JavaScript — JavaScript and APIs can be added on top of prebuilt sites to talk to backend services.
A popular misconception is that the JAMstack is only for static sites (e.g. blogs and basic websites) but there are examples of dynamic data-rich sites that have been built with this architectural approach. One example is the COVID-19 tracking project. This architectural approach allowed the project to scale from 0 to 2 million users without having to worry much about server load (📖 How to Build Dynamic Applications on the Jamstack with Serverless Functions).
A lot was talked about during the two-day conference. Below are four highlights:
Edge Computing
One thing that was repeatedly talked about at the conference was building things at the edge with edge functions. Edge functions allow you to serve code from servers closer to your users. There are many advantages to this. One is latency: the closer the server is to your user, the lower the latency. Another is the ability to localize content and easily do things like A/B testing.
Additional resources
- Understanding Edge Functions: The Edge and Beyond
- Demystifying edge functions
- We’re all living on it. But what exactly is The Edge?
- Lambda@Edge
Sentry
Sentry is an application monitoring and error-tracking software. There are plenty of similar applications out there, but where Sentry stands out is its ability to track where the user encountered the error, what devices they were using, and the exact lines of code change suspected of causing the bug.
Additional resources
Qwik
Qwik is a new Frontend framework focusing on load times and getting a website to an interactive state (Time to interactive) as fast as possible. The way that Qwik handles this is by loading the snippet of JavaScript that is needed when a user tries to interact with a UI element. For example, when a user hovers over a button, the JavaScript for the button interaction (and only the button) gets downloaded onto the user’s browser. This code splitting allows Qwik to be exceedingly fast.
Additional resources
Container Queries
Container queries is a new CSS feature released in 2021 that allows us to style child elements differently based on the parent element’s size. As of writing this, most modern browsers support this new syntax. This is a huge deal when it comes to reusing existing responsive components. Before container queries, if you wanted to reuse a responsive component, you would need to apply different styles to the component based on where the component lives. With container queries that are no longer needed . Components can be written so that they reflow based on the parent container size rather than the viewport size. This opens up a whole new set of possibilities for responsive design.
