Microservice Websites – Øredev 2017
•
1 gefällt mir•1,029 views
This document discusses developing websites using a microservice architecture to achieve scalable development, evolvability, and performance. It proposes building the frontend using small, autonomous services that can be deployed independently. Content is shared between services using transclusion techniques like Edge-Side Includes and AJAX calls to include fragments. This allows each service to focus only on its own code and dependencies while reusing content from other services. The approach aims to provide great per-service performance through simple service implementations and diverse technologies, while enabling high release velocity through independent, self-contained teams.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Microservice Websites – Øredev 2017
Ähnlich wie Microservice Websites – Øredev 2017 (20)
Mehr von Gustaf Nilsson Kotte
Mehr von Gustaf Nilsson Kotte (8)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Microservice Websites – Øredev 2017
- 1. Microservice Websites Scalable development of an evolvable system with great mobile performance Gustaf Nilsson Kotte @gustaf_nk
- 2. IKEA M2 Static site blog (summer 2016)
- 3. IKEA M2 Norway (summer 2017)
- 4. IKEA M2 Norway (5 services)
- 5. Partial roll-outs (# of services) Australia (2) Austria (3) Denmark (2) Finland (2) France (2) Germany (3) Lithuania (2) Netherlands (2) Portugal (2) Sweden (2) Switzerland (2)
- 6. Desktop support (fall/winter 2017)
- 10. https://info.soasta.com/StateofOnlineRetailPerformance.html (Akamai) End-user performance → conversion After 2 seconds, conversion starts to drop (Values before 2 seconds in graph are noise)
- 12. Simple server-side HTML pages (when applicable) + HTTP/2 ↓ Great page load performance Performance strategy
- 16. Two pizza team rule
- 17. Conway’s Law (simplified) Service Service ServiceServiceService
- 18. IKEA M2 services/teams (simplified) Search Products WishlistCheckout Editorial content
- 19. Frontend monolith? Frontend Search Products WishlistCheckout Editorial content Backlog
- 20. Frontend teams/services Search Products WishlistCheckoutEditorial content Teams are self organized Teams develop, release and test themselves Teams are operational responsible Teams own the whole lifecycle of the services they create BacklogBacklog Backlog BacklogBacklog
- 21. Share content between services!
- 22. Building block: Transclusion Fragment Web page Literary Machines (1980), Ted Nelson
- 23. Reuse between teams/services Frontend service Pages Fragments Frontend service Pages Fragments Service/team boundary
- 24. Edge-Side Includes! end-user <html> … <div>Fragment</div> ... </html> Edge Web Server (cache) <div>Fragment</div> 1 2 3 <html> … <esi:include src=”url-to-fragment” /> ... </html> https://en.wikipedia.org/wiki/Edge_Side_Includes
- 25. AJAX example: <h-include> <html> … <h-include src=”url-to-fragment”></h-include> ... </html> end-user <html> … <div>Fragment</div> ... </html> Browser <div>Fragment</div> 1 2 3 https://github.com/gustafnk/h-include
- 26. ESI or AJAX?
- 27. Use ESI as a base Use AJAX transclusion for: ● Personalized content ● Client-side pages and components ● Lazy loading below the fold
- 28. Share content between services!
- 30. How to share CSS (and JS)? 1. Fragment consumers re-implement CSS (high coupling) 2. Common CSS framework (high coupling) 3. Fragment producers export CSS (high cohesion)
- 31. Fragment type dependencies Fragment Web page Fragment type style.b73bef.css [script.6f4e6f8.js] Service/team boundary
- 32. ...without leaky cache busts Fragment Web page Fragment type style.b73bef.css [script.6f4e6f8.js] ESI ESI style-fragment.html script-fragment.html Service/team boundary
- 33. Autonomous delivery Search Products WishlistCheckout Editorial content 1 - 2 releases/week/team 5 - 8 production releases/week
- 35. Header Other approaches for components? Footer Header Footer #microfrontends
- 37. Header “Scalable over time” problem? Footer
- 38. “Scalable over time” problem! SearchProducts WishlistCheckout Editorial content How?
- 39. Fragment Web page ? “What common dependencies can fragment producers assume?” ● CSS reset ● Polyfills ● Basic typography
- 40. Technology diversity = static files SearchProducts WishlistCheckout Editorial content [Shared fragments have no dependencies]
- 41. Scalable development Evolvability Performance Summary ● Simple (and diverse) services ⇒ Great per-service performance ● Transclusion: Edge-Side Includes (+ AJAX) ○ Style/script resource fragments ● Shared fragments have no dependencies
- 42. Resources https://microservice-websites.netlify.com/ Microservice Websites article (32 pages): https://gustafnk.github.io/microservice-websites/ ThoughtWorks Tech Radar blip #microfrontends IKEA M2 Norway: https://m2.ikea.com/no/no/ or https://ikea.no I’m happy to answer questions on Twitter: @gustaf_nk