Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Micro Frontends Architecture - Jitendra kumawat (Guavus)

8 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Micro Frontends Architecture - Jitendra kumawat (Guavus)

  1. 1. 1C O N F I D E N T I A LC O N F I D E N T I A L © Guavus, Inc. All rights reserved. Micro Frontends Architecture JitendraKumawat
  2. 2. 2C O N F I D E N T I A L 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. 3C O N F I D E N T I A L Agenda › Evolution of WebApps › Frontend Architecture › Micro Frontends › Case study › Challenges of Micro Frontends › Key Take Away
  4. 4. 4C O N F I D E N T I A L Evolution of WebApps
  5. 5. 5C O N F I D E N T I A L Evolution of WebApps Server Side Render Client Side Render Frontend Architecture
  6. 6. 6C O N F I D E N T I A L Serve side render
  7. 7. 7C O N F I D E N T I A L Serve side render › HTML File in server › Display in Browser › Slow page rendering › Static sites WordPress › Non-rich site interactions
  8. 8. 8C O N F I D E N T I A L Client side render
  9. 9. 9C O N F I D E N T I A L Client side render › Rendering using JavaScript. › Rich site interactions › Robust selection of JavaScript libraries › Great for web applications
  10. 10. 10C O N F I D E N T I A L SSR vs CSR
  11. 11. 11C O N F I D E N T I A L Frontend Architecture
  12. 12. 12C O N F I D E N T I A L Frontends Architecture MONOLITHIC Frontends MICRO Frontends
  13. 13. 13C O N F I D E N T I A L Monolithic Frontend Architecture › Simple to Develop › Simple to Debug › Simple to Test
  14. 14. 14C O N F I D E N T I A L Monolithic Frontend with Micro services Architecture
  15. 15. 15C O N F I D E N T I A L Monolithic Architecture Cons › Difficult to Develop, Test and Deploy for large applications › Upgrade technology stack › Large Team management to support
  16. 16. 16C O N F I D E N T I A L Then what next ?
  17. 17. 17C O N F I D E N T I A L Then what next ?
  18. 18. 18C O N F I D E N T I A L Micro Frontends
  19. 19. 19C O N F I D E N T I A L Micro Frontend Architecture › Inspired By Micro service Architecture › Microservices are loosely coupled independent services › Micro Frontends are web components or sub-modules
  20. 20. 20C O N F I D E N T I A L Micro Frontend Architecture
  21. 21. 21C O N F I D E N T I A L Core Ideas of Micro Frontends › Be Technology Agnostic › Isolate Team Code › Flexible development › Improved fault isolation › Scaling potential › Ease in CI/CD
  22. 22. 22C O N F I D E N T I A L
  23. 23. 23C O N F I D E N T I A L Build micro front end concepts
  24. 24. 24C O N F I D E N T I A L Design Analysis › Isolate code base › Avoid CSS conflicts › Load resources › Share common resources
  25. 25. 25C O N F I D E N T I A L Create Micro Apps › Product Header App › Product View App › Product Cart App › Main App
  26. 26. 26C O N F I D E N T I A L Create Component › Create a component
  27. 27. 27C O N F I D E N T I A L Define Custom Web Element › Builds component using their web technology of choice and wraps it inside a Custom Element
  28. 28. 28C O N F I D E N T I A L Communication between Web Components › Expose component properties as per framework support
  29. 29. 29C O N F I D E N T I A L Communication between Web Components › The DOM specification of particular element (tag-name, attributes & events) acts as the contract or public API
  30. 30. 30C O N F I D E N T I A L 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. 31C O N F I D E N T I A L Integrate Micro Apps into Main App › Add dependency › Import Module › Create Template › Build Application › Run Application
  32. 32. 32C O N F I D E N T I A L 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. 33C O N F I D E N T I A L 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. 34C O N F I D E N T I A L Companies
  35. 35. 35C O N F I D E N T I A L Challenges › Consistent look and feel › Communication between micro frontends applications › Complexity › Browser Support of Custom Elements
  36. 36. 36C O N F I D E N T I A L
  37. 37. 37C O N F I D E N T I A L › Evolution of webapps › Micro Frontends Architecture › Key challenges Key Take Away
  38. 38. 38C O N F I D E N T I A L 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. 39C O N F I D E N T I A L Thanks

×