{"id":43164,"date":"2022-10-21T16:21:59","date_gmt":"2022-10-21T16:21:59","guid":{"rendered":"https:\/\/polarising.com\/techinside\/?p=43164"},"modified":"2022-10-21T16:22:01","modified_gmt":"2022-10-21T16:22:01","slug":"micro-frontends-all-you-need-to-know-to-implement-it-successfully-1-2","status":"publish","type":"post","link":"https:\/\/polarising.com\/techinside\/micro-frontends-all-you-need-to-know-to-implement-it-successfully-1-2\/","title":{"rendered":"Micro Frontends: all you need to know to implement it successfully. (1\/2)"},"content":{"rendered":"\n
<\/div>\n\n\n\n

The current Microservices approach to the backend of dividing the application into several independently deployed projects fixes the monolith problem, but there is still a bottleneck: the Frontend requires a new release of the whole application with the new changes. Micro Frontends (MFEs) solve that problem, by implementing the same strategy.<\/p>\n\n\n\n

<\/p>\n\n\n\n

This article aims to provide a basic sense of Micro Frontends by answering the basic questions (what, why and how) and why Module Federation might be the best way to implement them, so that you can start using this architecture in your projects.<\/p>\n\n\n\n

<\/div>\n\n\n\n

What are Micro Frontends?<\/h2>\n\n\n\n
<\/div>\n\n\n\n

MFEs are essentially portions of a web application, independently deployed and managed. They are hosted by a Shell (host page) and imported in the same way a normal application would import its own components. In the Shell’s perspective, the MFEs are Remotes, because they are not intrinsic to the project.<\/p>\n\n\n\n

<\/p>\n\n\n\n

By separating the Frontend into Shell and Remotes, the host takes on a specific set of responsibilities, such as Authentication, Navigation, Notifications, Error Handling and Metric Tracking. These are global concerns that must be synchronized throughout the application and for that reason must be maintained by the host.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Components which are good candidates to be turned into MFEs are self contained components that don’t have dependencies to the page and small components that are shared between pages, like headers and footers.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Which leads us to the question: should you use Micro Frontends? It depends on what you need:<\/p>\n\n\n\n

  1. Independent builds and deployments
    <\/li>
  2. Source code isolation
    <\/li>
  3. Mixed tech stacks<\/li><\/ol>\n\n\n\n

    If this is it, then Micro Frontends are probably a good choice.<\/p>\n\n\n\n

    <\/div>\n\n\n\n
    \"\"
    Image from Polarising’s image bank.<\/figcaption><\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    How do they work?<\/h2>\n\n\n\n
    <\/div>\n\n\n\n

    Micro Frontends themselves are a way to solve a bigger problem, which is reliably and easily sharing code between projects.<\/p>\n\n\n\n

    There are several solutions to this problem, one of them being Micro Frontends using any tool like OpenComponents, Tailor, Single SPA, etc. The component is extracted, bundled, registered and consumed and once they are updated, they are updated everywhere. The problem with this solution is that the shared components are external to the projects.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Other ways to solve this problem are extracting code into a Node Package Manager (NPM) library or using Edge Side Includes (ESI), but these approaches have problems of their own, like not being updated at runtime (NPM) or having compatibility issues with other frameworks, like React (ESI).<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    As of Webpack 5, released in 2020, there is another solution to this problem: Module Federation. This technology allows a Webpack build to dynamically load code from another build. Module Federation can be used for any JavaScript code, from plain functions to constants to components built with another framework, which makes it very valuable for MFEs, especially since it also allows lazy loading of the remotes.<\/p>\n\n\n\n

    This solution is better than the ones listed above because the shared components are not external to their projects, they are just externalized in the webpack config; as long as the project is deployed, the component is available for use everywhere and it has the most recent changes.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    By combining the ease of externalization, the singleton behaviour of libraries and the ability to host components built with different frameworks, Webpack’s Module Federation is a great way to build a MFE application.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    The Pros and Cons to a Micro Frontends architecture.<\/h2>\n\n\n\n
    <\/div>\n\n\n\n

    There are specific reasons why this is a better solution to implement frontend projects than the traditional single module approach:<\/p>\n\n\n\n

    1. Strategic and Tactical Focus
      By using MFEs the host page team can focus on general problems and leave the small interface tweaks and fixes to the MFE team; each team deals with 1 MFE so there is a lot more focus on the scope.
      <\/li>
    2. Reusability
      MFEs can be resued as long as the host conforms to the MFE standard.
      <\/li>
    3. Tech Agnosticism
      As long as the framework uses the MFE standard, a host page can have several MFEs written in different languages\/built with different frameworks because of Module Federation.
      <\/li>
    4. Focused Unit Testing
      By separating the code bases the tests take less time because they aren’t all ran at once.
      <\/li>
    5. Streamlined Development
      MFEs can be deployed whenever new changes are added without requiring an entirely new deployment of the Frontend.
      <\/li>
    6. Fewer Lines of Code in each solution
      Making a modular application reduces the total amount of code per module. It\u2019s easier to navigate and change a codebase with small independent modules than a single project with hundreds of files.<\/li><\/ol>\n\n\n\n
      <\/div>\n\n\n\n

      But there are also some Cons that are relevant to mention:<\/h2>\n\n\n\n
      <\/div>\n\n\n\n
      1. Higher Complexity
        By splitting a single application into several projects, the team (or teams) working on the application needs to set up multiple pipelines and deployments. Making changes in the codebase might require redeploying several modules, which means there must be a clear understanding of the dependencies between them.
        <\/li>
      2. Lack of standard
        There are several OpenSource frameworks out there, but none is standardized.
        <\/li>
      3. Framework Upgrades
        If every MFE has a different repo, some projects might run different versions of the frameworks used.<\/li><\/ol>\n\n\n\n
        <\/div>\n\n\n\n

        Wrapping up.<\/h2>\n\n\n\n
        <\/div>\n\n\n\n

        So, basically this article is to help you understand how Micro Frontends are similar to Microservices and that their purpose is solving the same problem, which is adopting a modular approach to software development.<\/p>\n\n\n\n

        We’ve also seen how MFEs can be implemented through several tools and how Module Federation (available since Webpack 5) is a good choice because of its ease of use and compatibility with multiple tech stacks and lazy loading.<\/p>\n\n\n\n

        Stay tuned for a second article where I\u2019ll be showing how to use Micro Frontends in your projects by using a simple use-case.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        I guess that now all that’s left is for you to try it yourself.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Good luck \ud83d\ude42<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Jo\u00e3o Oliveira<\/strong>
        <\/strong>Software Developer at Polarising<\/p>\n\n\n\n

        <\/div>\n\n\n\n
        \n
        Be a Frontend Engineer<\/a><\/div>\n<\/div>\n\n\n\n
        <\/div>\n\n\n\n

        Sources:<\/strong>
        https:\/\/www.youtube.com\/watch?v=w58aZjACETQ<\/a> (JackHerrington. (2022, February 25). Micro-Frontends: What, why and how [Video]. YouTube. Retrieved June 6, 2022).
        https:\/\/www.youtube.com\/watch?v=s_Fs4AXsTnA<\/a> (JackHerrington. (2021, October 14). Micro-FrontendsIn Just 10 Minutes [Video]. YouTube. Retrieved June 7, 2022).
        https:\/\/www.youtube.com\/watch?v=D3XYAx30CNc<\/a> (JackHerrington. (2020, March 7). Introducing Module Federation in Webpack 5 [Video]. YouTube. Retrieved June 14, 2022).
        https:\/\/medium.com\/swlh\/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669<\/a> (Jackson, Z. (2020, March 2). Webpack 5 Module Federation: A game-changer in Javascript architecture. | The Startup. Medium. Retrieved June 14, 2022).
        https:\/\/webpack.js.org\/concepts\/module-federation\/<\/a> (Module Federation. (n.d.). Webpack. Retrieved August 23rd, 2022).
        https:\/\/www.youtube.com\/watch?v=lKKsjpH09dU&ab_channel=freeCodeCamp.org<\/a> (freeCodeCamp.org. (2021, November 10). Micro-Frontends Course – Beginner to Expert [Video]. YouTube. Retrieved August 23, 2022).
        https:\/\/app.pluralsight.com\/library\/courses\/ng-conf-2021-session-38-part-1\/table-of-contents<\/a> (Mecham, O. (n.d). Workshop: Advanced Application Architecture with MicroFrontends Part 1. Pluralsight).<\/p>\n","protected":false},"excerpt":{"rendered":"

        The current Microservices approach to the backend of dividing the application into several independently deployed projects fixes the monolith problem, but there is still a bottleneck: the Frontend requires a new release of the whole application with the new changes. Micro Frontends (MFEs) solve that problem, by implementing the same strategy. This article aims to […]<\/p>\n","protected":false},"author":41,"featured_media":41280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[],"class_list":["post-43164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"uagb_featured_image_src":{"full":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured.jpg",1600,900,false],"thumbnail":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-150x150.jpg",150,150,true],"medium":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-300x169.jpg",300,169,true],"medium_large":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-768x432.jpg",768,432,true],"large":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured.jpg",1600,900,false],"authorship-box-avatar":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-150x150.jpg",150,150,true],"authorship-box-related":["https:\/\/polarising.com\/techinside\/wp-content\/uploads\/2021\/05\/recruitmentprocess_image_featured-70x70.jpg",70,70,true]},"uagb_author_info":{"display_name":"Jo\u00e3o Oliveira","author_link":"https:\/\/polarising.com\/techinside\/author\/joao-oliveira\/"},"uagb_comment_info":0,"uagb_excerpt":"The current Microservices approach to the backend of dividing the application into several independently deployed projects fixes the monolith problem, but there is still a bottleneck: the Frontend requires a new release of the whole application with the new changes. Micro Frontends (MFEs) solve that problem, by implementing the same strategy. This article aims to…","_links":{"self":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts\/43164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/comments?post=43164"}],"version-history":[{"count":24,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts\/43164\/revisions"}],"predecessor-version":[{"id":43262,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/posts\/43164\/revisions\/43262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/media\/41280"}],"wp:attachment":[{"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/media?parent=43164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/categories?post=43164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/polarising.com\/techinside\/wp-json\/wp\/v2\/tags?post=43164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}