Using ES Modules Based Micro-Frontends to Enable Distributed Development

Rate this content
Bookmark

A look at the open source tooling created by the UI Engineering group at JP Morgan to streamline the developer workflow of building and deploying apps in isolation while still delivering a single unifying micro-frontend based portal to the end user, leveraging the use of native support for ES module imports in the browser.

Steve King
Steve King
28 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

JP Morgan is using modern web technologies like the UITK and Modular to address challenges in their large-scale development environment. They employ micro front-ends with ES modules for dynamic loading and sharing theming using CSS variables. The applications are built using modular, which allows for scaffolding and creating new applications from templates. They rely on an opinionated approach to app creation and use a CDN for efficient deployment and caching. The host application handles user authentication and communication between micro front-ends, while platform services like authorization and authentication are provided by the digital platform.

Available in Español

1. Introduction to JP Morgan's Web Technologies

Short description:

My name is Steve and I'm here to talk about how we're using modern web technologies at JP Morgan. We have two things to discuss: the UITK, a React component library, and Modular, an opinionated monorepo management tool. We have a large-scale development environment with thousands of applications and developers. Each development team faces the same challenges of continuous integration, continuous deployment, and quality assurance.

Good morning everyone. With that amount of videos about JPMorgan, no pressure doing this today. So, as I said, my name is Steve, and I'm here to talk a little bit about how we're using modern web technologies, JP, things like ES modules where we can use them to solve age-old problems, problems like how do we run multiple applications that have all been built and deployed independently of each other in single container portal-like applications.

So a little bit about me. I've been working in and around the fintech space for about 20 years now, and I've had the privilege to see UI technologies grow during that time. And now that I'm with JP Morgan, I'm actually no longer a core developer. But now I get to work with developers to put together our open source providing. We have two things I'm going to talk about today. One is the UITK, which is a React component library that we use to standardize the way their applications look and feel. And Modular, which is an opinionated monorepo management tool. And they're actually both on our public Github, if you want to check them out. And we have we appreciate pull requests.

So the kind of places I've worked at before, I said it's always in Fintech. Some of those organizations are really small. When I came to JP Morgan last year, I had no real idea of a sense of scale that I was going to be facing. We have across the bank as a whole is 50,000 developers, I think. 18,000 of which are in our division. And we're deploying about 5,800 applications into one of our container types, which is a desktop container. 2,000 of those are in production. They service about 200,000 daily users. There are hundreds of deployments going on every day. We have this really distributed development problem. Or joy, depending on how you look at it. Distributed development means we have loads of development teams. They all work independently. They're empowered to make their own choices about how they're going to build their applications, how they're going to deploy them, and more recently, how often do they deploy? Why are they actually sending code out? But looking at it from an organizational standpoint, what is the developer experience of that distributed development model? Well, every development team has to solve the same problems. They're all going to need to have some form of continuous integration. They're all going to need continuous deployment, and they're all going to have the same need to apply quality assurance. So they're going to need test tooling. They're going to need to choose the same products for doing their testing.

2. Consistency and Solutions in UI Engineering

Short description:

And then because we're all under the same brand umbrella, we're going to need to have the same design language. So what was our solution to that? So our solution is in UI engineering. We have what we call the Digital Platform, which is a bit like a Jamstack provider inside the bank. We have a design system that is an accessibility first design system that has a companion react-based component library. We have a new version of the React library being developed at the moment. And more finally, the modular, which is an opinionated monorepo management tool. It has a few features in it that I'll be showing today, but it's similar to create-react-app and then an opinionation on developer tooling that goes in with building the applications themselves. So we have a desktop container. When we come to deliver a web portal, users still want to have a single way of launching applications. They want to have a consistent look and feel on the apps that they're loading, and they want to be able to use their apps in all modern browsers.

And then because we're all under the same brand umbrella, we're going to need to have the same design language. So how do we add that consistency to the applications that we're deploying? Bearing in mind, there's thousands of them being pushed out. So when the applications go out as well, they're going to need to solve the same kind of problems. We need to know how they're going to authenticate their users, how they authorize them to use the apps. And because we want to have the same rich user experiences, we're thinking how are you going to be able to share the layouts you've created, how you're going to share access to your applications. Which all kind of implies that you've got the same kind of understanding of having a preferences system. How you're going to store and persist the user data.

So what was our solution to that? So our solution is in UI engineering. We have what we call the Digital Platform, which is a bit like a Jamstack provider inside the bank. So I've already mentioned we have a desktop container, but we have ways that we distribute our mobile and web apps as well. We call it Omnichannel, but we also provide more of a DevOps providing. So we have things like continuous integration, actually it's based on Jenkins. We have continuous deployment which is based on Amazon S3. And we also provide like a centralized application registry and that's where we have our developers push the versions of their code so we can determine which are going to be made available in production. And more importantly, when we need to roll things back, it simplifies our processes. And then probably more relevant to today and what I'm going to be talking about later is we have a design system. So that is actually, it's an accessibility first design system that has a companion react-based component library. We have been embracing web components and allowed for the use of Angular. There was a decision made a couple of years ago that we were going to be react focused. So we actually have a new version of the React library being developed at the moment. It will be released fairly soon. Feel free to go and have a look at it on our GitHub. And then more finally, the modular, which is an opinionated monorepo management tool. It has a few features in it that I'll be showing today, but it's similar to create-react-app and then an opinionation on developer tooling that goes in with building the applications themselves.

So we have a desktop container. The developers, when they create applications, push it through to our continuous deployment infrastructure, and tell the desktop container, which is an Electron-based app, where to fetch the URLs. When we come to deliver a web portal, what is the user experience expectation? It's actually it's almost the same as on desktop. Users still want to have a single way of launching applications. They want to have a consistent look and feel on the apps that they're loading, and they want to be able to use their apps in all modern browsers. So historically, that could have meant using iframes to load applications together, which would come with the usual drawbacks of you've got many, potentially many, instances of frameworks being loaded into one application, into one web browser window.

QnA

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.