Day 2 summary - AI/ML edition
- Part of the Micro-frontends building blocks Series
- Meet Module Federation
- But, what seems to be the problem?
- Module Federation super powers
- Good build performance
- Good web performance
- Good management for shared dependencies
- Import code from other builds, at runtime
- Deploy independent code, without needing to re-deploy consumers
- Redundancy and self-healing capabilities
- Micro-frontends will work like a monolith
- Developer experience improved, maintaining customer experience
Part of the Micro-frontends building blocks Series
Meet Module Federation
Later on, it was extended to support server-side rendering scenarios. Since the method I’m going to explore in building my micro-frontends is client-side composition using React.js, I’ve identified Module Federation as the perfect technology to use.
But, what seems to be the problem?
Scalability - its the problem that Module Federation tries to solve.
So that large applications can be split easily where each part can then be shared among other parts and may be developed by separate teams.
Module Federation super powers
Good build performance
Because Module Federation encourages you to arrange your application into separate projects so that you can build and deploy them independently (therefore in parallel), each project can be built and deployed in isolation and may be done by different teams.
Good web performance
The problem with the usual NPM module composition is that it typically increases the application size as the number of dependencies increase. Module Federation provides you an option to lazy load bundles, to avoid loading them when your application loads, but only loading them on demand. This results in a better web performance as it avoids having to download modules before they are actually needed.
Good management for shared dependencies
And because Module Federation provides excellent dependency management, it efficiently resolves vendor and third-party dependencies so that only one version of a library is ever loaded by your application. How good is that?
Import code from other builds, at runtime
Instead of sharing code and thinking of “libraries” when using NPM package approach, we can think of applications that use Module Federation not dissimilar to APIs. Now web applications can expose functionality to other applications, the same way that it can also consume from other applications.
Deploy independent code, without needing to re-deploy consumers
The ability to have evergreen functionality is very appealing to the developer. There will be no need to redeploy the consumers anymore when exposed dependent functionality will have changed. I have to say that this in itself is a very powerful feature, which will need very careful consideration to avoid unintended results.
Redundancy and self-healing capabilities
With shared dependencies, Module Federation maintains a dependency graph for your whole application, so that even though applications fail to declare a dependency or when there are network issues, it knows the needed dependencies so that it takes care of downloading it as required.
Micro-frontends will work like a monolith
Bringing in shared functionality to your application is quite simple - either synchronous loading by importing the bundle as usual. Or asynchronous loading by using lazy loading, to only load the dependencies when required.
Developer experience improved, maintaining customer experience
Think about all the things that Webpack can bundle - scripts, assets, styles, images, markdowns, and more by using third party Webpack loaders. All these can be federated and shared though Module Federation, great, right?
However, as great as Module Federation is, it is important to remember that it is not a framework, and as such it does not handle any of the implementation details for you. For example, you could use awesome client-side composition libraries such as Single SPA, or Next.js and just leverage Module Federation to do the module loading over the wire for you.
In this article we have introduced Module Federation as an excellent option for building your micro-frontend application.
It promotes scalability by enabling multiple teams to work on a separate applications by allowing applications to share and consume functionality at runtime.
It makes applications more compact through the use of shareable dependencies.
It enables evergreen functionality so that you won’t need to build and deploy your consumers when the shared functionality changes.
Developer experience is great since many developers are already familiar with the Webpack ecosystem
Once configured, your application will work like a monolith which is awesome.
- Webpack 5: Module Federation
- Module Federation Examples
- Webpack 5 Module Federation - Zack Jackson - CityJS Conf 2020
- Microfrontends with Module Federation: What, Why, and How
Day 1 summary - AI/ML edition
What is Module Federation and why it’s perfect for building your Micro-frontend project
What you always wanted to know about Monorepos but were too afraid to ask
Using Github Actions as a practical (and Free*) MLOps Workflow tool for your Data Pipeline. This completes the Data Science Bootcamp Series
Final week of the General Assembly Data Science bootcamp, and the Capstone Project has been completed!
Fifth and Sixth week, and we are now working with Machine Learning algorithms and a Capstone Project update
Fourth week into the GA Data Science bootcamp, and we find out why we have to do data visualizations at all
On the third week of the GA Data Science bootcamp, we explore ideas for the Capstone Project
We explore Exploratory Data Analysis in Pandas and start thinking about the course Capstone Project
Follow along as I go through General Assembly’s 10-week Data Science Bootcamp
Updating Context will re-render context consumers, only in this example, it doesn’t
Static Site Generation, Server Side Render or Client Side Render, what’s the difference?
How to ace your Core Web Vitals without breaking the bank, hint, its FREE! With Netlify, Github and GatsbyJS.
Follow along as I implement DynamoDB Single-Table Design - find out the tools and methods I use to make the process easier, and finally the light-bulb moment...
Use DynamoDB as it was intended, now!
A GraphQL web client in ReactJS and Apollo
From source to cloud using Serverless and Github Actions
How GraphQL promotes thoughtful software development practices
Why you might not need external state management libraries anymore
My thoughts on the AWS Certified Developer - Associate Exam, is it worth the effort?
Running Lighthouse on this blog to identify opportunities for improvement
Use the power of influence to move people even without a title
Real world case studies on effects of improving website performance
Speeding up your site is easy if you know what to focus on. Follow along as I explore the performance optimization maze, and find 3 awesome tips inside (plus...
Tools for identifying performance gaps and formulating your performance budget
Why web performance matters and what that means to your bottom line
How to easily clear your Redis cache remotely from a Windows machine with Powershell
Trials with Docker and Umbraco for building a portable development environment, plus find 4 handy tips inside!
How to create a low cost, highly available CDN solution for your image handling needs in no time at all.
What is the BFF pattern and why you need it.