Micro Frontends
https://micro-frontends.org/Example Code using Custom Elements / CustomEvent
- Use innerHMTL property to attach sub DOM
- Shows usage of observedAttributes
- PubSub via CustomEvent, EventTarget
- Shows that every method of a Custom Element can be called on that element
Microservice Websites
https://gustafnk.github.io/microservice-websites/Clientside transclusion for dynamic content (non-SEO-relevant) using h-include / include-fragment / hinclude.
Some salient point from Manifesto:
Heterogenous system (Evolvability)
- Allowing for diversity of technology (including different versions of software) is critical for evolvability
- The architecture itself should not be a limit for diversity of technology. Instead, the limit should other organisational factors, like being able to quite easily move between teams, etc
No shared libraries or frameworks in the client
- …because of coupling between teams, Heterogenous system, and Mobile performance
- Use a common base of JS polyfills and CSS resets. This should be regarded as infrastructure. Possibly have a small set of typography CSS rules as well.
Teams are responsible for their assembled pages
- Use a performance budget
- If a fragment is not good (operational, performance, etc), either it can no longer be used or it must immediately be fixed
- It’s ok for a page to depend on a JS library, as long as the page is within budget and is following agreed policies around accessibility, etc
- It’s not ok for a fragment to depend on a JS library
