- Clurgo
- Case studies
- Manufacturing
Manufacturing
Accelerated web development and improved UX in the manufacturing domain
Eyes are the windows to the soul
Also known as shortsightedness, myopia could affect as much as half of the world’s population by 2050. Fortunately, we have the technology to mitigate it – eyeglasses, contact lenses, laser surgery, and more. We owe much of this technology to our client, a market leader that knows eyes are the windows to the soul.
Client's Challenge
Our fullstack development team joined the company’s segment responsible for developing cutting-edge solutions for optometry, neurology, otolaryngology, dentistry, gynecology, and radiotherapy.
Acting in tandem with back-end teams on site, Clurgo assisted the company in a complex process of rebuilding – and eventually migrating – its website. On the one hand, we maintained the old website so it stayed available to users. On the other, we were developing a new site in the background, furnishing it with a set of custom-made functionalities, as verification center to manage user access based on the level of clearance; a consent and preference management center; a platform for communication with end users; a service platform with service history; and a training platform on using highly specialized medical equipment.
We packaged these functionalities in a new and consistent visual style on the front end, in concert with the back-end teams and in a way that streamlined further modifications no matter what teams and developers took over.
Clurgo's Solution
Our solution leveraged:
- a microfrontend approach for ease and speed of feature implementation;
- a monorepo for better cooperation between teams;
- Turborepo to coordinate the microfrontends in the monorepo;
- Adobe Experience Manager at the helm – a state-of-the-art content management tool to push microfrontends to production with a click of a button.
Let’s break down these elements one by one to see how they ensure a seamless web development process for our client and provide a smooth user experience for the customer.
Microfrontend design for rapid feature deployment
Microfrontend adapts the principles of microservices design and workflow to web development. Previously, web development was monolithic – relying on a single team and codebase.
In contrast, microfrontend makes it possible to break down the development team into smaller units. Each unit works on a distinct feature in a framework of its choice. On the technology side, an integration layer merges the units’ respective outputs into one cohesive whole: an integrated application.
Figure 1 below shows how microfrontend works:
Fig. 1. Overview of the microfrontend approach. Separate teams work on different features in technologies of their own choosing, which are then integrated into a full application.
Microfrontends in a monorepo
Microfrontend design lends itself naturally to multiple repositories. Usually, one microfrontend application sits in one repository. But recently, companies such as Google, Facebook, Microsoft, and now also our client, choose to store their microfrontends in single repositories called monorepos.
Housing all the microfrontends in a monorepo rectifies some of the disadvantages inherent in microfrontend design. For example, it eliminates code inconsistencies. It also simplifies code sharing and application-wide modifications.
For a graphical representation of a microfrontend application in a monorepo, consult Figure 2 below.
Fig. 2.: Microfrontends preserve the boundaries between microfrontends but enable the sharing of code between teams, making collaborations easier.
Tying it all together: Adobe Experience Manager, integration layer, and local cache
Let's recap: in our web application, each feature is developed as an independent project, following the tenets of microfrontend design. These projects are kept in a single repository called a monorepo. Turborepo is the tool that ensures the individual projects remain autonomous and don't come into conflict with each other despite sharing the same location.
The next step is to integrate all the different projects into our web application. For this, we use a tool called Adobe Experience Manager. It's a comprehensive suite for content management that allows us to customize the parameters of every microfrontend before we push them live. Once the parameters are set, AEM passes the microfrontends to a loader - the equivalent of an integration layer from above. Finally, the loader injects the parameterized microfrontends into the website.
As a cherry on top, we made every microfrontend locally cached in the browser, which improved the website's speed for the end user.
Results & Benefits
Thanks to the implementation of the microfrontend design in a monorepo environment, our client can now ship new features at an impressive rate of one every two sprints. This speed is a product of the design and workflow, so it should persist throughout the development process irrespective of who takes the wheel.
On the customer side, faster deployment to production means that feature requests and bug reports can be addressed and fulfilled more quickly and efficiently. This translates into better user experience, customer satisfaction, and customer relationship.
We are glad to have contributed to such a profound improvement in the way our client delivers value to its customer. As advocates of microfrontend design, we recommend it to any company that looks for a lightning-fast method of upgrading its web products and responding to its clients' needs.
