search

onerzafer / microfe

micro fe app registry server
MIT License
73 stars 2 forks source link

Micro frontend-React.js #3

Closed ranjanrajiv00 closed 5 years ago

ranjanrajiv00 commented 5 years ago

I am doing feasibility analysis of implementing micro frontend using react.js, redux, nodejs/next.js

Below are few features-

  1. Independently deployable micro apps
  2. CSR, SSR and hydration
  3. Composing micro apps
  4. Seamless Routing

What would be your approach for this architecture or any example?

onerzafer commented 5 years ago

Hi, @ranjanrajiv00 thanks for your question. I'll try to make some comments hoping they will be helpful. But I don't know what exactly you are trying to build or asses so maybe my comments can a little bit off. limiting your micro apps tech stack to react and redux will give you the advantage of having some shared library code. And you don't need to support angular and you don't need to think on isolation of frameworks etc.

Regarding your features:

  1. any react app can be deployed a dedicated server and theoretically this server (MicroAppServer) is able to do SSR, CSR and hydration independently. Here the problems are relative paths static assets and routing on client and server. You may use a cdn for static assets so you won't have any relative path in your MicroAppServer
  2. CSR can be handled by each MicroApp (your react apps which are using your shared react library). SSR part can be done by each MicroAppServer like normally they need to do if they are the only server which is serving the app.
  3. For composing you need to consider 2 different part. One is a stitching server which is aware of all other react apps in your clusters. According to requested route, this stitching server will compose a layout by using each necessary part from independent MicroAppServer. On another word, it will collect HTML pieces from each node and glue them together. The second part is client side stitching; after getting composed, hydrated HTML and all resources related to this HTML you have to think about client-side routing. according to which route which microAppServer should return a new js CSS and HTML to the client and on which part of the page will be re-rendered on the client-side with this new app
  4. seamless routing is a really tricky one. I have a couple of ideas but none of them are perfect. As a quick and dirty solution, I decided to compartmentalize the responsibility of routing between a shared global app and the rest. Let's imagine you have a path called /content/id/13, on this case I decided to give the responsibility of /content part to the shared router (on the client and on the server side) and /id/13 will be the responsibility of a MicroAppServer.

I hope this helps.

ranjanrajiv00 commented 5 years ago

Thanks for replying and proving valuable details.

I have implemented micro frontend as below.

  1. Independently deployable micro apps
  2. CSR, SSR and hydration
  3. Composing micro apps
  4. Seamless Routing

Created a AppShell (container app). -> Routing -> CSR & SSR (Hydration) -> Load micro apps asynchronously -> Composing micro apps

Created micro apps (Core, Product and Cart). -> All micro apps are independently developed and deployed -> Configured webpack to build UMD library -> Micro apps will expose two api endpoint implemented in express.js /api/assests -> It will serve js & css /api/render -> it will return SSR html

Could you take a look into my approach. https://github.com/ranjanrajiv00/micro-frontends

Your feedback/input would give me to make it better.

onerzafer commented 5 years ago

Will do