Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Micro Frontends Architecture - Jitendra kumawat (Guavus)

70 views

Published on

Micro Frontends Architecture is micro service approach for Frontend development. Micro Frontends thinks web-app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in it. A team is cross functional and develops its features end-to-end, from database to user interface and take care of CI/CD. Micro service architechure is well know concept for backend point of view but In frontend we need to follow diffrent type of design pattern to achieve this.

Key Take away:
1. Learn about Micro Frontend
2. How to practically use them
3. Key challenges

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Micro Frontends Architecture - Jitendra kumawat (Guavus)

  1. 1. 1CONFIDENTIALCONFIDENTIAL © Guavus, Inc. All rights reserved. Micro Frontends Architecture  JitendraKumawat
  2. 2. 2CONFIDENTIAL About Me › Works at Guavus as a Lead Technology › 8+ years of industry experience in different roles › Like to explore and work on new technologies › Expertise in Frontend  development with different technologies
  3. 3. 3CONFIDENTIAL Agenda › Evolution of WebApps › Frontend Architecture › Micro Frontends › Case study › Challenges of Micro Frontends › Key Take Away
  4. 4. 4CONFIDENTIAL Evolution of WebApps
  5. 5. 5CONFIDENTIAL Evolution of WebApps Server Side Render Client Side Render Frontend Architecture
  6. 6. 6CONFIDENTIAL Serve side render
  7. 7. 7CONFIDENTIAL Serve side render › HTML File in server › Display in Browser › Slow page rendering › Static sites WordPress › Non-rich site interactions
  8. 8. 8CONFIDENTIAL Client side render
  9. 9. 9CONFIDENTIAL Client side render › Rendering using JavaScript. › Rich site interactions › Robust selection of JavaScript libraries › Great for web applications
  10. 10. 10CONFIDENTIAL SSR vs CSR
  11. 11. 11CONFIDENTIAL Frontend Architecture
  12. 12. 12CONFIDENTIAL Frontends Architecture MONOLITHIC Frontends MICRO Frontends
  13. 13. 13CONFIDENTIAL Monolithic Frontend Architecture › Simple to Develop › Simple to Debug › Simple to Test
  14. 14. 14CONFIDENTIAL Monolithic Frontend with Micro services Architecture
  15. 15. 15CONFIDENTIAL Monolithic Architecture Cons › Difficult to Develop, Test and Deploy for large applications › Upgrade technology stack › Large Team management to support
  16. 16. 16CONFIDENTIAL Then what next ?
  17. 17. 17CONFIDENTIAL Then what next ?
  18. 18. 18CONFIDENTIAL Micro Frontends
  19. 19. 19CONFIDENTIAL Micro Frontend Architecture › Inspired By Micro service Architecture › Microservices are loosely coupled independent services › Micro Frontends are web components or sub-modules
  20. 20. 20CONFIDENTIAL Micro Frontend Architecture
  21. 21. 21CONFIDENTIAL Core Ideas of Micro Frontends › Be Technology Agnostic › Isolate Team Code › Flexible development › Improved fault isolation › Scaling potential › Ease in CI/CD
  22. 22. 22CONFIDENTIAL
  23. 23. 23CONFIDENTIAL Build micro front end concepts
  24. 24. 24CONFIDENTIAL Design Analysis › Isolate code base › Avoid CSS conflicts › Load resources  › Share common resources
  25. 25. 25CONFIDENTIAL Create Micro Apps › Product Header App › Product View App › Product Cart App › Main App
  26. 26. 26CONFIDENTIAL Create Component › Create a component
  27. 27. 27CONFIDENTIAL Define Custom Web Element › Builds component using their web technology of choice and wraps it inside a Custom Element
  28. 28. 28CONFIDENTIAL Communication between Web Components › Expose component properties as per framework support
  29. 29. 29CONFIDENTIAL Communication between Web Components › The DOM specification of particular element (tag-name, attributes & events) acts as the contract or public API 
  30. 30. 30CONFIDENTIAL Build and Publish as Module Build the micro frontend application to reusable module/packaged as similar to any Angular modules. › Build › Packaging › Publish
  31. 31. 31CONFIDENTIAL Integrate Micro Apps into Main App › Add dependency › Import Module › Create Template › Build Application › Run Application
  32. 32. 32CONFIDENTIAL What did we achieve? › Each micro app is ready to run stand alone › Main is integrated with Web components › Main app and micro apps can be deployed and published stand alone
  33. 33. 33CONFIDENTIAL Another Ways › Create Single-SPA with multiple frameworks like React,Vuejs › Multiple single-page apps that live at different URLs. › Custom Elements + Server Side Includes using SSI/ESI ›  Use IFrames using libraries and Window.postMessage APIs to coordinate
  34. 34. 34CONFIDENTIAL Companies
  35. 35. 35CONFIDENTIAL Challenges › Consistent look and feel › Communication between micro frontends applications › Complexity › Browser Support of Custom Elements
  36. 36. 36CONFIDENTIAL
  37. 37. 37CONFIDENTIAL › Evolution of webapps › Micro Frontends Architecture › Key challenges Key Take Away
  38. 38. 38CONFIDENTIAL Connect Me › LinkedIn : https://www.linkedin.com/in/jitendra-kumawat-a9486924/ › Email: kumawat.itbhu@gmail.com › Source code reference (https://github.com/learnfrontend-dc/productmgt) › Micro Frontends details (https://micro-frontends.org/)
  39. 39. 39CONFIDENTIAL Thanks

×