Micro Frontends - A microservice approach to the modern web - Oredev 2019

Transcript

1. Micro Frontends Microservice Approach To The Modern Web @ivanjov96
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
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
19. VS VS
20. + +
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
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
41. IFrames
42. IFrames • Code lives on different server • Independent deployment • Communication is done through browser “Event bus”
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
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…
53. Loading function
54. Activity function
56. Single-spa app
57. Bootstrap
58. Mount
59. Unmount
63. Frint
64. Frint • https://frint.js.org/ • CLI • Routing • State management • Server side rendering supported
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