从单体式网页应用到微前端

1. From Monolithic Web-Apps to Micro-Frontends Moving towards the micro-world! Davide Taibi Professor University of Oulu

2. Click to edit Master title style 2

3. 1. Introduction to MICRO-FRONTENDS Moving towards the micro-world! 3

4. “ 4

5. “ 5

6. “ 6

7. “ 7

8. What is a Micro-frontend? Let’s connect the dots... 8

9. “ From Domain Driven Design (DDD) Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with same or different technology choices, finally they avoid sharing logic with other subdomains and they are own by a single team 9

10. “ From Domain Driven Design (DDD) Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with same or different technology choices, finally they avoid sharing logic with other subdomains and they are own by a single team 10

11. “ A programming language, frameworks or libraries are just tools for expressing an intent. The most important thing is having a clear idea what we have to build and how do it 11

12. Technology independency Click to edit Master title style 12

13. Technology independency Click to edit Master title style Tech independency is going to impact: . best tech choice for the job . hiring, retention and onboarding process . building and deployment process . company’s standards . developers morale 13

14. “ From Domain Driven Design (DDD) Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with same or different technology choices, finally they avoid sharing logic with other subdomains and they are own by a single team 14

15. Place your screenshot here Share nothing… and I mean NOTHING Avoid to share components or code across different subdomains, abstraction could make our code more complex to maintain in the long run, the communication overhead could become a bottleneck for our organizations 15

16. “ From Domain Driven Design (DDD) Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with same or different technology choices, finally they avoid sharing logic with other subdomains and they are own by a single team 16

17. ownership Click Teams to edit Master title style Testing Development Documentation Build Deployment Live Support 17

18. ownership Click Teams to edit Master title style . A team can own 1 or multiple subdomains . Teams could contribute to others team’s micro- frontends . Sharing experience between teams can help the company’s growth 18

19. ??? Which are the companies using Micro-frontends today? 19

20. bootstrap Open component Interface framework Edge Side Include (ESI) iframes 20

21. Commonalities companies Click to between edit Master those title style . Large organizations . Distributed teams . Fast iterations and releases . Looking for technical teams independency . Massive growth . Aiming for the best technical quality 21

22. 2. Architectural implementation The journey of a thousand miles begins with one step 22

23. Micro-Frontends decisions framework https://increment.com/frontend/micro-frontends-in-context 23

24. Identify a micro-frontend 24

25. Compose and Route a micro-frontend 25

26. Micro-frontends communication 26

27. Spotify Iframes An iframes composition is the choice made by Spotify with an event bus for coordinating the events across different iframes. The desktop application mixes Web technologies with C++ codebase for the low-level operations UPDATE (03/19) Spotify moved away from this implementation for the web application https://bit.ly/2OGVPIe 27

28. Iframes 28

29. Zalando Server-side composition Zalando was one of the pioneers on micro-frontends with Mosaic9 (www.mosaic9.org) in particular we need to highlight Tailor.js, an open source system for assembling the components on-demand on a backend layer written in Go. At the end of 2018 they are moving their implementation to a server-side include system called “Interface framework” 29

30. IKEA Edge Side Includes (ESI) Ikea embraces Micro-frontends via transclusion mechanism via Edge Side Includes (aka ESI) ESI is a proposal made by several CDNs companies in order to standardise the way you can compose frontend pages via transclusion. In this case the HTML page is composed on the edge allowing a dynamic way for composing pages More info about ESI from Kotte’s post 30

31. 4. Technical challenges Better make the horizon your goal; it will always be ahead of you 31

32. Shift of mindset From: . technology decisions upfront . reluctance of architectural changes . global coding style decisions . shared automation pipelines . code reusability . longer onboarding process 32

33. Shift of mindset Technology agnosticism Embracing changes and accommodate new architectural requirements Team coding style and best practices definition Independent automation pipelines Acceptance of code duplication in favour of speed Easier hiring and onboarding Innovation 33

34. 34

35. Search Engine Optimizations Standard implementation Dynamic Rendering 35

36. NOW what? 36

37. Credits This work is based on the collaboration with Luca Mezzalira VP of Architecture at DAZN Severi Peltonen Elenium Oy Google Developer Expert Currently AWS Principal Serverless Solution Architect Severi Peltonen, Luca Mezzalira, Davide Taibi. Motivations, benefits, and issues for adopting Micro-Frontends: A Multivocal Literature Review Information and Software Technology, Volume 136, 2021 37

38. DDD resources Decompose by subdomain https://bit.ly/2DUTQ1v Subdomains and bounded context in DDD https://bit.ly/1BPZfIW 38

39. Micro-frontends... try yourself! Click www.single-spa.js.org to edit Master title ▧ Single-SPA: style ▧ ESI: gustafnk.github.io/microservice-websites/ ▧ Mosaic: www.mosaic9.org ▧ Open Components: github.com/opencomponents/oc ▧ Feature Hub: feature-hub.io ▧ Learning/Sharing: www.buildingmfe.com 39

40. QnA 40

41. Thank YOU You can find me at: @davidetaibi davide.taibi@oulu.fi 41