Micro frontend and web components

Transcript

1. Microapps Web Components @yashints yashints yashints
2. Microapps Web Components @yashints yashints yashints
3. yashints
4. yashints Agenda ▪ Intro ▪ Core ideas ▪ Meet Ali and her team ▪ The issue ▪ Trials ▪ Final solution
5. Lead consultant @Readify Yaser Adel Mehraban @yashints Almond croissant addict cleverly disguised as a web developer yashints.dev dev.to/yashints
6. yashints I a good monolith
7. yashints “ Don’t even consider microservices unless you have a system that’s too complex to manage as a monolith. Martin Fowler
8. yashints “ Don’t even consider micro frontend unless you can vertically slice your system to enable your teams to act independently. Me
9. yashints Core ideas ▪ Development speed ▪ Autonomous teams ▪ Customer focus ▪ Technology agnostic
10. yashints Product owner CarZila
11. yashints The issue Data Layer Business Layer User Interface
12. yashints Technology agnostic Independent deployment Team ownership Develop independently Fast loading Smooth user interaction Sharing state Corporate identity Run independently Modular Native support
13. yashints First try User Interface Search Insight Test Drive Order Payment Inventory
14. yashints Technology agnostic Independent deployment Team ownership Develop independently Fast loading Smooth user interaction Sharing state Corporate identity Run independently Modular Native support
15. yashints Vision Search Insight Test Drive Order Payment Inventory Frontend Backend Data store
16. yashints If you want to go fast, go alone. If you want to go far, go together.
17. yashints First attempt Hyperlinks
18. yashints Hyperlinks Search Order Search.html order.html
19. yashints Fast loading Native support Team ownership Develop independently Run independently Technology agnostic Independent deployment Corporate identity Sharing state Modular Smooth user interaction
20. yashints Integration vis composition ▪ Build time ▪ Run time on client side ▪ Run time on server side
21. yashints Build time
22. yashints Build time { Search } { Insight } { Test Drive } { Order } { Payment } { Inventory } Build Bundle
23. yashints Fast loading Native support Team ownership Develop independently Technology agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
24. yashints Server Side composition
25. yashints SSI (Server Side Includes)
26. yashints SSI (Server Side Include)
27. yashints ESI (Edge Side Includes) Get Get Order
28. yashints Fast loading Native support Team ownership Develop independently Technology agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
29. yashints Client Side composition
30. yashints IFrames
31. yashints Fast loading Native support Team ownership Develop independently Technology agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
32. yashints Web components
33. yashints Custom Elements Shadow DOM ES6 Modules HTML Templates
34. yashints API
35. yashints API
36. yashints API
37. yashints App Shell
38. yashints Framework support
39. yashints Angular Elements Vue CLI Manual Community Soluttions Lit
40. yashints Fast loading Native support Team ownership Develop independently Technology agnostic Independent deployment Run independently Corporate identity Sharing state Modular Smooth user interaction
41. yashints Demo
42. yashints Real use cases ▪ Migrate a large app to another framework ▪ Fix a bug in one app and deploy independently ▪ Reuse an entire app ▪ And more…
43. yashints Taking balanced decisions is the secret ingredient for success
44. yashints
45. yashints
46. yashints References ▪ The demo is on my GitHub repo yas.fyi/2FeIrI3 ▪ Slides yas.fyi/2Kspzt8 ▪ https://micro-frontends.org/ ▪ A good reference list yas.fyi/2KXHaZD
47. yashints Questions?