Open
Description
Going one step further from #190, this issue focuses on pushing the UI closer to its responsible domains to break up the current monolithic WebInterface and increase cohesion. Besides composing the UI via Custom Elements and loading non-critical fragments via client-side includes, #163 enabled transcluding pages server-side, removing the additional layer of exposing APIs and delaying page composition. With this change, each domain will also manage its own HTTP caches controls, enabling caching at the edge.
- Move the layouts to a shared space, and expose reusable elements (e.g., header, footer, HTML head data) via a Layout module for use in services that do not reside in the main app. WebInterface can host said reusable elements for now, and can later just be renamed to Layout when everything else moved. At least the header of the condensed layout should be loaded as a fragment, because then every page would be cacheable at the edge. The rest can be moved when actually needed (there's no domain/context/service outside of the main app yet).
Move layouts to shared space #271 - Push pages to their respective domains (e.g., game view, profile view, signup).
- Load server-side fragments from their responsible domains, and publish browser notifications from their respective domains.
Move statistics UI to ConnectFour #265
Move open games UI to ConnectFour #267
Split queue for browser notifications #270 - Migrate security and other common functionality to a shared place.
- Narrow the response content on the server to avoid calculating the
.navbar
or other elements all the time. The client sends the possible elements for replacement, e.g.[data-page];[data-page-condensed];#form-resign
, and the server can handle them appropriately to decide returning the matched element or to widen the scope, e.g. to#form-resign
if the element exists in the template, up to[data-page]
orbody
in case the element don't exists. - Update
README.md
to reflect the settled frontend architecture. - Finishing up, ensure each domain sets appropriate cache control headers for its pages and fragments.