Published 7 Jul, 2020 6 minutes of reading
In the six years I've been at Modyo, one of the things I've enjoyed most is doing Discovery. I enjoy it because it's an exercise in which we go to that place where our clients understand their daily life, their identity, their needs, their aspirations and their dreams, and to find—together with them—the best digital solutions to meet their goals.
Doing this exercise is very intense, because you need to deliver in a short amount of time. You need to find solutions. This discovery process has made us at Modyo keenly aware of the challenges facing different industries. It also allows us to find correlations, and see similarities between one discovery and the next.
Discovering Micro Frontends to Accelerate Results
After several discoveries across retail banking, investment, and the different areas of insurance, we've come across a common pattern. For instance, we know that in IT the time needed to deliver anything is yesterday (high urgency), so we have to find quick solutions that add real value.
Furthermore, these common patterns occur within particular sectors with similar challenges. For example, in insurance, it could be quotes with online sales, or in banking, building a 100% digital onboarding. Although each client wants a specific solution for their business, broadly speaking we find a common denominator:
The need for pre-built, customizable digital experiences through Micro Frontends to accelerate transformation.
From this common denominator, we at Modyo recognize a primary need, and this need is the source of our core motivation to deliver Micro Frontends through the Modyo Widget Catalog.
So, first things first: what is a widget or Micro Frontend? The word "widget" can mean a lot of things, but at Modyo, widgets and micro frontends are something very special. Let's explain what they are.
What are Micro Frontends at Modyo?
Widgets or Micro Frontends at Modyo are typically associated together and are separate elements or self-contained applications that are deployed on the Modyo platform. Each micro frontend's purpose is to cover a single business sub-domain or specific event.
Although each micro frontend operates independently, they are implemented while maintaining cohesion in design, flow management and common components in a library. This library makes each of them available in versions. This versioning helps maintain a high level of control, and follows best practices when deploying digital experiences through a highly agile, micro frontend architecture.
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.
Accelerating Time-to-Market
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.
With this in mind, we create base templates to use for local development, which is the most difficult to control. We chose Vue.js because as a top 3 javascript framework (together with Angular.js and React.js), it has the flattest learning curve, so that a person with knowledge in javascript is able to quickly adapt and become operational in a short timeframe.
Each micro frontend in our catalog adheres to high security standards to deliver the best possible base. In our continuous deployment pipeline, tools like ESLint force the use of javascript code styles, including features such as best security practices using the Airbnb preset. We also use stylelint which forces the use of css styles based on the standard Bootstrap and Jest-engine component unit testing. All of this is in addition to the high programming standards of our own Modyo developers, who have years of experience working with us building solutions across multiple industries and a special focus on financial services.
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
