Micro Frontend and implementation using single-spa-react framework and SystemJS

 


What is a Micro Frontend:


If you are familiar with backend development you might have heard about the Micro services, micro frontend also carries the same meaning, behaviour and advantages carried from micro services but from UI perspective.


In Micro Frontend Architecture we break down a big monolith UI application to multiple separate UI applications, where each UI has its own separate development, testing and deployment.


Lets take a banking website example, on a high level we have following screens.

  1. Account screen — account management
  2. Pay & Transfer screen — manage payments and transfer related actions
  3. Investments screen — investments related activities
  4. Profile screen — manage your profile


If we follow micro frontend architecture we have following advantages,

  1. Each screen mentioned above can be developed, Tested and deployed separately.
  2. Each screen can be developed with its own UI frameworks, for example account screen can be be developed using angular, profile screen with React, other screens using Vue.
  3. Each screen can be developed in parallel by different teams.
  4. Any new changes only affect the screen that needs to be changed, only that screen will be changed and tested separately
  5. With each team developing screens in parallel, the timeline of the whole product development decreases.


In micro frontend architecture there are host and remote applications


Remote: is an individual application where we develop features like account screen, profile screen


Host: is an application which integrates/hosts all the remotes





In the below article we will see how to develop using single-spa framework and using ModuleFederationPlugin


single-spa is javascript framework designed to develop and integrate all micro frontends together. 


You can create a new project for single-spa framework and provide inputs as shown below





There are 3 types of single spa available:


a. single-spa application / parcel — select this one if you are developing remote.

b. single-spa root config — select this if you are developing the host


Single spa supports different frameworks like vue, angular, react etc. for this app we are using react


Other options are self explanatory 


When every thing is done right you see the below output.





You can move to the new directory and see the installed application is running or not





You can access the URL using : http://localhost:7081/





This is a default welcome screen for all single spa apps.


You can some changes to make your application up and running individually without welcome screen.


By default single spa creates a js with single spa lifecycle methods and the file name will be ${organization}-${projectName}.tsx, in our case it is testorg-mf01.tsx. this lifecycle methods will be used by the registerApplication method which we look while creating a host application.


Lets create 2 files called bootstrap.ts and main.tsx


main.tsx:





bootstrap.ts:





Modify the webpack.config.js as shown below





Line 10: will disable the default html file generated by single-spa


Line 16 - 18: bootstrap file added to entry list, “defaultConfig” already has a entry point for testorg-mf01.tsx file


Line 22 - 27: html plugin to create a html file, and we had given an html template file.


Index.ejs:





single-spa uses systemjs which is a dynamic module loader and supports JS import maps.


[line 8 - 17] import map is a javascript object contains only a key called imports and imports is also a object where the key represents the string that can be used for import, value represents the location from where the module can be imported


Line [6-7]: scripts to load systemjs


Line [8 - 17]: import maps for various libraries and even to our root file


Line 22: “System” is a global object exposed by the system js module, and it exposes various methods, import is one method which imports the js module and runs in browser dynamically


So System.import(“root”)


  1. System checks for the mapping under imports object in import map.
  2. Dynamically loads it into the browser


After making these changes when you start the application you can see the below screen






All the source code discussed here is uploaded to GitHub:


https://github.com/satish-nag/mf01/tree/master



In the next section we are going to create a host app using single spa 



References:


Microfrontend architecture: 

        https://martinfowler.com/articles/micro-frontends.html

https://micro-frontends.org/

https://single-spa.js.org/docs/microfrontends-concept/

SystemJs: 

https://github.com/systemjs/systemjs

https://www.sitepoint.com/modular-javascript-systemjs-jspm/

Import maps:

https://www.digitalocean.com/community/tutorials/how-to-dynamically-import-javascript-with-import-maps





Comments

Post a Comment

Popular posts from this blog

How shared libraries work in ModuleFederationPlugin.

Image
courtesy: https://scriptedalchemy.medium.com/micro-fe-architecture-webpack-5-module-federation-and-custom-startup-code-9cb3fcd066c This is in continuation to the previous article https://mytechlearns.blogspot.com/2022/06/single-spa-using-single-spa-react-and.html . Application discussed below refers to the application mentioned in the previous article and code is shared in GitHub In this article lets see how shared libraries work in the ModuleFederationPlugin and also how we can run the two different versions of react can run in the host application (host uses the react version of 17.0.2 and remote uses version 18.2.0). Lets take a look into the shared section of MFP. Shared section represents the shared libs that will be shared with the host application or with the other remote application or with both. Similar to split chunks plugin, MFP splits your application into multiple chunks based on the shared dependencies provided. For example with the above configuration if we run webpa...
Read more

Single SPA using single-spa-react and ModuleFederationPlugin

Image
  SPA applications using single-spa framework and SystemJS is discussed in the below 2 articles Part1: https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using.html Part2 : https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using_27.html In this article we will see how to integrate remotes with host using ModuleFederationPlugin (MFP), and also we will use the single-SPA framework also (although not required using MFP) as discussed in the above 2 articles. What is a ModuleFederationPlugin (available in webpack v5.0+): As per the author of the plugin  “ A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not truly standalone and usually, a limited number of dependencies are shared. Moreover, sharing ...
Read more