Nirajkashyap / react-microfrontend

https://nirajkashyap.github.io/react-microfrontend/ - Github Dashboard

MicroFrontend Reading:

• Must Read : https://martinfowler.com/articles/micro-frontends.html @ThoughtWorks
  
• https://hasgeek.com/reactfoo/2019-delhi/proposals/micro-frontend-architecture-a-case-study-of-the-fi-sP8U2fGsvBgu3vi9m6cF8R @walmart & @hasgeek
  
• presentation https://drive.google.com/file/d/1_qr-U2JwF6LP0aom7CKaOD3BlOFWK5aP/view @walmart - Why not React Loadables
  
• https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op React + Vue
  
• https://www.xenonstack.com/insights/what-is-micro-frontend/
  
• presentation : https://speakerdeck.com/naltatis/micro-frontends-building-a-modern-webapp-with-multiple-teams
  
• https://dev.to/phodal/micro-frontend-architecture-in-action-4n60
  

other links:

• https://github.com/micro-frontends-demo
  
• https://github.com/phodal/mooa
  
• https://github.com/CanopyTax/single-spa
  
• https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples
  

Problems

1. PayloadSize https://martinfowler.com/articles/micro-frontends.html#PayloadSize of each sub module and developing independent sub module repo
   

2. Modify react object can break sub module code base in https://demo.microfrontends.com/ from https://martinfowler.com/articles/micro-frontends.html#TheExampleInDetail @ThoughtWorks
   

Solutions :

1. Decrease PayloadSize by main code base : extracting react libs from other sub module using rollup
   

2. Freeze React lib objects like below

let microFrontendReactV16 = {};

microFrontendReactV16['ReactDOM'] = ReactDOM;
microFrontendReactV16['React'] = React;
microFrontendReactV16['react-redux'] = react_redux;
microFrontendReactV16['redux'] = redux;
microFrontendReactV16['reactstrap'] = reactstrap;
microFrontendReactV16['qs'] = qs;
microFrontendReactV16['reacthistory'] = history;
microFrontendReactV16['rxjs'] = rxjs;
microFrontendReactV16['redux-observable'] = redux_observable;
microFrontendReactV16['rxoperators'] = rxoperators;

Object.defineProperty(window, "microFrontendReactV16", {
    value: Object.freeze(microFrontendReactV16),
    writable: false

});

updates after typescript Create React App CLI base app

1. dynamic-import and code splitting
   problems :
   

• dynamic-import from url was not working.

        import('https://otherhost.com/someother.js') 

• reference : https://github.com/tc39/proposal-dynamic-import
  

solutions :

get react component code only and don't load react lib use rollup for this. example :

• Dynamic ( runtime + lazy ) javascript loading
  
  
• Only sub module of components and no react lib codebase

Dynamic route declaration by window appPaths
routing code base for code-splitting
rollup script to build sub module of components

2.Default scss loader added in webpack config and scss validator script is added in build process

3.Some Env used in project

• REACT_APP_SUB_MODULE - used for defining javascript source url for SUB_MODULE - configured in travis ci env
  
• REACT_APP_HASH_HISTORY - used to decide which history object to use. example useful for build hash history for gh-pages - configured in travis ci env
  
• REACT_APP_API_URL - used to config api location
  

Available Scripts

npm run fullstart

run end to end application

live example :
main module : https://nirajkashyap.github.io/react-microfrontend/ from https://nirajkashyap.github.io/react-microfrontend/
sub module : https://nirajkashyap.github.io/react-microfrontend-submodule/static/js/assets/Org.module.js is loaded from https://github.com/Nirajkashyap/react-microfrontend-submodule

Basic Create React App - README