Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends - A microservice approach to the modern web - Codemotion Rome 2019

Micro Frontends - A microservice approach to the modern web - Codemotion Rome 2019

4ff4d0c579ce1bdbe505d8317e158a20?s=128

Ivan Jovanovic

March 23, 2019
Tweet

Transcript

  1. Micro Frontends Microservice Approach To The Modern Web @ivanjov96

  2. None
  3. None
  4. We want something new!

  5. But now we can!

  6. I present you The Micro Frontends!

  7. Ivan Jovanovic Founder https://ivanjov.com @ivanjov96 IJ Consulting https://jsremotely.com

  8. What are Micro Frontends?

  9. Micro Frontends - a microservice approach to the modern web

  10. What are Microservices?

  11. Microservices is an architectural style that structures an application as

    a collection of loosely coupled services
  12. None
  13. Event bus

  14. Event bus allows publish-subscribe-style communication between components without requiring the

    components to explicitly register with one another
  15. 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
  16. None
  17. None
  18. None
  19. VS VS

  20. + +

  21. None
  22. App Feature 3 Feature 2 Feature 1

  23. Root app App 3 App 2 App 1 Feature 1

    Feature 2 Feature 3
  24. How did we get here? • Monolith full stack apps

    • Frontend and backend apps • Microservices in the backend • Components on the UI • Micro frontends
  25. We need to fight with the bad architecture!

  26. 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
  27. How to split apps? • By functionality on the page

    • By page • By section
  28. Implementation • External app bootstrapping • IFrames • Single-spa library

    • Frint framework
  29. External app bootstrapping

  30. External app bootstrapping • Code lives on different server •

    Independent deployment • Communication is done through: • Window object • Event bus
  31. None
  32. None
  33. React app

  34. React app export

  35. Fetching React app in the Root app

  36. Event bus - Eev • https://github.com/chrisdavies/eev • Less than 500

    bytes minified + zipped • Really fast • Zero dependencies • Simple
  37. None
  38. None
  39. None
  40. IFrames

  41. IFrames • Code lives on different server • Independent deployment

    • Communication is done through browser “Event bus”
  42. None
  43. None
  44. None
  45. None
  46. None
  47. Single-spa library

  48. 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
  49. None
  50. 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…
  51. None
  52. Loading function

  53. Activity function

  54. None
  55. Single-spa app

  56. Bootstrap

  57. Mount

  58. Unmount

  59. None
  60. None
  61. None
  62. Frint

  63. Frint • https://frint.js.org/ • CLI • Routing • State management

    • Server side rendering supported
  64. None
  65. Frint CLI

  66. Frint CLI

  67. Reactive Programming

  68. It works with React Native!!!

  69. Micro Frontends Cons • More code and dependencies to maintain

    • Big bundles • Performance, a lot of code in the browser
  70. Who is using Micro Frontends?

  71. And many more…

  72. Everyone!

  73. 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
  74. Thank you! Blog ivanjov.com Twitter @ivanjov96