As each micro frontend is specific to a single task, it was necessary to create sets of them to better cover the different needs of our clients. This is how we end up with a wide variety of widgets for private sites, public sites, for front end customers, and for company employees.
Within these different digital channels, each micro frontend has a purpose. For example, one provides a service for sales staff, and another fulfills a need for post-sales, etc. What we now have before us is a literal universe of possibilities, and we are focused on identifying the right priorities to respond and provide the market with what it needs most.
The widget catalog comprised of micro frontends is intended as a digital product creation accelerator for our clients here at Modyo.
Tackling Complexity for Our Clients
Depending on the business domain, we offer different solutions. During discovery, we use a methodology called DDD (Domain-Driven Design), which is nothing more than a design-based approach for the development of complex system software through the deep connection between business domains, and the contexts that define them.
This model allows us to identify common elements among our clients' approaches across different business sectors. It is through these models that we have created the first 20 micro frontends of the catalog. Each of these widgets provide solutions for different needs across multiple business domains, and the scope of these solutions continue to expand as we develop additional widgets for future iterations of the catalog.
Clients can customize the micro frontends to build on existing components and a defined architecture, helping greatly accelerate early implementation in three simple steps.
First, clients can securely access the catalog and download. The second step is then customization, through the use of a development kit and/or brand design system, as well as creating additional steps/components if necessary, or to recreate certain flows. The third and final step then is to deploy the micro frontend in the Modyo environment.
... broadly speaking we find a common denominator: the need for pre-built, customizable digital experiences through Micro Frontends to accelerate transformation.
The widget architecture itself is important, and a relevant challenge when it comes to delivering world-class software. We've invested a lot of time and resources to find a solution that best suits our clients and partners.
Healthy Practices for Micro Frontends & Security Standards
In the end, we standardized our own development models based on the best practices suggested by the Vue.js community in building Vue.js micro frontends. This means incorporating best practices in code structure, component separation, and following Modyo's chosen reference model of a micro frontend architecture.
A Portfolio of Micro Frontends
In total, each widget in the catalog consists of:
The base code for use in a micro frontend.
An API or Micro Service(s) to which the micro frontend component is connected.
The relevant documentation.
A universal design system.
Given the large number of different designs to account for when creating digital channels, applications and widgets for our clients, we needed our UX/UI Lab to implement a universal design systems in order to speed up processes, speed up delivery, and manage quick changes. Particularly because when it comes to using design and prototyping tools, design changes are done in a few clicks and the differences can be overwhelming.
That is why for the catalog we include a design system that allows us to retain unity both visually and in the interactions of each proposed widget. This design system that we often call "vanilla" is quite simple and makes it easy for our clients to customize their micro frontends.
... That You Make Your Own
The customization process is handled in a simple way, by working with the the Modyo and Vue CLIs. Pulling widgets from the catalog for development and deployment generates a draft version of the widget to be published within the platform, and connects it to an approval flow (Team Review). Pass widgets through approval to go into production or simply automate deployment every time your development branch is merged or a new version is released.
Although the micro frontends in the catalog continue to evolve over time, this type of deployment gives each client the decision to pass on new changes to their widget without any kind of commitment or effect on their currently deployed digital products. This also generates independence in the usage model.
In other words, while we at Modyo maintain our commitment to constantly improving our software, we set up our systems in such a way as to not impact any client projects as they work to build their own digital experiences.
As of today, we launched 10 retail banking micro frontends and 9 investment micro frontends. We are already working hard on the next version that will include widgets from the insurance sector, that provide solutions in B2C sales, brokerage expertise, and more.
While this introduction covered a lot, you can always learn more by checking out the catalog for yourself. Take a look, evaluate, and tell us what you think.
Cover photo by Braden Collum on Unsplash