{"id":4947,"date":"2021-07-14T11:31:40","date_gmt":"2021-07-14T09:31:40","guid":{"rendered":"https:\/\/www.evertop.pl\/?p=4947"},"modified":"2021-07-18T16:24:02","modified_gmt":"2021-07-18T14:24:02","slug":"the-final-stage-of-micro-frontends-part-iii","status":"publish","type":"post","link":"https:\/\/www.evertop.pl\/en\/the-final-stage-of-micro-frontends-part-iii\/","title":{"rendered":"Micro Frontend – The Final Step. Part III"},"content":{"rendered":"

Introduction<\/h2>\n

We start the last chapter by discussing the design approach, the micro-frontend implementation, and the capabilities it offers.<\/span><\/p>\n

All of the information we found in the three articles on micro-frontend should be treated as a serious introduction to the topic.<\/span><\/p>\n


\n\"...\"
\n<\/span><\/p>\n
\n

Read also: Introduction To Micro Frontend. Part I<\/a><\/h4>\n<\/div>\n<\/div>\n

\n\"...\"
\n<\/span><\/p>\n
\n

Read also: Micro Frontend \u2013 Deep Dive Into Micro-Frontends. Part II<\/a><\/h4>\n<\/div>\n<\/div>\n

I present a short summary to remind you of what you already know:<\/span><\/p>\n\n\n\n\n\n\n\n\n
\n

Technique<\/b><\/p>\n<\/td>\n

Category<\/b><\/td>\nExample implementation<\/b><\/td>\nStrengths<\/b><\/td>\nWeaknesses<\/b><\/td>\n\n

Recommendation<\/b><\/p>\n<\/td>\n<\/tr>\n

Build-time packages<\/td>\nBuild-time integration<\/td>\nNPN, yarn<\/td>\n\n

Easy to setup \u2013 no additional tools needed<\/p>\n

Known to developers<\/p>\n

Code deduplication<\/p>\n

Easy to achieve UX consistency<\/p>\n<\/td>\n

\n

Lockstep release process \u2013 the whole bundle must be recompiled and deployed<\/p>\n

Limited to one framework<\/p>\n<\/td>\n

Use only for small projects (no more than three teams) only if other options seems to be to much complicated<\/td>\n<\/tr>\n
SSI\/ESI<\/span><\/td>\nServer-side integration<\/span><\/td>\n\n

SSI \u2013 NGINX, Apache Http<\/span><\/p>\n

ESI \u2013 Varnish, Squid<\/span><\/p>\n<\/td>\n

\n

Easy to setup \u2013 HTTP servers and cashes are part of every web application architecture<\/span><\/p>\n

Full independency of deployments\u00a0<\/span><\/p>\n<\/td>\n

\n

Lack of cross-component communication \u2013 it must be solved in another way<\/span><\/p>\n

Hard to achieve consistent UX look & feel<\/span><\/p>\n

Lack of build in authentication and authorization<\/span><\/p>\n<\/td>\n

Use for eCommerce like web applications when microservices with less fluctuating application and services architecture<\/span><\/td>\n<\/tr>\n
Specialized micro frontends middleware<\/span><\/td>\nServer-side integration<\/span><\/td>\n\n

Zalando\u2019s Mosaic,\u00a0<\/span><\/p>\n

Compoxure, micro-fe<\/span><\/p>\n<\/td>\n

\n

Full independency of deployments<\/span><\/p>\n

Excellent control over page performance and failover<\/span><\/p>\n

Built-in advanced dynamic routing with autodiscovery<\/span><\/p>\n<\/td>\n

\n

Hard to setup \u2013 requires additional components<\/span><\/p>\n

Lack of cross-component communication \u2013 it must be solved otherway<\/span><\/p>\n

Hard to achieve consistent UX look & feel<\/span><\/p>\n

Lack of build in authentication and authorization<\/span><\/p>\n<\/td>\n

Use for eCommerce like web applications when microservices with high fluctuation of application and services architecture<\/span><\/td>\n<\/tr>\n
Iframes<\/span><\/td>\nClient-side integration<\/span><\/td>\n<\/td>\n\n

Easy to setup \u2013 no additional tools needed<\/span><\/p>\n

Full independency of deployments<\/span><\/p>\n

High component isolation<\/span><\/p>\n

Cross-component communication<\/span><\/p>\n

Real framework agnostic\u00a0\u00a0<\/span><\/p>\n<\/td>\n

\n

Hard to implement deep-linking<\/span><\/p>\n

Hard to implement RWD<\/span><\/p>\n

High resources consumption\u00a0<\/span><\/p>\n<\/td>\n

Use when framework agnostic and component isolation is the key concern and UX is not so important<\/span><\/td>\n<\/tr>\n
Micro frontend framework<\/span><\/td>\nClient-side integration<\/span><\/td>\nSingle SPA<\/span><\/td>\nFull integration between micro frontends and container application<\/span><\/p>\n

Support for all major JS frameworks<\/span><\/p>\n

Lazy loading<\/span><\/td>\n

Not well documented engine<\/span><\/td>\n\n

Use in rich application composed of many communicated micro frontends<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Source: https:\/\/bluesoft.com\/micro-frontends-the-missing-piece-of-the-puzzle-in-feature-teams\/<\/a><\/p>\n

Iframe<\/h2>\n

As a conclusion, let’s take a look at a rather interesting diagram that summarizes the possibilities of implementing a project using a micro-frontend architecture approach Iframe:<\/p>\n