Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 74 Anzeige

Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019

Herunterladen, um offline zu lesen

The web is changing every day and it’s so hard to follow and implement all the new and fancy stuff that is being built. Cool new frameworks, libraries, methodologies and new approaches to solving problems. Usually is not that easy to deprecate some old technology and migrate to the new one. There are not many developers that still want to work with Angular 1 or Backbone and moving to something new is becoming necessary. If this sounds familiar to you, then this talk is for you! There is an innovative way to migrate from the old technology, to change the applications step by step

The web is changing every day and it’s so hard to follow and implement all the new and fancy stuff that is being built. Cool new frameworks, libraries, methodologies and new approaches to solving problems. Usually is not that easy to deprecate some old technology and migrate to the new one. There are not many developers that still want to work with Angular 1 or Backbone and moving to something new is becoming necessary. If this sounds familiar to you, then this talk is for you! There is an innovative way to migrate from the old technology, to change the applications step by step

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019 (20)

Anzeige

Weitere von Codemotion (20)

Aktuellste (20)

Anzeige

Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019

  1. 1. Micro Frontends Microservice Approach To The Modern Web @ivanjov96
  2. 2. We want something new!
  3. 3. But now we can!
  4. 4. I present you The Micro Frontends! 🎉
  5. 5. Ivan Jovanovic Founder https://ivanjov.com @ivanjov96 IJ Consulting https://jsremotely.com
  6. 6. What are Micro Frontends?
  7. 7. Micro Frontends - a microservice approach to the modern web
  8. 8. What are Microservices?
  9. 9. Microservices is an architectural style that structures an application as a collection of loosely coupled services
  10. 10. Event bus
  11. 11. Event bus allows publish-subscribe-style communication between components without requiring the components to explicitly register with one another
  12. 12. Microservice principles • Lightweight protocol between services • Small services, one job per service • Service independence • Easier to understand, develop and test • Speeds up development • Enables continues delivery and deployment
  13. 13. VS VS
  14. 14. + +
  15. 15. App Feature 3Feature 2Feature 1
  16. 16. Root app App 3App 2App 1 Feature 1 Feature 2 Feature 3
  17. 17. How did we get here? • Monolith full stack apps 😊 • Frontend and backend apps 😄 • Microservices in the backend 😅 • Components on the UI 😎 • Micro frontends 🤯
  18. 18. We need to fight with the bad architecture!
  19. 19. What problem does it solve? • Use new frontend framework on the old architecture • No more shared codebases and conflicts • Independent deployments • Each team can pick their own stack • You can easily scale your frontend app
  20. 20. How to split apps? • By functionality on the page • By page • By section
  21. 21. Implementation 🎉 • External app bootstrapping • IFrames • Single-spa library • Frint framework
  22. 22. External app bootstrapping
  23. 23. External app bootstrapping • Code lives on different server • Independent deployment • Communication is done through: • Window object • Event bus
  24. 24. React app
  25. 25. React app export
  26. 26. Fetching React app in the Root app
  27. 27. Event bus - Eev • https://github.com/chrisdavies/eev • Less than 500 bytes minified + zipped • Really fast • Zero dependencies • Simple
  28. 28. IFrames
  29. 29. IFrames • Code lives on different server • Independent deployment • Communication is done through browser “Event bus”
  30. 30. Single-spa library
  31. 31. Single-spa library • https://github.com/CanopyTax/single-spa • Use multiple frameworks on the same page without refreshing the page • Write code using a new framework, without rewriting your existing app • Lazy load code for improved initial load time
  32. 32. Single-spa library • Code lives on the same server • Everything is bundled and deployed at the same time • Communication is done through: • Window object • Event bus • Shared state (Redux etc.) • Whatever works for you…
  33. 33. Loading function
  34. 34. Activity function
  35. 35. Single-spa app
  36. 36. Bootstrap
  37. 37. Mount
  38. 38. Unmount
  39. 39. Frint
  40. 40. Frint • https://frint.js.org/ • CLI • Routing • State management • Server side rendering supported
  41. 41. Frint CLI
  42. 42. Frint CLI
  43. 43. Reactive Programming 🎉
  44. 44. It works with React Native!!!
  45. 45. Micro Frontends Cons • More code and dependencies to maintain • Big bundles • Performance, a lot of code in the browser
  46. 46. Who is using Micro Frontends?
  47. 47. And many more…
  48. 48. Everyone! 😎
  49. 49. Conclusion • Don’t use this if you have a simple app • Use micro frontends to make things easier, not complicated • Micro frontends architecture doesn’t mean to use every framework in the world • Don’t forget to make standards across micro apps
  50. 50. Thank you! 😊 Blog ivanjov.com Twitter @ivanjov96

×