How Micro Frontends is Enhancing DevEx at Systematic
In this Tech Byte, Senior Systems Engineer for SitaWare Headquarters, Flemming Lundahl, will share his insights into why and how he believes that Micro Frontends is bound to shape Systematic’s coding future in enhancing flexibility, maintainability, and developer experience and ultimately expediting code delivery and minimising project disruptions.
By Flemming Lundahl, Senior Systems Engineer for SitaWare Headquarters
Introduction: Setting the Stage at SitaWare Headquarters
Our SitaWare Headquarters is not exactly like any other conventional software project. It stands as a Command, Control, Communications, Computers (C4) Intelligence, Surveillance, and Reconnaissance (ISR) solution specifically tailored for military operations. Our mission is to provide an all-encompassing view of the battlefield, with a pronounced emphasis on enhancing communication and collaboration across diverse nations and within the entire SitaWare Suite.
Consequently, SitaWare Headquarters is characterised by a substantial and sophisticated codebase, which is why modularisation is bound to serve as the cornerstone for impacting our flexibility and maintainability, as different teams are responsible for different areas of the codebase.
Embracing Micro Frontends: A Transformative Paradigm
Our journey with Micro Frontends began when we made the strategic decision to integrate Angular into our pre-existing AngularJS client. This transition was no small feat, and the crux of the challenge lay in ensuring the seamless integration of Angular alongside AngularJS while preserving backward compatibility within our client SDK.
It was at this juncture that Module Federation by Webpack entered the scene as a transformative solution to our complex dependency management needs. To further streamline the integration process, we even crafted our own Webpack plugin, encapsulating the solution within an SDK for the convenience of our developers and integrators.
Our Technological Toolbox: Angular, Webpack & NX
In this Micro Frontends venture, we leverage the power of Angular, Webpack, and NX. Angular serves as our robust client framework, while NX, a monorepo build tool, simplifies the creation of Micro Frontends by easing the customary setup complexities.
Webpack assumes the pivotal role of bundling our Angular application in a manner that renders Micro Frontends a feasible reality. Meanwhile, Gradle takes the reins for the final packaging phase, tailored to suit server deployment requirements.
A New Era of Collaboration: Streamlined Workflows
Micro Frontends introduce distinct component boundaries, enabling autonomous operation. This autonomy reduces the need for extensive collaboration and minimises mutual interdependencies, which are common in complex projects. The result? Enhanced developer experiences, expedited code delivery, and diminished project disruptions.
"As we continue down the path of modularisation and scalability, we see Micro Frontends playing a central role in shaping our future"
The Developer's Perspective: Simplifying Complexity, Boosting Enthusiasm and DevEx
From a developer's standpoint, what strikes me as most compelling about Micro Frontends is the explicit delineation of responsibilities and the minimal prerequisites for a functional development environment. In the context of a project as admired as SitaWare Headquarters, the emergence of unexpected dependencies can pose formidable challenges.
The ability to work solely with requisite components enhances the developer experience by:
- curtailing build times
- minimising startup prerequisites
- simplifying complexity
- and thereby mitigating unrelated errors
Crafting code that seamlessly integrates with the core application and other Micro Frontends, while also functioning as a standalone entity, creates some exciting challenges that really captivates my enthusiasm. And since my principal role revolves around the maintenance, expansion, and refinement of the development and build environment, I can confidently say that Micro Frontends has injected new energy and flexibility into the SitaWare Headquarters project, which is also why we will surely be seeing Micro Frontends playing a central role in shaping our future as we continue down the path of modularisation and scalability.
About the author
Flemming Lundahl is a Senior Systems Engineer at Systematic, dedicated to the SitaWare Headquarters project. Flemming started his journey at the company as an intern and, even after five years, continues to be a committed team member. Flemming appreciates Systematic's commitment to nurturing a flexible and collaborative work environment that promotes strong relationships and effective teamwork. According to him, this environment is key in developing Systematic's complex solutions.
