Business needs
A leading Fortune 500 US-based healthcare services innovation company recognized the need to modernize its legacy monolith applications to enhance user experience and maintain its competitive edge.
The following were their primary business requirements:
- Rapidly onboard new providers on the existing platform to support their B2B product adoption strategy
- Fully automate management and operations through a Self-Serve Admin Portal (SSAP) and supporting applications to eliminate manual workflows
Technical needs
To maintain relevance and ensure an optimal user experience, the healthcare company’s Product Management Team sought to upgrade their legacy monolithic applications with the latest frameworks. This modernization effort required addressing several key technical needs:
- Implement new supporting applications with a modern design philosophy and high-performance architecture
- Manage the resulting technical debt and deploy new features within tight deadlines
Increased user adoption with ~20% runtime performance improvement
Solution
To address the challenges posed by outdated technology stacks and the need for continuous feature deployment, the Impetus team developed a comprehensive solution, which primarily focused on implementing a micro-frontend architecture.
Solution highlights
- Implemented micro frontends to modernize legacy applications incrementally, decomposing monolithic codebases into smaller components while preserving existing functionality
- Utilized the web-element concept to package and deploy new features independently within the existing application framework
- Deployed technology-agnostic web components that seamlessly integrated with any host application, leveraging the latest Angular framework for efficient web-element creation
- Expedited production deployment by integrating new Angular-developed features with the existing Laravel Blade infrastructure
- Incrementally converted and integrated independent features from existing applications into web elements, ensuring compatibility across both Laravel Blade and Angular applications
Deployment strategy
- Composition at build time: For the micro frontend architecture, build time composition was used with Laravel Blade, while Angular web pack’s module federation added dependencies
- Hosting: The application leveraged Laravel Blade as the primary container, with Angular 7 and Angular 14 applications embedded within this container. It was hosted on Amazon S3, utilizing separate S3 buckets for Angular bundle JavaScript files and other static assets. The application followed a Client-Side Rendering (CSR) model for static hosting and a Server-Side Rendering (SSR) model for the Laravel container.
- Optimized content delivery: Cloudflare CDN facilitated interactions between the micro frontends and the Amazon S3 bucket, ensuring optimized content delivery and enhanced security
AWS services used
AWS Elastic Load Balancer, AWS Auto Scaling, Amazon Relational Database Service (RDS), AWS Lambda, Amazon API Gateway, Amazon Simple Queue Service (SQS) and Amazon Simple Notification Service (SNS), Amazon Managed Streaming for Apache Kafka (MSK), Amazon ElastiCache
Impact
Implementing a micro-frontend application enabled technology agnosticism, allowing front-end teams to focus on new features for the self-serve admin portal without worrying about redesigning the existing application into the new framework.
The deployment of a micro-frontend application coupled with the strategic use of AWS services enabled the healthcare company to:
- Save approximately 40% of the time to market
- Reduce development costs by around 10%
- Increase user adoption with a runtime performance improvement of ~20%
- Achieve zero downtime in production and 2X build time performance
