Recommended
More Related Content
Similar to MicroForntends.pdf
Similar to MicroForntends.pdf (20)
Recently uploaded
Recently uploaded (20)
MicroForntends.pdf
- 1. Micro-Frontends Sagar Tanaji Bhosale https://www.linkedin.com/in/sagarbhosale91/ +91 9730910218 https://stackoverflow.com/users/3497603/sagar-bhosale about.me/sagarbhosale
- 2. What are Micro- Frontends? Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi- independent “microapps” working loosely together. The micro-frontend concept is vaguely inspired by, and named after, microservices.
- 3. An History of Evolution
- 4. An History of Evolution - Future Organization in Verticals
- 5. Micro Frontend Benefits 3 4 5 2 1 Freedom in stack’s choices Small Customer Centric Teams Autonomous development and deployment Autonomous testing and release of features Application’s evolution made easier Micro Frontend
- 7. Freedom in stack’s choices •App1 developed in React can be served from domainA, developed by Team A, with its own deployments cycles, testing, etc… •App 4 developed in Angular can be served from domainB, developed by Team B, with its own deployments cycles, testing, etc… The Search module can be done with Technology A, the Authentication module can de done with Technology B, and so on.
- 9. Who is using Micro Frontends? ▪ Amazon — Ecommerce site ▪ Upwork ▪ Spotify ▪ HelloFresh ▪ Zalando ▪ OpenTable and so on …
- 10. Implementation strategies ❑ Server-side composition : Here HTML file is rendered on server, which contain any common page elements and then uses the server side to plug in page-specific content from fragment HTML files. server { listen 8080; server_name localhost; root /usr/share/nginx/html; index index.html; ssi on; # Redirect / to /browse rewrite ^/$ http://localhost:8080/product redirect; # Decide which HTML fragment to insert based on the URL location /browse { set $PAGE 'product'; } location /order { set $PAGE 'order'; } location /profile { set $PAGE 'profile' } # All locations should render through index.html error_page 404 /index.html; } <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>E-commerce container</title> </head> <body> <h1> E-commerce </h1> <!--# include file="$PAGE.html" --> </body> </html>
- 11. Implementation strategies ❑ Build-time integration : The approach where each micro frontend app is published as a package and have the container app which includes them all as library dependencies. Here is how the package.json will look like : { "name": "@e-commerce/container", "version": "1.0.0", "description": "A product delivery app", "dependencies": { "@e-commerce/products": "^1.2.3", "@e-commerce/order-products": "^4.5.6", "@e-commerce/user-profile": "^7.8.9" } }
- 12. Implementation strategies ❑ Integration via iframes (Client-side integration) : ▪ In this (old) approach, we can have a single page with multiple inner applications, each one in a different iframe. ▪ window postMessage() is used to communicate between the applications. ▪ Not suitable for responsive design and complex routing/deep linking
- 13. Implementation strategies ❑ Using Web Components : • Enable to create reusable custom elements • In runtime integration via web components, each micro frontend defines an HTML element for the container to represent an instance instead of defining a global function called by the container. Web Components are isolated components that can be (re)used in HTML pages and web applications. These are also known as custom elements. Custom Element than can be reused in any HTML file : <evil-plan ransom="a single dollar"></evil-plan>
- 14. Implementation strategies ❑ Module Federation – • Webpack 5 core feature which allows a JavaScript application to dynamically load code from another application. • The code is loaded dynamically, and if a dependency is missing, the dependency will be downloaded by the host application, which allows for less code duplication in the application. • For example, if you’re downloading a React component, your application won’t import React code twice. The module will smartly use the React source you already have and only import the component code. • Terminologies : name Acting as a name of the remote module host The currently running application that is hosting federated remote modules. remote A reference to an external federated module. expose A module that is exported from an application is “exposed”. module The smallest unit of shareable code. Can be a single file.
- 15. HOST Remote
- 16. Downsides ▪ Payload size : There might be multiple download requirements to ensure complete functionality and browser support. ▪ Consistent user experience : For the user experience to remain cohesive and consistent, there must be a common understanding across teams. ▪ Operational and governance complexity : It is possible for developers to overpopulate their project with too many components as time goes on, causing multiple testing and deployment-phase issues to appear across several teams. ▪ Resources : Project must have access to multiple teams and sufficient size or resources. One team would be responsible for the creation, testing, and deployment of multiple modules, possibly across several languages, rather than just attending to one code base.
- 17. Thank you !