Skip to content

lgraf/frontend-integration-devtalk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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).



client


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).



ARCH


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

Tech