Micro-Frontends, where you take large UI components and live share them between applications, have huge potential, but the mechanics of implementing them can get in the way of realizing that value. In this article, and in its accompanying video, I look at how to use Webpack 5’s built in Module Federation feature to make sharing Micro-Frontend code easy.
In fact, Module Federation makes sharing components so easy that we get to think about two follow-on issues that come with Micro-FEs:
With the move to NodeJS we lost the architectural pattern of creating pluggable applications. Java application servers can be configured at runtime to override pluggable elements, like database drivers, etc. Can we get there with NodeJS? Yep! With the webpack plugin from ScandiPWA we can have our cake and eat it too!
The first job is to set up a Create React App. Let’s do this in a directory called
% mkdir scandi-test
% cd scandi-test
% yarn create react-app my-host-app
Once that’s done we can go into the host application and update it to use
So you want to use TypeScript in your React application, but even the hooks are giving you grief. Well, let’s get you comfortable with how to use TypeScript typing with those hooks and get you on your way.
This article is meant to supplement the excellent React TypeScript Cheat Sheet which you should definitely take a look at.
useState is a fun one because we use it all the time and most of the time it’s fine, until it’s not. Take this example:
const [myNumber, myNumberSet] = useState(10);const onClick = () => myNumberSet(20);
TypeScript is totally fine with this…
Here is an interesting question; are the types in your TypeScript project enough documentation, on their own, to allow someone to learn the library?
That was the question I asked myself when I saw the Amazon had released a React UI library for AWS. They only released the code and the TypeScript types. No documentation. No storybook or styleguidist. Just the code and the types.
Now I love digging into UI libraries. And this was a fun challenge. Can I learn the library from just the source? …
Unless you plan on integrating your Vue components into applications that use a different framework you simplify your architecture dramatically by Webpack 5’s Module Federation to share and consume Micro-FE components.
Let’s say that you and I work for a tap list service. That’s a service that bars and restaurants use to list their available beverages online. The bars enter the data into our service, and then use an iframe embedded on their site…
So you want to use useState and useContext as a state management solution, but every time the value of the context provider changes the entire tree gets re-rendered. You could use a library like Recoil, Valtio, Zustand, and Jotai to get around this problem, but you’d have to change how you store and access global state.
Is there a way to just fix the issues with useContext? Glad you asked! Yes there is! It’s react-tracked, a new library from Daishi Kato, who has been doing amazing work in the React state management space.
This recipe is based on this excellent article, but with adjustments to make it work with React 17.
npx create-react-app tw-test
yarn add tailwindcss twin.macro @emotion/core @emotion/styled @emotion/react
3. Next up, we initialize Tailwind.
npx tailwindcss init --full
This creates a
tailwind.config.js file in the root directory, which we point to in the
4. Add a new
babelMacros key to
You can put the tailwind configuration anywhere you like in the tree…
There’s a lot of hype out about how Micro-Frontends are the next big technology trend of 2020. So let’s talk about what Micro-FEs are, why they are interesting, what some of the downsides are, and what the process is to go from a traditional architecture to a Micro-FE architecture.
If you want a video version of this essay check out the associated YouTube video.
What is a Micro-Frontend?
A Micro-Fronted (Micro-FE, or MFE) is the JS, HTML, and CSS required to render just a portion of a single page. That code is in it’s own project and maintained, versioned and…
For a variety of reasons vanilla JS is getting some renewed interest. If you are thinking “Vanilla JS, ugh, another framework I haven’t heard of!” I feel your pain, but vanilla JS means just writing code without a framework.
For example, to create a new tag in vanilla JS you do something like this:
const newImage = document.createElement('img');
newImage.src = '/myimage.jpg';
This creates a new image tag, sets its source URL and adds it to a container element, maybe a div or something.
If you would rather do this:
const '<img src="/myImage.jpg">';
document.getElementById('container').innerHTML = html;
That’s cool, and totally…
I YouTube as the Blue Collar Coder on advanced FE topics. Check it out!