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

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 3Feature 2Feature 1

23. Root app
App 3App 2App 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