Webpack 5 Module Federation - Zack Jackson - CityJS Conf 2020

Описание: For years, we have never been able to consume or share modules from another standalone application. The nearest we had was externals or DLL Plugin. Both of which are not scalable or sustainable in large scale systems. For those who have built a micro frontend stack, likely understand the challenges. Introducing Module Federation, a feature that I bought for Webpack 5. It allows us to import code just like you would within a monolith. No overhead, no learning curves, and no real deviation from standard engineering practices. We have built a universal system for developers to consume modules of other applications at runtime. Be it server or client. This architecture has been considered a game-changer to Javascript and will change how we build applications in the future.

Bio
Principal Engineer, specializing in distributed application architecture at scale

Chapters / Excerpts:
Start [00:00:00]

Intro [00:00:40]
So module Federation aims to solve some challenges that we have in the JavaScript industry industry at large.

Context on Module Federation [00:02:48]
We have, let's say we have some kind of an app that looks something like this and. I want to say, let's say each part of these squares is a separate federated app, or even just the colors are separately.

Existing Options [00:06:54]
We've got native ESM. Some of the bonuses are just the facts of it is there's no build to link parts for encode is natively consumable, but on the flip side, there's no tree shaking. It only works with the ESM.

The Next Step in JavaScript Architecture [00:10:07]
So what we were looking for is something with Goodwill, build performance, good web performance, and a solution to sharing our dependencies.

Terminology [00:10:35]
So let's get down some of the terminology module Federation it's essentially got it. Got its name from Apollo's graph QL Federation,

What is Module Federation [00:16:30]
So what is module Federation? Exactly? It allows us to import code from other builds at runtime, we can share a vendor code dynamically at runtime.

An Example [00:19:23]
So going into a bit more of an example here, let's say we've got team AB and some dependencies

Container Plugin Deep Dive [00:26:56]
Yeah. So diving a little deeper into our container plugin. What it does is it has exposed modules that it will pretty much create, and it will also have the provided modules that.

Example at Scale [00:32:36]
I can also use import from dropdown at B slash drop down, and I can just use it as a normal synchronous module as well.

Demo Video [00:33:34]

Applied Architecture [00:35:05]
So applied architecture, where could, or what could we end up federating?

Another Example [00:35:38]

Decentralized Routing [00:38:29]
So. That's done through using the federated shell.

Non Webpack Compatibility [00:40:41]

Federation Dashboard [00:41:12]

Find Out More [00:42:25]

Q&A [00:43:17]

_________________________________________________________________

About Pusher Sessions:

We're bringing the meetup to you. With Sessions, you can watch recordings of top-notch talks from developer meetups -- wherever and whenever you want.

Meetups are a great way to learn from our peers and to keep up with the latest trends and technologies. As developers ourselves, we at Pusher wanted to bring this great content to more people... So we built Sessions. On Sessions, you can watch talks that interest you and subscribe to be notified when new content gets added.

If you run a meetup and want to get involved, kindly get in touch.

_________________________________________________________________

About Pusher:

Pusher is a hosted service with APIs, developer tools and open source libraries that greatly simplify integrating real-time functionality into web and mobile applications.

Pusher will automatically scale when required, removing all the pain of setting up and maintaining a secure, real-time infrastructure.

Pusher is already trusted to do so by thousands of developers and companies like GitHub, MailChimp, the Financial Times, Buffer and many more.

Getting started takes just a few seconds: simply go to pusher.com and create a free account. Happy hacking!