Latest Trends in Microfrontends

The world of frontend engineering is constantly evolving, and as we go about building microfrontends following the currently available tools, approaches, and best practices, it is important to keep an eye on the latest trends that are evolving in this space and keep exploring and experimenting with them to see how they can help us become more efficient and build better apps.

In this chapter, we will cover some trends that can influence how we build microfrontends in the future. Some of the trends we will explore are the following:

• The name microfrontends itself and what is a better term for it
• The island pattern of mixing static content with dynamic content
• Looking at other build tools beyond Webpack
• WebAssembly
• Cloud or edge functions
• How generative AI can influence our work

By the end of this chapter, we will have learned about the latest trends in the frontend engineering space that impact how we build microfrontends...

Microfrontends – decoupled modular frontends

The term microfrontends has obviously become very popular, and this entire book uses it, but to be honest, I’ve always felt it was poorly coined and unfortunately, it has stuck within the community. As mentioned a couple of times, the word microfrontend has led to a lot of misinterpretation, leading to bad architectural patterns that cause more harm than good. A new proposal has been put forward to start calling them composable decoupled frontends (https://microfrontend.dev/), which I think is apt and clearly explains the intent and purpose of what we are building. I really hope the community starts picking this term up and that we collectively all start moving to building and calling microfrontends what they really are and defining what they are really supposed to do.

I’m sure many of you will wonder how simply changing the name helps and what’s really in a name; however, I feel that, in this case, a name...

The island pattern

Statically generated pages are gaining a lot of popularity as they ship very little to no JavaScript; however, the challenge with them has always been on how to serve dynamic content.

The island pattern aims to solve this problem. It was made popular by the Astro build framework, wherein we have our application published as a set of statically generated HTML pages, within which the dynamic parts of the page are imported as islands.

Here is an example of how this can be achieved using Astro, a popular framework for building statically generated sites.

You can read more about this at https://docs.astro.build/en/concepts/islands/:

//index file
---
// Example: Use a dynamic React component on the page.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- This component is now interactive on the page!
     The rest of your website remains static and zero JS. -->
<MyReactComponent client:load...

Beyond Webpack with ES Modules

With the dawn of JavaScript-based frameworks, Webpack rose in popularity, and it became the de facto module bundler for all JavaScript frameworks. However, bundling/compiling large applications with Webpack can be very slow, and manually configuring it to efficiently bundle an app is very complex. Recently, a new breed of bundler tools that takes advantage of ES modules has taken the frontend world by storm, promising compilation over 20 times faster than Webpack.

ES modules are a standardized way to define and import modules in JavaScript. They allow for modular code organization, which can make it easier to develop and maintain large applications. ES modules also provide a clear and explicit syntax for importing and exporting code, making it easier to reason about the dependencies between different modules.

Each of our micro apps can be exported as ES modules, and by using dynamic imports, we can embed them into our host application.

The entire...

Using WebAssembly Modules

WebAssembly (Wasm) has been around for many years now. Despite its huge benefits in terms of performance and low bundle size, it hasn’t gained much popularity, primarily because it wasn’t easy for developers to build a WASM module. However, now that people are starting to work with tools such as Rust, it gets fairly easy to build WebAssembly modules with Rust. We anticipate that WebAssembly will become mainstream when building applications that require a high level of computation on the browser.

WASM modules can work really well in a microfrontend architecture, where the critical compute-intensive modules are built in WASM wrapped as a micro app and imported into a microfrontend architecture in which the rest of the micro apps in the microfrontend are built using the standard React.

Here is a rough approach of how you could set this up in your module federated Next.js app. Use our module federation code from Chapter 6. First build a Rust...

Edge Functions or Cloud functions

Edge functions are gaining a lot of popularity, as they provide the power to compute on the edge. Think of them like a Content Delivery Network (CDN) but with the power and ability to run computations.

The primary benefits of edge functions are that they provide very low latency, which greatly helps improve performance, and they use an automatic distributed deployment, which mitigates single points of failure and helps improve scalability.

Edge functions and microfrontends work quite well hand in hand, where you can have each micro app deployed within a cloud function; this automatically allows for modular deployments, and each team can manage its cloud functions independently.

Cloudflare is one of the most popular providers that support cloud functions. Cloudflare Workers and most recently Cloudflare Pages support computing on the edge. Here is an example of how to deploy a Next.js App on Cloudflare Pages using Edge Runtime.

1. Start...

Generative AI and Microfrontends

Generative AI has clearly taken the world by storm. We are seeing amazing examples of generative AI being able to generate complete end-to-end applications.

When it comes to building microfrontends, it will be very interesting to see how things evolve. While I believe generative AI can’t take over a developer’s job, I do see interesting use cases of how generative AI can work hand in hand with microfrontends in building unique customer experiences.

Generative AI can be leveraged to dynamically generate and assemble various parts of a web application. By intelligently analyzing user behavior, preferences, and real-time context, AI can create microfrontends that are tailor-made for individual users, resulting in a highly personalized and optimized user experience. This approach also simplifies the development process by allowing developers to focus on creating modular, composable micro apps, while the AI system takes care of the overall...

Summary

With this, we have come to the end of this chapter and the book. We really hope you’ve enjoyed the journey.

In this chapter, we looked at a few new trends that will influence the way we build and deploy microfrontends. We saw how concepts such as the island pattern can help interlace dynamic content blocks within a statically generated multipage app. We saw how the new Rust-based bundler can be many times faster than Webpack. We learned about WebAssembly and how it can be used within microfrontends, and finally, we looked at cloud functions, which have the potential to become the default solution for deploying all modern frontend applications.

I’m truly excited about how quickly technology is evolving and how it affects the way we build our applications. I can’t wait to see you go out in the wild and build things that make this world a better place.

In closing, it is essential to remember that the world of microfrontends, much like our dynamic...