Composing Micro Frontends Server-Side

This article was originally published at esentri.com.

Scaling development

Microservices are well-known now for some years and are widely adopted. But the frontend oftentimes is still monolithic. This application structure often reflects on the team structure: there are several independent backend teams and one single frontend team. This also prevents backend development teams from delivering complete usable features - they always lack the frontend. To implement the frontend all changes must be done by the one frontend team. This makes it hard to scale development. By implementing micro frontends we can form full-stack teams that can ship complete features on their own. This is one of the reasons why ThoughtWorks placed micro frontends in the “Adopt” section of their famous Technology Radar for the third time in a row!

Composing Micro Frontends

For our use case, a micro frontend consists of markup (HTML), styles (CSS), scripts (JavaScript), and images. We want to compose the different micro frontends, or “fragments” as they are usually called, in our page. Some fragments are interactive. Some might have dependencies on some fragments. And some might want to interact with other fragments.

There are two ways to integrate the fragments from your micro frontends: client-side and server-side. Both have their pros and cons. We are comparing different ways of server-side composing because we focus on search engine optimization. Google supports lots of JavaScript nowadays but takes longer to index which is bad for a frequently changing site and some other crawlers don’t support JavaScript at all.

Also, the support for slow mobile clients, like smartphones, is better with server-side composition. Mobile clients usually have a slower internet connection so they benefit from the smaller payload to download. They also have less computing power so they profit from the pre-rendered HTML.

Server Side Includes (SSI)

SSI is a simple server-side scripting language that allows conditional statements and the inclusion of other fragments from files and URLs.

To include another fragment in your page add the and SSI tag like <!--#include virtual="/url/to/include" -->. The web server fetches the fragment and replaces the SSI tag with the fragment’s content. The combined output is returned to the client.

For a more in-depth explanation about composition with SSI take a look at this presentation by my colleague Artun Subasi from the duesentrieb Camp last year.

Pros

  • Proven and well-tested
  • Well supported in Nginx, Apache, and other web servers
  • Support for timeouts and fallback content

Cons

  • Fragments are fetched in parallel but delivered only after the last fragment is fetched (Nginx)
  • No built-in support for asset handling. Apache PageSpeed (formerly known as modpagespeed by Google) can do some CSS processing and combine the CSS from the fragments, but did not receive any updates since early 2018 and seems to be dead

Edge Side Includes (ESI)

ESI is a simple markup language that allows the inclusion of fragments from other URLs.

ESI works very similar to SSI. ESI is more focussed on the reverse proxy or CDN layer, while SSI targets the web server itself. Of course, these boundaries are somewhat blurry because Nginx is often used as a reverse proxy as well. ESI has no conditional logic itself. But Varnish, for example, allows conditional logic in its own DSL called “VCL”.

Pros

  • Proven and well-tested
  • Well supported in Varnish (parallel fetching requires the commercial edition). Squid (project web site is outdated, but there are new releases) and Mongrel (no new releases since 2010) do support it as well

Cons

  • No built-in support for a timeout. Proprietary extensions do exist.
  • Mutual exclusive with use of CDN-based ESI for caching
  • No built-in support for asset handling

Zalando Tailor

Tailor is a Node.js based fragment service open-sourced by Zalando and runs as stand-alone service. It is part of Project Mosaic - Zalando’s umbrella project their frontend modularization.

Zalando Tailor uses custom markup to compose the page. They define <fragment src="http://www.example.com">-tags to specify the fragments to load. Assets, like styles and scripts, can be populated by the fragment itself via Link header.

Pros

  • Built-in support for asset handling
  • Fragments as first-party-concept
  • Asynchronously fetches multiple fragments and streams immediately

Cons

  • Proprietary solution, needs custom Link-Headers with styles and AMD JS bundling

Podium

Podium is also implemented in JavaScript and runs on Node.js. It is developed by the norwegian company Finn.no for their classified ads site. Podium is a library to integrate fragments (they call them “podlets”) into the page (they call the page “layout”).

To run podium you need at least two instances: a layout server and at least one podlet server. The podlet server exposes the fragment, the layout server integrates it into the page. Every fragment needs to expose a “Podlet Manifest” which contains JSON data assets and may contain a fallback URL. The layout server initially fetches the fallback content and caches it in case the podlet server becomes unavailable.

Pros

  • Built-in support for asset handling (fragments need to expose metadata-endpoint)
  • Fragments as first-party-concept
  • Built-in proxy-support to hide fragment servers
  • Fragement servers can define fallback content

Cons

  • Proprietary solution, tight coupling with library

Final Thoughts and Recommendations

ESI and SSI are well-tested, stable technologies, and are easy to learn. Custom additions like Varnish’s VCL add complexity but introduce lots of new possibilities. In general, these solutions offer no good solution for asset handling and struggle with the requirements of modern web applications.

More modern solutions like Tailor and Zalando solve many problems the old-fashioned tools have. But the introduce their fair share of complexity and have their own learning curve. Both tools are more or less a one-man-show (if you look at the contribution logs). So you should be prepared to step in and continue development or fork if Zalando or Finn.no drop their solutions if you make any of these products a cornerstone of your application.

For a broader overview of composition techniques (includes client-side composition) I can recommend this article about Micro Frontends by bluesoft. If you are interested in micro frontends you should take a look at Micro Frontends in Action by Michael Geers.

Do you have a better of idea how to compose micro frontends server-side? Contact me via Twitter and let me know!