Microfrontends in Safety Critical Aviation Systems

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Are you being asked to create more frequent release with higher quality, but the team in the other office is constantly breaking your features? Microfrontends might be the answer for you! During this flight, we will fly over the pros and cons of microservices and frontend architectures, navigate the turbulent airs of migrating products to new architecture, and finally land at our destination of scalable software.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

FAQ

AWS SafeKit is a global market leader in airport control software and visual docking guidance systems. The software manages the entire operation of an airport from arrival to departure, including real-time aircraft position tracking, gate and stand planning, and integration to all core systems to deliver a single source of truth.

AWS SafeKit has over 1,200 employees in 38 offices spread across the world.

Microfrontend architecture is an extension of microservice architecture to the frontend. It involves taking components or groups of components and putting them into standalone bundles, which are then combined during runtime to create a single application in the browser. This approach is framework agnostic and allows for the integration of multiple frontend frameworks like React, Vue, and Angular.

Benefits of using microfrontends include incremental upgrades, deployment independence, and team autonomy. This setup allows you to break down your application piece by piece, introduce new technology, maintain development velocity, and reduce the need for inter-team coordination.

Challenges of microfrontend architecture include potential performance issues, larger bundle sizes, increased browser workload, style conflicts, and greater complexity in managing distributed systems.

Module federation in Webpack allows separate Webpack builds to form a single application. It facilitates the loading of remote modules at runtime asynchronously, manages different dependencies across builds, and optimizes bundle size.

Tips for migrating to microfrontends include using domain-driven design to define clear boundaries, developing a shared component library for common UI elements, focusing on automation with comprehensive automated test strategies, and choosing tools that are agnostic to specific frontend technologies.

Air traffic is growing at a rate of 4.4% annually and doubling every 15 years. By 2035, there is expected to be a 50% capacity shortage in half the world's airports, potentially preventing 237 million passengers from flying.

Tools commonly used for managing microfrontends include Webpack's module federation, native federation, web components, iframes, and JavaScript orchestration. AWS SafeKit specifically uses a monorepository with Nx to manage its microfrontends.

You should consider using microfrontends if you work on large-scale enterprise applications developed by multiple teams, have distinct business or technical requirements in different parts of your application, or need the ability to experiment without risking stability. However, ensure you have enough automation and processes in place to manage the complexity.

Jarred Utt
Jarred Utt
9 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
AWS SafeKit is a market leader in airport control software, managing the entire operation of an airport. Microfrontends extend microservice architecture to the frontend, allowing components to be combined at runtime. Module federation from Webpack is a popular approach for loading remote modules. Microfrontends offer benefits such as incremental upgrades and deployment independence, but also come with downsides like poor performance and complexity. Microfrontends are recommended for large-scale enterprise applications with distinct requirements and the need for experimentation.

1. Introduction to AWS SafeKit and Aviation Systems

Short description:

Today we're going to talk about micro functions and safety critical aviation systems. AWS SafeKit is a market leader in airport control software, managing the entire operation of an airport from arrival to departure. Air traffic is doubling every 15 years, and there's a 50% capacity shortage expected by 2035. AWS SafeKit works with over 2,700 airports and has over 1,200 employees in 38 offices worldwide.

My name's Jared, and I'm a technical leader at AWS SafeKit. Today, we're going to talk a little bit around micro functions and safety critical aviation systems. AWS SafeKit is a global market leader in airport control software and visual docking guidance systems, and the software we're talking about today manages the entire operation of an airport from arrival to departure, including real-time aircraft position tracking, gate and stand planning, and integration to all core systems to deliver a single source of truth.

Airports are connected to each other, much like the nodes of a network, and if one node is slow or failing, there's a domino effect for each node coming next. In addition to that, air traffic is actually doubling every 15 years, growing at a rate of 4.4% annually. There's a 50% capacity shortage expected by 2035 in half the world's airports if we don't take any action. This ultimately means that 237 million passengers won't be able to fly by 2035. So buckle up, sit back, and let's enjoy the flight.

A little bit around AWS SafeKit. We're a little over 1,200 employees in 38 offices spread across the world, and we work with over 2,700 airports. Myself, I've been having fun with code for 13 years. Started with a lot of robotics, and then moved into web and mobile applications, then received a degree in computer engineering, and I've been with AWS SafeKit for the past five years in various technical roles. A fun fact, I actually moved from the US to Sweden three years ago.

2. History and Introduction to Microfrontends

Short description:

We begin with a little bit of history, starting with a simple monolith and eventually moving into the web and introducing microservices. However, we faced a complex question of combining 60 different products into a single web application. Microfrontends are an extension of microservice architecture to the frontend, allowing components to be combined at runtime. Module federation from Webpack is a popular approach to achieve this, facilitating the loading of remote modules and managing dependencies.

We begin our journey with a little bit of history. Our current application stack's been through a couple of major reworks. We started with a very simple monolith, a C++ backend and a Qt frontend. We started to get more demand for more feature-rich applications and tightly integrated solutions. So ultimately, we moved into the web, introduced Angular, and other teams started building new products on the same tech stack, and we found a lot of synergies in those products.

But with every flight, there's always a chance for turbulence. So if we go back to that traditional monolith, we all know this picture, teams contributing code into a single codebase. And you will hit a point where it's a good idea to separate these things. You have a frontend and backend, you have better separation of concern, and you speed up your development. And you might hit a certain point where the backend grows so large that you introduce microservices, a really popular concept. And for us, this is how we've developed products for years. We have a lot of microservices separated from things.

