cdon-dev/fragments

UI Fragmens Catalog

UI Fragments Catalog

Fragments

Fragments are composable UI blocks in composition through Server Side Inclusion (SSI) using Edge Side Includes (ESI) or Client Side Inclusion (CSI) using h-include.

The fragments project is a "catalog" of fragments, think "swagger for UI": what fragments are shared by this application, and how to include them.

A fragment consists of three parts: the markup, styles and behavior (js). We use the following convention:

• fragment.css.html
• fragment.js.html
• fragment.html

To include using ESI, on inclusion per instance:

  <esi:include src="fragment.html"></esi:include>

The other two parts is included per "type" and could be placed in the document as you see fit:

  <esi:include src="fragment.css.html"></esi:include>

  <esi:include src="fragment.js.html"></esi:include>

Using ".html" lets the producer control versioning and cache busting.

The fragments project expects fragments to use the following url: "/fragments/fragment.html. All fragments in this path will be "scanned" and presented in the "fragment UI catalog".

A tale of two folds

ESI limits you to 64 inclusions. But when optimizing your page, you might want to mix'n'match strategies. For example using SSI above the fold and CSI below the fold. h-include lets you compose lazily and optimize below the fold.

All fragments that follow the path conventions are listed in the "fragment UI catalog" – how you compose is an implementation detail.

Baseline(s)

There might be use for a thin layer of common dependencies like css reset, fonts etc. The "fragments UI catalog" supports both a styling baseline and, if needed, a behavior baseline (js).

fragments's Issues

Sample baseline

Add baseline to demo

Fragment information

Add information for each fragment. Naming conventions, size, cache times etc.

Enable baseline toggle

In each fragment frame/sandbox, enable toggle of baseline to visualize baseline dependencies.

Add Catalog header

Introduce a header for the listing page.

Fragments url configuration

Enable configuration of fragment "scanning"