Enable javascript in your browser for better experience. Need to know to enable it? Go here.

Four principles of micro frontends for mobile (part two)

Principles of Micro Frontends for Mobile



As the originator of MFE (Micro Frontends), Thoughtworks has involved Micro Frontends for Mobile in many projects and distilled four core principles:


  1. Business ownership


  2. Build platform as product


  3. Autonomous


  4. Federated platform governance

Let's explore these four principles in more detail.



1. Business ownership

The bottleneck in the development stage of mobile applications is that the final product submitted to the app store is still a compressed package of a single application, so the ability of each business team to deploy and publish independently is a big limitation. What we can do is based on the modular technical support provided by the mobile platform. In the packaging phase, we can decouple the business team from the code repository level, and in turn, we can build our own BFF (backend for frontend) to support our own business, thereby shifting the business modules within our team from external dependencies to internal dependencies, giving us more flexibility to schedule tasks according to priorities. In the end, one feature team could get business ownership including mobile MFE and BFF.



2. Build platform as a product

Currently, the incremental market is turning into the stock market. With a fixed target audience, we need to build a platform rather than a product in an existing market to support more business products and allow different lines of business to independently develop online product features on the platform. As suggested in Thoughtworks Looking Glass: Realizing the potential of platforms in 2022, we should treat platforms as products, and build developer-focused infrastructure platforms and platform business models for all MFE teams.



3. Team autonomy

For feature teams, the Micro Frontends for Mobile strategy maximizes team autonomy. How do you stay agile while maintaining team autonomy?


We need to implement it in three phases:



  • Planning and design stage: define features based on OKR, user experience design based on business model


  • Development and deployment stage: independently select technology stack based on the platform level, or consider building business capabilities in cross-platform containers, selectively build MFE and BFF, which is maintained by the team; Build your own pipeline to run unit tests and automation tests faster, build internal MFE distribution platform to support independent MFE deployment and testing;


  • Release and operate stage: make release plan according to release train, use the platform to integrate performance monitoring and data burying and other basic capabilities, support gray release and remote toggle function, and ensure the stability of the whole application.



    4. Federated platform governance


    As a large mobile application distributed team, sensible default becomes incredibly important, especially when the final deliverable is actually a collection of all the team's code. Building a federated platform governance is essential, which aims to shift the value system: enable interoperability & ecosystem thinking and remove friction.


    Standardization micro frontend

    Since MFE maximizes team autonomy, FG (federated governance) needs to assist in making sensible default of MFE and guide it at the architectural level, including identifying common base capabilities and making subsidence plans; defining the micro frontends for mobile technology baseline, e.g., OS version, in-process architecture principle, security, system health dimension definition, dependency conflict resolution, etc.


    Micro frontend product boundaries and design guidelines

    FG needs to assist in defining the guideline of product design to ensure consistent user experience and define product boundaries. Atomic Design is a popular design paradigm that compares design rules to cellular structures, from atoms to pages, to achieve minimal granularity of user experience consistency.


    Automated governance policies as platform capabilities

    The technical governance tool of MFE is also a part of FG's concern. For example, templates are used to simplify and unify the process of MFE set up, and automatic tools such as dependencies management bot, security scan, code style git-hook and publishing bot are provided to guarantee MFE quality and start-up cost savings.


    Federated governance oversight

    FG could be composed of the platform's product manager, architects and decision-making members of each MFE team of the Platform. Through close contact and regular catch up, FG can jointly realize the evolutionary development of mobile architecture.





    The primary purpose of MFEs is to improve team scalability and autonomy, which makes organizational level technical practices and collaboration equally important. We hope that we could provide some guidelines through our experience to help you find out the most suitable solution for mobile apps.

    Disclaimer: The statements and opinions expressed in this article are those of the author(s) and do not necessarily reflect the positions of Thoughtworks.

    Keep up to date with our latest insights