Voxxed Days Singapore - 30th - 31st May 2019
Overview of microfrontend architecture:
Microfrontends learnings from Standard Chartered:
 - https://micro-frontends.org/#what-are-micro-frontends
Also known as:
Extends the concept of microservices to the frontend.
 - https://micro-frontends.org/ressources/diagrams/organisational/monolith-frontback-microservices.png
 - https://micro-frontends.org/ressources/diagrams/organisational/verticals-headline.png
 - https://micro-frontends.org/ressources/screen/three-teams.png
Microfrontend as an architectural and
team organisation approach,
not technology stacks
Restructuring teams around business domains and capabilities:
Knowledge on specific domain can be transferable across regions and markets.
Team composition remains fluid, but enable better continuity from project to project.
Integration on 'last-mile':
Customer requirements indicate that we were going to build a content-heavy web application, with only limited interactivity.
 - https://cdn-images-1.medium.com/max/1600/1*NJMQCgyMShhjYx6dE_pbRw.png
 - https://medium.com/@areai51/microfrontends-an-approach-to-building-scalable-web-apps-e8678e2acdd6
 - https://2018.ar.al/notes/the-documents-to-applications-continuum/
Complexity lies in data sourcing and aggregation:
Offline first and PWAs:
CPU utilisation vs network latency:
 - https://skatejs.netlify.com/
 - https://github.com/zalando/tailor
 - https://markojs.com/
Server Side Rendering:
Edge Side Includes:
 - https://en.wikipedia.org/wiki/Edge_Side_Includes
 - https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Replaced good-guy-http with Axios for consistency with the rest of the apps, contextual logging, tuneable retry strategy, and Bearer token header embeds.
Subset of ESI standard with a-based interface.
 - https://github.com/Schibsted-Tech-Polska/nodesi
<esi:include src="http://example.com/1.html" alt="http://bak.example.com/2.html" onerror="continue"/>
Optimise for Time to First Render:
 - https://github.com/spdy-http2/node-spdy
 - https://github.com/patrick-steele-idem/morphdom
Optimise for clarity:
Optimise for fast response and small payload:
 - https://github.com/fizzed/rocker
 - https://docs.spring.io/spring/docs/current/spring-framework-reference/web-reactive.html#spring-webflux
 - https://micronaut.io/
 - https://typelevel.org/cats-effect/datatypes/io.html
Monorepo for each vertical:
Services are broken down into small modules which are shared by runtime artifacts (i.e. apps).
End to end development within a (domain) boundary.
Various environment-specific configurations:
Service mocks and API-compatible alternatives:
Development setup and standalone mode via Docker compose:
Promote shared resource as a library:
Three types of resources available:
JSON for external service consumption.
HTML fragments are the resource used for embedding in the web application.
HTML page format is used during development to provide an indication how the component will look and behave.
Implicit assumptions from modern web and mobile apps:
Good (+ resilient) on poor connection:
Will it scale?