Server-side React render service. Β Β 
What is Tessellate?
Tessellate is a server-side React service that creates static HTML and a JavaScript bundle from abstract JSON definitions. It is meant to be used as a Fragment as part of the Mosaic stack for micro services in the frontend but can be used independently as well.
| Package | Description | Version |
|---|---|---|
| tessellate-bundler | Builds universal React bundles from JSON. |  |
| tessellate-fragment | Dynamic server-side React render service. |  |
| tessellate-server | Common service foundation for editor and bundler. |  |
| tessellate-editor | Experimental editor for composing reusable components. |  |
| tessellate-viewer | Experimental layout service for composing Mosaic fragments. |  |
| tessellate-transform | Experimental JSON transformation tool. |  |
Articles and videos about Tessellate
- code.talks 2017: The Recipe For Scalable Frontends
- Codemotion Milan 2017: The Recipe For Scalable Frontends
Tessellate v2
The next version of tessellate is under development in the next branch of this repository.
Dynamic fragments
A Mosaic Fragment is a web service that provides some partial HTML, CSS and JavaScript. Multiple Fragments can be composed into a complete web page by the Tailor layout service. Tessellate is an opinionated implementation of such a Fragment.
tessellate-fragment responds to incoming requests based on a customizable* logic and uses React to render precompiled JavaScript bundles into static HTML. tessellate-bundler compiles those bundles ahead of time based on an abstract JSON document and with the help of webpack. We call this a dynamic Fragment because the bundles can be updated independetly from the Fragment and because they are selected dynamically for each request.
Tessellate offers a simple yet powerful solution to integrate content providers into a Mosaic stack for micro services in the frontend. Instead of implementing specialized Fragments to render different parts of a website, you can simply transform all your content into precompiled JavaScript bundles that Tessellate knows how to render. Please read the architecture overview to learn more.
* subject to ongoing development
Installation
The Tessellate micro services can easily be installed as Node modules:
npm i --save tessellate-bundler tessellate-fragment
Configuration
Each micro service reads configuration from environment variables, command line arguments or a file. See each subproject for details.
Development
Tessellate requires Node.js >= 7.6 and uses Lerna for managing packages. Run the following commands in the root directory to get started:
npm install # Install dependencies and initialize packages.
npm run dist # Compile all packages.
We recommend using Atom text editor together with the Nuclide plugin and Flow for static type checking.
Here's how to install Nuclide (requires Atom) and Flow:
apm install nuclide
npm install -g flow-bin
Contributing
For details on pull requests, commit messages and conditions for contributing please see CONTRIBUTING.md
Documentation
Go to zalando-incubator.github.io/tessellate for detailed documentation.