Platform Freedom with Micro-frontends

Rate this content
Bookmark
Slides

Can React and TypeScript applications run on different platforms (app shells) with minimal source code changes ? Yes !!! with the Micro-frontend strategy in Multiplying architecture. I’ll be presenting a new dimension of Micro-frontend, that paved a way to decouple the components of a larger monolithic React application using a new framework called Multiplying architecture. The framework is highly flexible and scalable for code development, also aiding the business and community.

Saravana Srinivasan
Saravana Srinivasan
31 min
24 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk explores Microfrontend strategies and the benefits of using the multiplying architecture to deploy applications on multiple platforms. It discusses the concepts of platform freedom, microfrontend implementation, and Backend for Frontend (BFF). The talk also highlights the challenges of debugging and styling in larger microfrontend applications and introduces the multiplying architecture as a solution. It explains the core elements of the multiplying architecture and how it enables communication between different tech stacks. The talk concludes by showcasing the use of embedded lists, federated modules, and Webpack configuration to achieve efficient code sharing and deployment across multiple distributions.

Available in Español

1. Platform Freedom with Microfrontends

Short description:

This talk will take you through the Microfrontend strategies, the problems that are solved by the Microfrontend architecture, a new framework that was built on top of the Microfrontend strategies and how this multiplying of the new framework helped us to deploy our applications on multiple distributed systems. I wanted to share the experience what we had and the experience and the learnings that we had while implementing certain use cases. We started with micro-friendlings, and we then introduced a framework called the multiplying architecture. And we had certain learnings out of it. And finally, with the collaboration of micro-friendly strategies, along with the micro-multiplying architecture. We were able to achieve our results. Firstly, I would like to break my topic platform freedom with micro-friendliness. And I want to emphasize what I mean by the term platform freedom. We all know that web technology is completely dominating the software development industry at this point. And web technology has become a default choice for most of the developers and the companies who wish to develop an application or a product for their use case.

Hello, and welcome everyone to the talk, Platform Freedom with Microfrontends. This talk will take you through the Microfrontend strategies, the problems that are solved by the Microfrontend architecture, a new framework that was built on top of the Microfrontend strategies and how this multiplying of the new framework helped us to deploy our applications on multiple distributed systems.

So, before getting into the topic, let me introduce myself and Saravan Balaji Srinivasan, working as a senior software engineer at Red Hat as a role-full stack developer with mostly on the JavaScript technologies. I work in the areas where we build tool links for business automation products and serverless workflow specifications, etc. So, yeah, that's about me. And let's get back into the topic.

I would like to start with the Red Hat story. I wanted to take this talk in such a way that I wanted to share the experience what we had and the experience and the learnings that we had while implementing certain use cases. Sometime ago, we had a use case where we wanted to deploy certain tools that we built to run on various platforms, and we wanted to just reuse the components that we recreated on the React JS. So that was the story idea behind it. We started with micro-friendlings, and we then introduced a framework called the multiplying architecture. And we had certain learnings out of it. And finally, with the collaboration of micro-friendly strategies, along with the micro-multiplying architecture. We were able to achieve our results. So this upcoming slide will show you how we were able to do it.

Firstly, I would like to break my topic platform freedom with micro-friendliness. And I want to emphasize what I mean by the term platform freedom. So we all know that web technology is completely dominating the software development industry at this point. And web technology has become a default choice for most of the developers and the companies who wish to develop an application or a product for their use case. This is because web technology has a stronger foundation. It has stronger standards, patterns, techniques. And the architectures of web technology are evolving very fast over the period of time. Also, it has a rich ecosystem. When we speak about the web technologies, we cannot ignore JavaScript. So now, at this point, JavaScript is everywhere. Though it initially started with a scripting language for a small purpose, and now it has evolved over a period of time, and you can find JavaScript everywhere on your browser. Browser of your laptop, on your mobile phones, on your PWA, on your servers, everywhere you can see JavaScript now. And also, after the introduction of the TypeScript, I personally feel that, just because of its behavior of static type checking, the perception of the developers on the web technology has totally changed. So, people like me who started my career in the Java technology, as a Java developer, after I turned into a JavaScript engineer and then, for web technology and all, as a full stack engineer now, I started liking web technology after learning TypeScript, because my code is totally type safe. And I will also emphasize that – browser is everywhere now at this point, right? So, you can have your browser on your laptop, you can have it on your mobile, and servers, and PWA, etc.

2. Platform and Microfrontend Strategies

Short description:

The goal is to run applications on multiple platforms such as VS Code, browsers, and GitHub. The web technology has evolved rapidly, starting with evolutionary architecture, followed by microservices and serverless. Micro frontend strategies are used to break down monolithic applications into smaller, independently deliverable frontend applications. Each micro frontend can be owned and maintained by an individual and autonomous team.

Now, the browser is not just a window to access your internet. So, you can show your graphical user interface anywhere on your browser and that can run on any platform. So, the term what I mean by the platform in my topic is, the application must run on platforms. So, in our use case, the platforms that we wanted to achieve is that, to run our applications on the VS code IDE as an extension. And it should run on the browser as an extension. Maybe in case of Chrome, it should run as a Chrome extension. And in case of Firefox, it has to run as a Firefox extension. And the same set of code, same set of components has to run on the web app and also on the GitHub as a GitHub extension. So, this was the end goal that we wanted to achieve. For which, I mean, this is what I mean, I want my two links to run on VS Code, GitHub browser as a web app and also on the...

So, while implementing, when we thought about this implementation, we were analyzing the architecture that we have on the web technology. The web technology has, I mean, as I mentioned in the previous slide, it is growing very fast. I mean, starting with the evolutionary architecture, which supports incremental guided change as a first principle across multiple dimensions. Then comes path breaker, which we call it as microservices, which allowed the backend to be broken into a smaller decoupled microservices, which can run independently. And then comes the buzzing word at this point, which is serverless, where backend is a service. You can deploy your function on a server, and you can just pay for the number of hits that a function gets and how much amount of time that the function is used. You can just pay for that instead of owning the entire server. And finally, we have the term micro frontend, which will, again, I mean, from where we thought about implementing micro frontend strategies for a use case. That takes me to the next slide again.

I assumed that most of you would have already tried something out on the micro frontend strategies or maybe you would have heard the term, but still, I would like to, I mean, touch base with the strategies of micro frontend to the people who are yet to learn it. So consider if you have a bigger monolith frontend application, when I say monolith, it's a huge chunk of application which is maintained by a vast team and which has a huge chunk of code. When you have this kind of a scenario, you're obviously bound to a lot of errors, production issues, bugs, which can't be addressed that easily. So to address this problem, developers across the world, they started thinking of a solution to break this monolith application into smaller pieces. This happened some five, six years back. At that point of time, microservice was evolving a lot at the backend technologies, so the frontend developers wanted to have this similar set of strategies to be on the frontend as well. So that's when they introduced the term called microfrontend. That's how the microfrontend evolved. As for Kam Jackson, who's a renowned architect, and microfrontend architecture is an architectural style where independently deliverable frontend applications are composed into a greater whole. Simply, I can say that breaking off a monolith application into smaller microfrontends, and each microfrontend can be owned by an individual and autonomous team. They can have their own deployments, they can have their own release cycles, they can maintain their own microfrontends without depending on the other other microfrontends or other teams.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Workshop
Alex Lobera
Alex Lobera
Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Micro-Frontends with Module Federation and Angular
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Manfred Steyer
Manfred Steyer
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.