But one day you come to work and you get a really interesting question, a really complex question. Can we take 60 of these different products and combine them into a single web application? And for us developers, that meant we had 46 applications and 22 libraries spread across 20 repositories. Even worse, we're spread all over Europe. We have developers in Sweden, Austria, Germany, Poland, and the UK. And when you first look at the problem, you might picture something like this, where you have a lot of backend services and one giant frontend. It seems really scary. Luckily, much like an aircraft, there's some instruments and controls that we can use to make our lives easier.

So the big question, what are microfrontends? Of course, naturally it's just an extension of microservice architecture to the frontend. And what that means is we take our components or group of components and put them into standalone bundles and then combine these during runtime to create a single application in the browser. It's important to note that this is framework agnostic. You can have a React, Vue, Angular app all running in the same browser at the same time. It's hard to talk about microfrontends without mentioning module federation from Webpack. And this is the original mental model that's really popularized the idea of microfrontends. It allows you to take separate Webpack builds and to form a single application. And it facilitated the loading of these remote modules at runtime asynchronously. For you, it might look like lazy loading. And it also provides mechanisms to manage different dependencies across different builds and to have an optimized bundle size. If you're not using Webpack, there's some other options like native federation.

3. Exploring Microfrontend Tools and Benefits

Short description:

If you're not using Webpack, there's some other options like native federation. Some other options include web components and iframes. For managing all of this, we use a monorepository with index, which provides an extensible build system and an integrated environment for developing apps with popular frameworks. With micro frontends, we can deliver a single web application by wrapping individual frontends into a host application. Benefits include incremental upgrades, deployment independence, and team autonomy. However, there are downsides such as poor performance, large bundle sizes, increased browser workload, style conflicts, and complexity.

If you're not using Webpack, there's some other options like native federation. And this is a browser native implementation of the module federation idea. And this is actually able to be used with any framework or build tool.

Some other options, web components have been around for quite some time, as well as iframes. And you could even do the JavaScript orchestration yourself.

Now, for us in particular to manage all of this, we actually use a monorepository with index. And index provides an extensible build system, allows you to use modern tools like Cypress, Jest, Prettier in a standard way across all the applications in your repository. And it provides an integrated environment for developing apps with popular frameworks like Angular, React, Node.js, making it easier to manage code sharing and minimize redundancy.

All of this comes together with cool features like computational caching, effective commanding, code generation, which streamline the developer experience and process.

Now that we know the tools, instruments and controls, I think we're ready to navigate. So, if we go back to that really scary picture, we have this huge frontend and all of these backend services. But what we want is something like this where everything is separated. And we can still have that while delivering a single web application by using micro frontends where we wrap these individual feature based frontends into a host application. And if you do it right, it might look something like this where we have a menu that has a lot of options. And every single one of these options in the menu is actually an independently built frontend.

Some of the benefits of micro frontends include incremental upgrades. You can break your application down piece by piece, introduce new technology, frameworks, packages and maintain your velocity while also taking care of technical debt. You also gain a lot of deployment independence. Your applications are decoupled and you have less chance of negative impact from other teams. And all of this kind of comes together to enable team autonomy. You don't have to coordinate so much with each other and you gain freedom in choosing the tools and frameworks that you want to use.

Now, whatever benefit, there's also downsides. You can have poor performance if not well architected. You can have really large bundle sizes. You can increase your browser workload. So, you need to be very careful about how you're orchestrating this during runtime. You can also run into trouble with styles. Different teams are using different styling approaches. You could introduce conflicts leading to inconsistent UI. And, of course, complexity.

4. When to Use Micro Frontends and Tips for Migration

Short description:

As a more distributed architecture, you'll inevitably lead to having more stuff to manage. When should you use micro frontends? It's not a substitute for clean code, but rather a way to set yourself up for success. If you work on large-scale enterprise applications with distinct requirements or if you need the ability to experiment, micro frontends might be good for you. Ask yourself if you have enough automation, scalable processes, and ways to ensure quality and consistency. Tips for migrating include using domain-driven design, developing a shared component library, and focusing on automation and comprehensive testing. Choose agnostic tools and frameworks to adapt to JavaScript's changing nature.

As a more distributed architecture, you'll inevitably lead to having more stuff to manage. You have more tools, more pipelines, more repositories, more applications.

With this in mind, I think we're ready to land. So, when should you use micro frontends? Now, the first thing to think about is, of course, a single high-level architectural decision like, hey, let's do micro frontends is not a substitute for good old-fashioned clean code. We're not trying to get out of thinking about our code and putting effort into its quality. But rather, we're trying to set ourselves up to have success by making bad decisions hard and good ones easy.

So, if you work on large-scale enterprise applications developed by multiple teams and if you have distinct business or technical requirements in different corners of your application, or if you need the ability to experiment without risking your stability, micro frontends might be good for you. But before you go any further, you should ask yourself a couple of questions. Do you have enough automation in place or the ability to add automation to manage the complexity? Will your processes scale to a more distributed system? And how can you ensure a minimum level of quality, consistency, and governance across the independent frontends?

So, if the answer to that is, yeah, yeah, I do it, it sounds really good, here are some tips and tricks for migrating to micro frontends. One of them is to use domain-driven design to define clear boundaries around the different applications and functionalities and to have sole ownership over these in specific teams. It's also recommended to develop a shared component library for common UI elements to ensure consistency across your application and focus on automation. Implement comprehensive automated test strategies with integration test, unit test, and set up CI to CD pipelines to streamline this process. Whatever possible, choose tools and frameworks that are agnostic to specific frontend technologies. At the end of the day, this is JavaScript and it changes every other day. Thank you.

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
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Understanding React’s Fiber Architecture
React Advanced 2022React Advanced 2022
29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

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.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
Workshop
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Top Content
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.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
Workshop
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.