Micro Frontends - A microservice approach to the modern web - Codemotion Rome 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 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
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. 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
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
40. IFrames
41. IFrames • Code lives on different server • Independent deployment • Communication is done through browser “Event bus”
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
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…
52. Loading function
53. Activity function
55. Single-spa app
56. Bootstrap
57. Mount
58. Unmount
62. Frint
63. Frint • https://frint.js.org/ • CLI • Routing • State management • Server side rendering supported
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