Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Micro Frontends

615 Aufrufe

Veröffentlicht am

A micro frontend architecture is an approach to developing web applications as a composition of small frontend apps. Instead of writing a large monolith frontend application, the application can be broken down into domain-specific micro frontends, which are self-contained and can be developed and deployed independently. Each micro frontend can be owned by verticalised domain specific teams. Micro frontends do have advantages and disadvantages and they are not suitable in many cases. When micro frontends is a potential solution, make sure to use a domain driven top-down approach, with no big design upfronts. Keep it simple!

Frontend Developer Love Amsterdam - 30 January 2018

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Micro Frontends

  1. 1. Micro Frontends Extending the Micro Services
 Architecture to Web Development Jan 2018 | Frontend Developer Love @ Usabilla
  2. 2. Monolith
  3. 3. Monolith
  4. 4. Monolith + Single codebase
 + Easy quick setup
 + No version management
 + Single CI/CD pipeline
  5. 5. Monolith + Single codebase
 + Easy quick setup
 + No version management
 + Single CI/CD pipeline - Refactoring is difficult
 - Try new stack
 - Experiment
 - Long build times
 - Long development times
 - Long deployment cycles
  6. 6. Service 1 Service 2 Service 3 Frontend Monolith
  7. 7. Service 1 Service 2 Service 3 Frontend Monolith???
  8. 8. Service 1 Service 2 Service 3 Frontend Monolith??? Micro Frontends???
  9. 9. Spyros Ioakeimidis Software Engineer twitter
 @spyros_io github
 @spirosikmd
  10. 10. Chapter 1: What? Why?
  11. 11. Technology Radar https://www.thoughtworks.com/radar/techniques/micro-frontends
  12. 12. https://twitter.com/svdberg/status/625932935204610048
  13. 13. https://twitter.com/mircealungu/status/946878978463289344
  14. 14. Service 1 Service 2 Service 3 Frontend Monolith
  15. 15. Service 1 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3
  16. 16. > Reusable Code
 > Agility
 > Reduce risk
 > Easier Testing Service 1 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3
  17. 17. Service 1 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3 + Verticalised teams
 + Self contained
 + Vertical decomposition
 + UI Composition
  18. 18. Service 1 Service 2 Service 3 Frontend 2Frontend 1 Frontend 3 + Verticalised teams
 + Self contained
 + Vertical decomposition
 + UI Composition - Proprietary solution
 - Fit current architecture
 - Load times
 - Redundancy risk
  19. 19. Reporting Account Management Security Interactions Single Responsibility
  20. 20. Consistent Look & UX Reporting Account Management Security Interactions
  21. 21. Common Interface Reporting Account Management Security Interactions
  22. 22. Isolation Separate
 Deployment Feels Like
 One Page Different
 Frameworks Tree
 Shaking Vendor
 Bundles Several
 Frontends No Version
 Conflicts Separate
 Development
  23. 23. Chapter 2: How?
  24. 24. App Shell FTW!
  25. 25. iframe App Shell
 - State
 - Routing
  26. 26. iframe App Shell
 - State
 - Routing Isolation
 Separate Deployment
 Feels like one page
 Different Frameworks
 Tree Shaking
 Several Frontends
 No Version Conflicts
 Separate Development Vendor Bundles
  27. 27. https://github.com/manfredsteyer/meta-router
  28. 28. https://github.com/manfredsteyer/meta-router
  29. 29. We need to register
 routing in the micro
 frontend!
  30. 30. Web Components
 
 Each app a
 component
 
 Again App Shell is the orchestrator
  31. 31. Separate Deployment
 Feels like one page
 Different Frameworks
 Tree Shaking
 Several Frontends
 Separate Development Isolation
 Vendor Bundles
 No Version Conflicts Web Components
 
 Each app a
 component
 
 Again App Shell is the orchestrator
  32. 32. imports https://github.com/CanopyTax/single-spa https://github.com/medikoo/event-emitter
  33. 33. imports imports https://github.com/CanopyTax/single-spa https://github.com/medikoo/event-emitter
  34. 34. Reporting Account Management Security Interactions /reporting
 /account
 /editor Hybrid
  35. 35. Reporting Account Management Security Interactions /reporting
 /account
 /editor Isolation
 Separate Deployment
 Feels like one page
 Different Frameworks Vendor Bundles Tree Shaking (per app)
 Several Frontends
 Separate Development
 No Version Conflicts Hybrid
  36. 36. loads Move responsibility to micro frontends
  37. 37. Chapter 3: Challenges?
  38. 38. Integration!
  39. 39. Is this a micro frontend?
  40. 40. Or are these micro frontends?
  41. 41. app-1.js app-2.js app.css app-1.css app-2.css … … This person suffers
  42. 42. Its your time to figure out what
 the previous developers had in mind! We use docker, it should work! And this person suffers
  43. 43. Adaptive, Responsive & Accessible Design
  44. 44. Integration
 Testing is
 probably your
 best bet!
  45. 45. Chapter 4: Thoughts?
  46. 46. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fit your team
 around a large table? Yes No You might not need
 micro frontends yet Micro frontends
 might help you
  47. 47. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fit your team
 around a large table? Do you have monolithic
 dependencies? Yes No Yes No You might not need
 micro frontends yet Micro frontends
 might help you Integration might be
 complicated Micro frontends may
 be easily integrated
  48. 48. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/ Can you fit your team
 around a large table? Do you have monolithic
 dependencies? Got container, orchestration,
 devops experience? Yes No Yes No Yes No You might not need
 micro frontends yet Micro frontends
 might help you Micro frontends
 might be valuable Consider giving
 them a try first Integration might be
 complicated Micro frontends may
 be easily integrated
  49. 49. Extend the monolith?
  50. 50. “Architecture in micro frontends is domain driven, and low level components can be technical driven. It makes sense to follow a top down approach. Thinking of how to split your monolith in apps according to your domain. No big design upfront as things might go wrong.” Stefan Tilkov @ Devoxx Belgium 2016
  51. 51. https://twitter.com/derberq/status/910056617881817089
  52. 52. Thank you! https://jobs.usabilla.com/
  53. 53. https://undraw.co/
  54. 54. Check these out! > https://medium.com/@gilfink/why-im-betting-on-web-components-and-you-should-think- about-using-them-too-8629396e27a > https://softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach-towards-using- angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx > https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/ > https://x-team.com/blog/micro-frontend > https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web- development-f325ebdadc16 > https://www.packtpub.com/books/content/what-micro-frontend > https://technologyconversations.com/2015/08/09/including-front-end-web-components-into- microservices > https://www.tikalk.com/js/introduction-to-micro-frontends/ > https://micro-frontends.zeef.com/elisabeth.engel? ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc

×