My Technical Learnings

  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 ...

  This is the continuation of the article https://mytechlearns.blogspot.com/2022/06/micro-frontend-and-implementation-using.html , where we had developed the single-spa standalone application (Remote app in terms of micro frontend), Now we are going to create the Host application which integrates the remote application we developed earlier. create a new application using single spa as show below this time we selected the "single-spa root config" as the type to generate. based on the type of the application, single-spa framework is going to create required templates and files. Lets check the application by running npm start if everything goes well you will see the default welcome screen provided by single-spa framework. Lets modify the config to integrate the screen we developed in the previous tutorial in the host application add lines from 52 to 54 as shown above Line 52: location of our remote application js file which contains single-spa lifecycle methods Line 53 &...

  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. Account screen — account management Pay & Transfer screen — manage payments and transfer related actions Investments screen — investments related activities Profile screen — manage your profile If we follow micro frontend architecture we have following advantages, Each screen mentioned above can be developed, Tested and deployed separately. Each screen can be developed with its own UI frameworks, for example account screen can be be developed using angular, profile screen...

  If you have ever worked with the java.util.Date data types for java web applications, some or the other time you might have faced the time zone issues. Lets take the below example to understand one of the issue associated with this data type You have a web application which the user needs to enter the date of birth in UI, and the backend API persists this into DB Lets say User has born on June 15th 1978, 8:30PM in New Jersey, USA. lets say now the user is present in Japan his DOB is not going to change according to the Japan timezone. It is still the same fact that he was born on the date, time and location. But if we use the java.util.Date data type for the DOB in java application, when ever the input date converts into Date data type in the backend java application java.util.Date will actually adds the timezone based on the location the application is running, for example in the above scenario if user sends the input as 1978-06-15T22:30:00 to the backend, and the backend applic...