Sunday, 20 January 2019

Micro Frontends - Websites / Custom Elements / Clientside Transclusion

Micro Frontends

Example Code using Custom Elements / CustomEvent
Example using Skeleton Screen to eliminate page reflow. Also see

Micro­service 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

Self-Contained Systems


No comments:

Post a comment