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

Micro Frontends - A microservice approach to the modern web - PHPSrbija

Micro Frontends - A microservice approach to the modern web - PHPSrbija

4ff4d0c579ce1bdbe505d8317e158a20?s=128

Ivan Jovanovic

May 25, 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 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. Root app App 3 App 2 App 1 Microservice 3

    Microservice 2 Microservice 1
  25. How did we get here? • Monolith full stack apps

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

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

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

    • Frint framework
  30. External app bootstrapping

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

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

  35. React app export

  36. Fetching React app in the Root app

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

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

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

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

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

  54. Activity function

  55. None
  56. Single-spa app

  57. Bootstrap

  58. Mount

  59. Unmount

  60. None
  61. None
  62. None
  63. Frint

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

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

  67. Frint CLI

  68. Reactive Programming

  69. It works with React Native!!!

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

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

  72. And many more…

  73. Everyone!

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