Under the hood of MDN's new front end
7 hours ago
- #Web Development
- #Web Components
- #Frontend Architecture
- MDN's frontend was rebuilt to improve developer experience and performance, moving away from a complex React app with technical debt.
- The new architecture uses web components (built with Lit) for interactivity within static content, enabling custom elements directly in Markdown.
- Server components handle static templating on the server, avoiding unnecessary JavaScript and CSS bundling for client-side rendering.
- CSS and JavaScript are loaded per-component only when needed, reducing bundle sizes and leveraging HTTP/2/3 for parallel loading.
- Declarative Shadow DOM is used for progressive enhancement, with fallbacks for older browsers via global styles.
- The development environment is faster and simpler, using Rspack as a build tool, with startup times reduced to seconds.
- Baseline web standards guide technology adoption, ensuring wide browser compatibility without excessive polyfills.
- Interactive examples and features like Scrimba integrations are now implemented as self-contained web components.