Cool to see #MDN exploring a unique #frontend architecture which better meets their needs.

https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

A lot of the core ideas here are stuff I've been trying to formalize in #HydroActive and #rules_prerender. Islands of reactivity on a mostly static page and driving resource loading by what gets rendered are both key features most FE systems lack.

#web #JavaScript

Under the hood of MDN's new frontend | MDN Blog

You may have spotted that MDN has a new frontend. There's plenty happening under the surface, so let's unpack the technologies we chose, the architectural decisions we made, and why we did a rebuild at all.

MDN Web Docs

#rules_prerender tries to go a step further with partial prerendering at build time (reducing rendering work on the server) and driving *bundling* by what gets rendered, not just how resources are loaded on the client. We can eagerly load all required JS and CSS up front.

https://github.com/dgp1130/rules_prerender/

GitHub - dgp1130/rules_prerender: A Bazel rule set for prerending HTML pages.

A Bazel rule set for prerending HTML pages. Contribute to dgp1130/rules_prerender development by creating an account on GitHub.

GitHub

#HydroActive supports deferring upgrade / lifecycle hooks until the component is interacted with, solve load ordering so your dependencies are always upgraded, and manages dependencies on components so they are hydrated exactly when they need to be and no earlier.

https://github.com/dgp1130/HydroActive

GitHub - dgp1130/HydroActive: An experimental library for hydrating web components and adding "sprinkles of reactivity" to pre-rendered HTML.

An experimental library for hydrating web components and adding "sprinkles of reactivity" to pre-rendered HTML. - dgp1130/HydroActive

GitHub

I do like MDN's post as a great case study of the benefits of investing in your build process.

You often aren't designing a website, so much as a process which *will generate* a website. You should care about your build process just as much as the actual client code you're shipping.