lgraf / frontend-integration-devtalk

compose web pages from distributed fragments

Demo application

The application use webcomponents (Custom Elements + HTML Imports) to compose pages out of main (domain) content and different distributed fragments (header, footer) on the client (browser).
The different domain pages are connected through simple hyperlinks.

NOTE: The application is functional in all major browser (pollyfills). Nevertheless there is a short flickering of the transcluded fragments (header, footer) after a GET request in browsers other then chrome (native webcomponents implementation).
If it is not possible to work around this flickering, it should be discussed if webcomponents are the right approach for transclusion (at least for the common fragments that are visible across domain pages in the same place).

---

Structure

• ui-proxy acts as reverse proxy and route requests depending on the context path to the correct service (using container linking).
• layout-service delivers common fragments (header, footer), global styles and custom webcomponents.
• home-ui delivers the 'home' domain page (static HTML).
• mail-ui delivers the 'mail' domain page (ember.js).
• presentation contains the dev-talk presentation (Slides).

---

Run the demo application

Requirements:
Local docker(-compose) installation

docker-compose up

The application is then accessible under http://localhost.

Run the presentation

Requirements:
Local npm installation

cd presentation/
npm install
npm start

The presentation is then accessible under http://localhost:8000.
NOTE: You can view the presentation notes by hitting s in the browser.

Resources

Microservice/SCS UI composition

• Self contained systems
• Blog: Micro-Services and Page Composition Problem
• Blog: Components Are (Still) Hard on the Web
• Blog: Micro Service Composition
• Blog: ROCA vs. SPA
• Blog: Transclusion
• Talk: Wait, what? Our microservices have actual human users? (Stefan Tilkov)
• Talk: An Unexpected Solution To Microservices UI Composition (autoscout/thoughtworks)

Tech

• Webcomponents
• Webcomponents Polyfills
• Compoxure
• Mosaic
• Ember Engines