A Modularized Web Application Handling Services Related To a Company’s Existing Mobile App [greenfield]
The client is an industry-leading Asian company that wanted to expand its existing services to other platforms while keeping the look and feel of the existing mobile application.
Objective
Our job was to create a web application that could connect to an existing API that handles all the data related to the services of the company. The implementation of the new application should separate the visual components, the authentication, and a specific part of their service and should be done in a way that both the existing application and the new one could adapt to newly added services efficiently.
Integration was key here. The components had to be kept the same, as did the security and authentication procedures. What’s more, to ensure future builds were effortless to add and optimize, all three parts (services, components, and authentication) of the app had to be kept separate to allow for adequate testing.
Process
1,We planned two different approaches we could take to meet the given requirements.
2,The client’s designers handed over the design files.
3,Their technical team handed over the documentation about authentication flow within their services.
4,We developed the new application to one repository as a single-page application.
5,We tested our first approach: to separate the three main parts of the application into different repositories and inject them as custom packages.
6,We tested the second idea: to separate the three main parts into different SPAs that can share components while running.
7,We had a meeting with the client to discuss both approaches from a technical and maintenance perspectives and agreed to take the second.
8,We cleaned up that implementation, sent it over, and provided support for the release. We now provide ongoing maintenance.
Scope
Web Backend Development
Web Frontend Development
Tech stack
Typescript
React
Webpack
GraphQL
Apollo
AWS AppSync
Technical challenges
To support multiple GraphQL instances in a single application using the Apollo client.
To implement a reusable authentication and design layer.
To separate the components of the application into single packages.
To use WebPack federation to share components between running application.
To explore the uncharted waters of using module federation with third-party packages that are crucial for the application to function properly.
Outcome
We created three applications that function separately from one another and have their own purpose in the overall project flow. When all three applications came together, the user experience was flawless from both a UI and DX perspective.
The application looked and felt exactly how the client had requested. Namely, all design parts were in one place, allowing the client to make seamless updates that would be automatically implemented across all three applications.
To ensure the client could add new services in the same optimized way we had intended and was, therefore, as seamless as possible, we created a straightforward template for their in-house developers to use at any time.
Since WebPack federation was a new technology that we hadn’t used before and is not a commonly known feature, we had interesting conversations in multiple technical forums about the third-party packages we used about how to integrate them in this scope properly. This not only increased our own experiences and knowledge but bridged the gap between businesses and their access to state-of-the-art technology.