Home

Awesome

<h1><img width="500" height="200" alt="Tailor" src="https://rawgithub.com/zalando/tailor/master/logo/tailor-logo.svg"></h1>

NPM Build Status Test Coverage OpenTracing Badge

npm status

downloads version

Tailor is a layout service that uses streams to compose a web page from fragment services. O'Reilly describes it in the title of this blog post as "a library that provides a middleware which you can integrate into any Node.js server." It's partially inspired by Facebook’s BigPipe, but developed in an ecommerce context.

Some of Tailor's features and benefits:

Tailor is part of Project Mosaic, which aims to help developers create microservices for the frontend. The Mosaic also includes an extendable HTTP router for service composition (Skipper) with related RESTful API that stores routes (Innkeeper); more components are in the pipeline for public release. If your front-end team is making the monolith-to-microservices transition, you might find Tailor and its available siblings beneficial.

Why a Layout Service?

Microservices get a lot of traction these days. They allow multiple teams to work independently from each other, choose their own technology stacks and establish their own release cycles. Unfortunately, frontend development hasn’t fully capitalized yet on the benefits that microservices offer. The common practice for building websites remains “the monolith”: a single frontend codebase that consumes multiple APIs.

What if we could have microservices on the frontend? This would allow frontend developers to work together with their backend counterparts on the same feature and independently deploy parts of the website — “fragments” such as Header, Product, and Footer. Bringing microservices to the frontend requires a layout service that composes a website out of fragments. Tailor was developed to solve this need.

Installation

Begin using Tailor with:

yarn add node-tailor
const http = require('http');
const Tailor = require('node-tailor');
const tailor = new Tailor({/* Options */});
const server = http.createServer(tailor.requestHandler);
server.listen(process.env.PORT || 8080);

Options

Template

Tailor uses parse5 to parse the template, where it replaces each fragmentTag with a stream from the fragment server and handledTags with the result of handleTag function.

<html>
<head>
    <script type="fragment" src="http://assets.domain.com"></script>
</head>
<body>
    <fragment src="http://header.domain.com"></fragment>
    <fragment src="http://content.domain.com" primary></fragment>
    <fragment src="http://footer.domain.com" async></fragment>
</body>
</html>

Fragment attributes

Other attributes are allowed and will be passed as well to relevant functions (eg. filterRequestHeaders, filterResponseHeaders, etc.)

Fragment server

A fragment is an http(s) server that renders only the part of the page and sets Link header to provide urls to CSS and JavaScript resources. Check examples/basic-css-and-js/index.js for a draft implementation.

A JavaScript of the fragment is an AMD module, that exports an init function, that will be called with DOM element of the fragment as an argument.

Tailor will not follow redirects even if fragment response contains 'Location' Header, that is on purpose as redirects can introduce unwanted latency. Fragments with the attribute primary can do a redirect since it controls the status code of the page.

Note: For compatability with AWS the Link header can also be passed as x-amz-meta-link

Passing information to fragments

By default, the incoming request will be used to selecting the template.

So to get the index.html template you go to /index.

If you want to listen to /product/my-product-123 to go to product.html template, you can change the req.url to /product.

Every header is filtered by default to avoid leaking information, but you can give the original URI and host by adding it to the headers, x-request-host and x-request-uri, then reading in the fragment the headers to know what product to fetch and display.

http
    .createServer((req, res) => {
        req.headers['x-request-uri'] = req.url
        req.url = '/index'

        tailor.requestHandler(req, res);
    })
    .listen(8080, function() {
        console.log('Tailor server listening on port 8080');
    });

Concepts

Some of the concepts in Tailor are described in detail on the specific docs.

OpenTracing

Tailor has out of the box distributed tracing instrumentation with OpenTracing. It will pick up any span context on the ingress HTTP request and propagate it to the existing Remote Procedure Calls (RPCs).

Currently, only the fetching of fragments is instrumented providing some additional details like the fragment tag, attributes and some logging payload like the stack trace for errors.

Examples

# Get a copy of the repository
git clone https://github.com/zalando/tailor.git

# Change to the folder
cd tailor

# Install dependencies
yarn

Go to http://localhost:8080/index after running the specific example.

Note: Please run the examples with node versions > 6.0.0


Single-page application examples are also available:

Benchmark

To start running benchmark execute npm run benchmark and wait for couple of seconds to see the results.

Contributing

Please check the Contributing guidelines here.