When it comes to distributed applications, Javascript logging gets tricky. What happens when you have multiple teams owning multiple parts of a single page or component? How can you use multiple DSNs in Sentry to send logs to the owning team, not the consuming team where the error occurred?

These are frustrating questions and up until now, I’ve seen no real examples to indicate a solution could work at scale. …

What are the available techniques for SSR applications powered by Module Federation? There are a few to choose from, let’s list them.

I’ve written and spoken about some tactics in varying degrees. But up until now, this information has never been centralized or easily discovered. It’s time to consolidate this information and get it out of my head once and for all.

There are vendors that could possibly help, like ESI — but third-party dependency isn’t going to be part of this discussion. I’m interested in at-runtime options that leverage webpack mechanics.

File collocation

Arguably the most simple.

You can use a…

Server-side rendering with Next 11 and Module federation is ready for prime time! Bonus: we got "hot" (live) reloading working on federated applications!

It’s been a long and painful road to module federation inside a next.js application — but we have finally been able to remove most of that pain.

This is the first time I can confidently say that we have been able to achieve full-scale Module Federation in Next.js — not just client-side but server-side as well!

Months ago, we demonstrated the concept of code-streaming, the idea was to make Node work like a browser and download remote…

The curious case of Module Federation and how do we write tests for federated applications.

If you haven't heard by now — Module Federation is a way to simply import() other modules/files between independently compiled and deployed bundles at runtime.

Possibilities are endless, especially after working with it for over a year. Before there was even an npm release, it was in production, installing directly from a branch on GitHub. It’s immensely more powerful then most think

With this new at-runtime orchestration and code sharing, a big question loomed.

How on earth will I test this?

Over a year later…

Javascript application performance can be tricky, even if the application has been well-tuned for speed — there’s a big area that engineering does not own and has little control over.

It’s the tag manager and third party code in general.

I can get an app to load and finish in 2 seconds. But with all the vendor code, the reality is usually a 2–3 additional seconds. There’s not much room for improvement left within the JS app itself.

There’s two Passions I have. Architecture and performance

I refused to accept that It could not be improved by engineering, without getting…

Part 1: Advanced Tactics to reduce App startup time

There’s lots of advice, but it seems to taper off when it comes to advanced performance tactics. I’ve read the articles, but it’s either too vague, too broad, or just basic stuff I have already done. Where are the more advanced articles on performance, most importantly — why are we not combining tech and talking about a stacked implementation?

This has been my real-world experience, tools, or tactics I've used. I like web performance and am a little obsessed. These ideas can be a little quirky or abstract, there are probably better ways to handle perf.

With that said…

The Basics

Advanced implementation tactics to attach a startup sequence to micro-frontend applications designed using Module Federation.

I’ll get this out the way right from the start, something that’s been requested hundreds of times now. You can set webpack_public_path dynamically (not hardcoded in the webpack config) with startup code, but there are easier solutions now built into webpack 💯 for dynamic public paths. Startup code has more advanced possibilities, but for the sake of introduction- I’m demonstrating a manual method that uses the startup code pattern. I’ll develop some better examples soon which demonstrate complex integrations.

What is startup code?

In the context of…

Photo by Ilya Pavlov on Unsplash

Module Federation was already powerful. So we doubled its power by introducing an advanced API. This technology is clearly a game-changer in javascript architecture

Beta 17 has been out for a week or so. It packs a powerful punch. Despite the power that’s been introduced in the latest release. We are far from completion.

Module Federation is just getting started.

What has changed?

Some Major work went into this release. Rewritten Externals Plugin, Changes to how webpack runtime works, Changes to the webpack graph, changes to chunking systems, and the startup sequence of webpack. …

Stitching two independent bundles into one single page application, at runtime

A short and sweet guide to using Module Federation on two independently deployed web apps, so that they can work like a monolith. Sharing code between themselves at runtime.

We’re going to federate two independent, very basic little react apps.

Photo by Kaleidico on Unsplash

What we have started out is a bare-bones React app, hosted on port 3001

// app1 - running on localhost:3001
import React from "react";

const App = () => (
<h1>Basic Host-Remote</h1>
<h2>App 1</h2>

export default App;

On port 3002 we have another single page application…

Module federation allows a JavaScript application to dynamically run code from another bundle/build, on client and server.

This is the JavaScript bundler equivalent of what Apollo did with GraphQL.

A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not truly standalone and usually, a limited number of dependencies are shared. Moreover, sharing actual feature code or components between separately bundled applications is unfeasible, unproductive, and unprofitable.

What is Module Federation?

It’s a type of JavaScript architecture I invented and prototyped. Then with the help of my co-creator and the founder of Webpack — it was turned into one…

Zack Jackson

Principal Engineer of Web @ Lululemon. Specializing in Webpack and Javascript Orchestration at scale. Creator of Module Federation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store