Because of strict confidentiality agreements, we cannot disclose our partner's name to the public. Certain aspects of the project may also be obscured.
A Supermodular Framework: Achieving Technical Independence from Subcontractors
Context
Traditionally, our partner leaned on subcontractors for their software development needs. They sought a robust architectural plan for their upcoming web application, one that would allow for efficient scalability across numerous products and foster further in-house development. Lacking the necessary skills and expertise, their in-house team needed our specialized assistance.
100%
increased independence
Our partner can now operate independently, not needing to rely on external developers, thanks to the straightforward structure we implemented.
~20%
recurring cost savings
Utilizing our framework, our partner managed to decrease long-term application support costs by approximately 20 percent.
∞
knowledge transfer
As per the feedback from our partners, the insights gained from our team have proven to be priceless for them.
Objective
Our goal was to devise a scalable framework and educate their team on its effective utilization. Essentially, this involved creating an exceptionally modular web application using Webpack's Module Federation, a tool specializing in the separation of frontend modules. We primarily aimed to segregate visual components, authentication, and specific service aspects into isolated micro applications, facilitating the seamless incorporation of new services into both existing and upcoming applications.
Process
1.)The technical team from our partner's side helped us comprehend their requirements, supplying necessary documentation for existing services such as authentication.
2.)Our expert team formulated two strategies to accommodate our partner's needs.
3.)Next, we outlined the two strategies to our partner. The first involved dividing the three main parts into separate repositories and integrating them as custom packages. The second approach was centered on developing distinct SPAs capable of sharing components while operating.
4.)After weighing the pros and cons of both strategies with our partner, they opted for the second one, finding it better suited to their team.
5.)We executed the implementation and refined it through several iterations.
6.)To facilitate a smooth transition, we organized multiple training sessions for our partner's technical team, arming them with the knowledge necessary to effectively employ the newly established patterns.
Scope
Web Backend Development
Web Frontend Development
Tech Stack
Typescript
React
Webpack
GraphQL
Apollo
AWS AppSync
Challenges
Grasping the unique use-cases our partner wished for us to address and converting them into a comprehensive, actionable technical plan.
Reducing the learning curve for our partner's developers while delivering a solution that meets business needs.
Working within a budget while ensuring the long-term benefits for our partner through the framework we handed over to them.
Open-source Contribution
Our venture into utilizing Webpack Module Federation with third-party packages, such as theme-ui, has expanded technological boundaries and sparked a valuable discussion on Github.
Result
Our team's expertise enabled our partner to establish a sturdy, maintainable structure. We devised a user-friendly template, empowering their in-house developers to smoothly integrate new services while maintaining optimization. Furthermore, we conducted training sessions to equip them with the skills to independently navigate the technical environment.
We successfully developed three standalone microapplications, each fulfilling a specific role within the project workflow. Together, these applications provide a seamless experience in terms of both user interface (UI) and developer experience (DX).