iQuipsys Positron UI Migration
Standardization of microfrontend development — Success story
About the Company
iQuipsys Inc. is a high-tech startup founded in 2017 in Arizona. The company's mission is to provide innovative solutions for tracking personnel and equipment in hazardous environments such as mines, construction sites, and chemical plants.
As regulations in the late 2010s pushed several countries to mandate real-time tracking of workers in these environments, iQuipsys identified an opportunity to bring to market an affordable, mid-priced production tracking system called Positron. This versatile solution caters to various industries by tracking personnel and equipment while leveraging sensor networks to gather vital production metrics.
Positron's standout feature is its integration with custom trackers utilizing revolutionary LoRaWAN technology, enabling long-range communication with exceptionally low power consumption. This system can also be deployed on standard phones and off-the-shelf handheld devices, making it adaptable and accessible.
Founded by two entrepreneurs without external funding, iQuipsys focused on incremental growth, continuously testing and releasing new ideas while maintaining a lean cost structure to drive the startup's success.
Challenges
iQuipsys faced significant challenges during the development of the Positron system's web-based user interface (UI), which included complex configurations, real-time visualizations, and historical reporting tools. Initially, the UI was built using the Angular 1.5 technology stack, a familiar framework for the development team. However, midway through the project, they discovered that the libraries required to support advanced real-time visualizations and reporting tools were only available for Angular 4.
Despite sharing the same name, Angular 1.5 and Angular 4 are fundamentally different technologies, making migration a complex and costly process. With nearly 40% of the UI already complete, the team faced a dilemma: fully rewrite the UI in Angular 4, which would drastically increase development costs and delay the MVP, or attempt to mix the two incompatible technologies using a modern microfrontend architecture.
However, in the short term, the team realized their development speed was too slow, due to multiple challenges described above, to fit within the project’s tight deadlines. iQuipsys reached out to Enterprise Innovation Consulting (EIC) to leverage their Better Microfrontends program, aiming to establish a microfrontend architecture for Positron and assist in migrating the existing Angular 1.5 code to coexist with newer Angular 4 components.
The Solution We Proposed
To address iQuipsys' challenges while minimizing costs, we recommended the Advanced Package of the Better Microfrontends program. This approach allowed iQuipsys to build on their existing Angular 1.5 implementation while introducing Angular 4, thus avoiding the costly full rewrite of the user interface.
The proposed solution focused on creating a technology stack that allowed both Angular 1.5 and Angular 4 components to coexist within the same application. Given that the existing UI was structured as a Single Page Application (SPA) with clearly defined boundaries between pages, we decided to implement a Microapplications architecture. This architecture divides microfrontends into independent web pages, where each page is treated as a standalone microapplication that is fully reloaded in the browser during navigation transitions.
This architecture provided several key benefits.
First, it maintained optimal load times by isolating the older Angular 1.5 components from the newer Angular 4 microfrontends.
Second, by applying consistent UI styles across both versions, we ensured a seamless and unified user experience for Positron’s end users.
What We Did
Enterprise Innovation Consulting (EIC) began by conducting a thorough review of iQuipsys’ existing implementation, followed by an in-depth elaboration of requirements and the design of the new Microapplication architecture for the Positron UI. This initial phase took less than two weeks.
Following the design phase, EIC developed templates for several key microapplications in Angular 4, including Entry, Configuration, Realtime View, and Report. To accommodate the existing code, we also created a microapplication template in Angular 1.5. In addition, we provided mock implementations for new services to facilitate seamless integration and navigation across the different microapplications.
To ensure the new architecture worked as intended, EIC created a vertical slice that replicated parts of the real Positron UI. This demonstration showcased the successful coexistence of Angular 1.5 and Angular 4 components within the same application, validating the use of the new microfrontend architecture and templates.
Microfrontend development was standardized through:
● Adoption of a reference architecture
● Development of microapplication templates to accelerate development
● Implementation of design patterns to address common technical challenges
● Introduction of best practices into the development process
Throughout the project, iQuipsys’ development team was deeply involved, ensuring a smooth migration of the existing Angular 1.5 codebase into the new architecture.
In approximately two months, the project was completed, allowing the iQuipsys team to continue migrating their old code into microapplications while using Angular 4 for new development.
The Result
The adoption of the microapplication architecture enabled iQuipsys to leverage the latest technologies for newly developed components, while preserving their existing Angular 1.5 components. This approach significantly reduced development costs and accelerated time to market, as the team did not have to rewrite the entire codebase.
The well-implemented templates for common component types doubled the team’s productivity, allowing them to develop faster while improving overall code quality.
By the time the MVP was released, the microapplication architecture empowered iQuipsys to practice incremental delivery, which further reduced development and testing time, lowered costs, and enabled quicker releases to the market.
Performance Improvements:
● 20% development cost savings, achieved by preserving the existing Angular 1.5 components and focusing new development efforts on Angular 4.
● 30% faster time-to-market, thanks to minimized rework and retesting through the efficient microapplication architecture.
● 2x increase in development productivity, driven by well-implemented templates and streamlined processes.
● 4x faster onboarding of new developers, made possible by smaller, modular components, clearly defined development patterns, and the use of prerecorded training sessions.
Testimonial
Anatoly Makarychev
Founder and CEO
of iQuipsys
As a startup developing the Positron tracking system, we hit a roadblock when we discovered the libraries needed for real-time visualizations were only available in a newer version of Angular. By then, 40% of our UI was already built on an older version, and switching to the new one seemed like a huge task—either rewrite everything or somehow mix two incompatible frameworks. We knew that with our current development productivity and speed, we would miss deadlines. That's why we reached out to Enterprise Innovation Consulting (EIC) for help. Their Better Microfrontends program introduced a smart solution: a microapplication architecture that allowed us to integrate both Angular 1.5 and Angular 4 in the same app.
EIC quickly designed the architecture, provided templates, and created a vertical slice to demonstrate how it would all work. By working closely with our team, they ensured we could migrate our existing code while implementing newer technology for future development. Within two months, we had a fully functional system that saved us both time and money. We achieved a 20% reduction in development costs, a 30% faster time to market, and doubled our development productivity. Onboarding new developers also became four times faster, thanks to the well-organized structure and training resources. EIC’s solution was exactly what we needed to keep moving forward.
Subscribe to Our Newsletter
