Building a Better Micro-Frontend Framework That Enables Platform Freedom

Rate this content
Bookmark
Slides

A modern tooling experience usually involves a user journey on multiple mediums, including Web, VS Code, GitHub, etc. Writing custom code and components for each platform is not the most efficient approach, leading to code duplication and, most importantly, the risk of a lack of a cohesive experience.
Multiplying Architecture is a set of patterns, techniques, and libraries that, using micro frontends and some innovative backend services, allow for the re-use of the tooling component in different distribution mediums
Come to this talk to learn how we are able to enable multiple tooling teams across Red Hat to deliver the best native experience of UI components (s and Views) on VS Code, Web, and Desktop, and directly integrate them on GitHub(Chrome Extension) with minimal changes on their code base.

Saravana Srinivasan
Saravana Srinivasan
28 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk discusses the challenges of scaling and maintaining applications and how architecture decisions can impact them. It introduces the concept of Microfrontend and its advantages of easier scaling, issue identification, and diversification of technology stacks. The implementation of Microfrontend at Red Hat is explained, including the use of a new framework, communication strategies, and the need for scalability and maintenance in large applications. The talk also covers the multiplying architecture framework of micro frontend and its core components. The implementation of Microfrontend in VS Code and examples of combining different frameworks into a single application are showcased. The issue of duplication of library loading is addressed using federated modules in webpack.

1. Introduction to Micro Front-end

Short description:

Hello everyone, welcome to my talk on building a better micro front-end application. I'm Sarvana Balaji Srinivasan, a senior software engineer at Red Hat with experience in JavaScript frameworks like React, Angular, and Node.js. Today, I want to discuss the challenges of scaling and maintaining applications, and how architecture decisions can impact them. Let's dive into the Red Hat story, where we enhanced the Jbpm product with the latest tech stacks and cloud technologies.

Hello everyone, hope you're having a great time listening to some of the really interesting talks at React Day Berlin remote event. Definitely, my talk, we'll keep up this momentum and we'll deliver some interesting stuff about micro front-end. With that note, welcoming you to my talk, Build a better micro front-end application that offers platform freedom.

I'm Sarvana Balaji Srinivasan. I work as a senior software engineer at Red Hat, with the role of full stack developer. I mainly do JavaScript technologies. I have been contributing towards Red Hat OpenShift AI platform. I work on UI stuffs as well as some edge computing stuff. I have got experience working on various JavaScript frameworks like React, Angular, Node.js etc. So yeah, that's about me.

You are watching to React conference, right? So let's talk about JavaScript and React. It's been 28 years, JavaScript was introduced. Already, it has passed its silver jubilee years of 25 years mark. And the growth of JavaScript has been tremendous over the years after the introduction of exciting frameworks. Even the top frameworks built on JavaScript are here for quite some time now. React is here for 10 years. Angular Node.js are here for almost 14 years. Vue.js is here for almost 9 years and the list goes on. It means that we have had applications that are a bit old now. Now, I mean that applications have been developed and maintained for a long time. Eventually, the applications keep growing, growing and exponentially growing. When the applications are growing big, they are really hard to scale and maintain. You will start getting complaints from your customers about various things and issues associated with it. Of course, it is not just because of JavaScript or JavaScript framework, there could be various reasons associated with it which is a separate topic to be discussed. But one reason could be the organization decision on how they want to build their application, the architecture. We at Red Hat had a similar kind of situation.

Now this takes me to the next slide, the Red Hat story. We had a product called Jbpm which is a business automation product which is considered as one of the main pillars of Red Hat. It was a legacy product. At some point, we decided to enhance the product and accommodate some latest tech stacks, making it available as a service with cloud technologies.

2. Introduction to Microfrontend

Short description:

This part discusses the experience of breaking a huge chunk of monolithic web applications at Red Hat. It introduces the concept of Microfrontend, emphasizing its objective of decoupling and breaking a monolithic application into smaller pieces. The advantages of Microfrontend include easier scaling, issue identification, and diversification of technology stacks.

That's when we were in a situation to break a huge chunk of monolithic web applications. We already had Microsoft Visual at that point of time at the back end, but our front end was a huge chunk of monolithic applications which we wanted to break. This talk is about sharing the experience we at Red Hat had while building the monolithic application and how our new framework, the multiplying architecture, allowed to run the web components on the platform that we targeted.

Before getting into Microfrontend, let's discuss about the available architectural patterns. Architectural landscapes are changing a lot in recent years, starting with the evolutionary architecture, building software that is designed to evolve over time as business priority changes, customer demand shifts, and new technology emerges. Then we have microservices, which structures an application as a collection of independent services. Then we have the buzzing word, which is serverless at this point, which incorporates backend as a function. Finally we have Microfrontend here. So Microfrontend is not something new. It is already here for quite some time. Before getting into Microfrontend, I would just like to present a quote from a renowned software developer called Cam Jackson. According to him, an architectural style where independently deliverable frontend applications are composed into a greater whole. We'll discuss what he meant in this quote in detail in the upcoming slides. But we'll get into what is Microfrontend. I'll just pass it to you. I don't want to bore you guys with the definition of Microfrontend. I am sure that you would have already heard enough about it in other talks and presentations. So if you still want to know the definition of Microfrontend, I would strongly recommend you to go through those talks to understand the definition. But I would like to jump directly into the main objective of Microfrontend, which is decoupling. So the main motto of Microfrontend is to break your bigger monolithic chunk of application into smaller pieces and make the developer's life easier. It has a lot of advantages. Some of them are scaling and identifying issues will be made easy. And there is a saying actually, you don't have to put all your eggs in one basket, right? So like shown in this image, you don't have to put everything in one basket. So it will be hard to manage. You tend to break it. So this applies for your technology as well. You don't have to put everything on your one basket so you can just diversify your application. So diversification is just not for your wealth or money. You can always diversify your tech stacks as well, making your application easy to access and maintain. So while discussing about microfinance, microfinance is just not the only solution we have at this point in order to maintain your application.

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.
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.
Micro-Frontends With React & Vite Module Federation
React Advanced Conference 2023React Advanced Conference 2023
20 min
Micro-Frontends With React & Vite Module Federation
Top Content
From my experience one of the hardest things is to share information between microfrontends, so in this talk I would like to explain various ways on how to share a design system to ensure uniformity to the application. Another difficult thing is sharing dependencies, fortunately with module federation it can be done, but how can I use different versions of the same library and how does it work behind the scenes?
I'm the creator of module-federation/vite library, with React and this library, I'd like to show you how you can achieve these results by configuring everything correctly.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.
Sharing is Caring: (How) Should Micro Frontends Share State?
React Summit 2022React Summit 2022
23 min
Sharing is Caring: (How) Should Micro Frontends Share State?
Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss & compare different solutions in React.
“Microfrontends” for Mobile in React Native
React Advanced Conference 2023React Advanced Conference 2023
24 min
“Microfrontends” for Mobile in React Native
Scaling has always been an issue in software development. Architects have been grappling to solve this problem on many layers. In the early 2000s, a concept of “micro-services” started popping up - a system could be split up by business domain into a number of smaller loosely-coupled services. 
More recently, this concept has started being adopted by the frontend community. An app could be split into multiple sub-apps, each with their own teams, technologies, and codebases. Companies like Spotify, Amazon, and Microsoft have adopted this approach and it has helped them scale even faster.
In the world of mobile development, the question arises: “Can we create Microfrontends for mobile apps?”.

Workshops on related topic

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.
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.