转自:https://zalando-incubator.github.io/tessellate/

Tessellate consists of two major components: the bundler and the fragment. Together they make it possible to dynamically render HTML based on an abstract JSON definition. This section gives an overview of the two components and how they integrate with the Mosaic project.

tessellate-bundler

The job of the bundler is to prepare JavaScript bundles that the fragment can render to static HTML. Bundles are UMD (universal module definition) modules which export the root component of a React component tree.

The compiled bundles are exported to a configurable location, e.g. a CDN server. A bundle may consist of multiple JavaScript files and additional assets, like CSS and images.

tessellate-fragment

The fragment is responsible for rendering the prepared JavaScript bundles into static HTML using React's server side rendering capabilities. Upon receiving a request, the fragment determines which bundle it needs to fetch and render. Then it responds with static HTML and links to the JavaScript and CSS files of the bundle inside a response header, as defined by the Fragment API.

In addition to the JavaScript bundle a fragment may fetch more data from other sources that can be injected into the rendering process, e.g. properties for the React components or data that React components load themselves upon rendering based on their internal logic.

Mosaic integration

Mosaic is an architecture to enable microservices in the frontend. That is, modular websites composed of smaller, independent parts – Fragments. Tessellate provides a generic solution for dynamic Fragmentswhich can render any content based on an abstract JSON definition. A typical setup includes the following components:

  • Tessellate bundler – compiles JavaScript bundles from JSON.
  • Tessellate fragment – renders bundles into static HTML.
  • Tailor layout service – composes multiple fragments Together.
  • Skipper router – routes requests to different layouts.

Please take a look at the Mosaic documentation for more details.

Mosaic does not dictate which frontend technologies to use, however Tessellate requires that the rendered HTML is based on React components. For this reason tessellate-bundler must be able to require the necessary npm modules for the components that are declared inside the abstract JSON definition. The compiled bundles are placed in a public location (e.g. a CDN server) where they can be retrieved from by both the fragment and the browser (for dynamic components). The fragment may also access other additional web services based on the context of each request. For example, the property data to hydrate the React components may be loaded from another service.

Because of its modularity, Mosaic allows composing many different Fragments, not only Tessellate. Although a single Tessellate Fragment could in theory render a complete page, it is more common compose pages of more than one Fragment inside a Tailor layout. See the Tailor documentation for more details.

tessellate Architecture的更多相关文章

  1. Game Engine Architecture 9

    [Game Engine Architecture 9] 1.Formatted Output with OutputDebugString() int VDebugPrintF(const char ...

  2. Undefined symbols for architecture arm64解决方案

    在iOS开发中经常遇到的一个错误是Undefined symbols for architecture arm64,这个错误表示工程某些地方不支持arm64指令集.那我们应该怎么解决这个问题了?我们不 ...

  3. Optimal Flexible Architecture(最优灵活架构)

    来自:Oracle® Database Installation Guide 12_c_ Release 1 (12.1) for Linux Oracle base目录命名规范: /pm/s/u 例 ...

  4. EF框架组件详述【Entity Framework Architecture】(EF基础系列篇3)

    我们来看看EF的框架设计吧: The following figure shows the overall architecture of the Entity Framework. Let us n ...

  5. [Architecture] 系统架构正交分解法

    [Architecture] 系统架构正交分解法 前言 随着企业成长,支持企业业务的软件,也会越来越庞大与复杂.当系统复杂到一定程度,开发人员会发现很多系统架构的设计细节,很难有条理.有组织的用一张大 ...

  6. Stack Overflow: The Architecture - 2016 Edition

    To get an idea of what all of this stuff “does,” let me start off with an update on the average day ...

  7. ios build时,Undefined symbols for architecture xxx问题的总结

    简单来说,Undefined symbols基本上等于JAVA的ClassNotFoundException,最常见的原因有这几种: build的时候没有加framework 比如说,有一段代码我用了 ...

  8. Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_The49DayPersonalFullscreenGiftModel", referenced from: objc-class-ref in The49DayPersonalRoomGiftModel.o ld: symbol(s) not found for a

    Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_The49DayPersonalFullscreenGiftModel&q ...

  9. ios开发错误之: Undefined symbols for architecture x86_64

    错误如下: Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_RoutingHTTPServer", refere ...

随机推荐

  1. npm webpack vue-cli

    npm.webpack.vue-cli 快速上手版   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chro ...

  2. swiftlint swift代码规范检查神器

    一大堆的你为什么要用swiftlint,你为什么要codereview,swiftlint到底在做什么,就不多说了,没意义,他就是帮助你写出规范漂亮代码的神器! 安装 官方提供了三种安装的方式 hom ...

  3. linux文件查看

    查看目录 #查看文件 使用  ls  命令,加上参数 -l 表示查看详细信息,-a 表示查看包含隐藏文件在内的文件.也可使用通配符,*代表任意个字符,? 表示单个字符. $ ls ch*.doc #表 ...

  4. Cracking The Coding Interview 1.6

    //原文: // // Given an image represented by an NxN matrix, where each pixel in the image is 4 bytes, w ...

  5. 四川省赛 SCU - 4438

    Censor frog is now a editor to censor so-called sensitive words (敏感词). She has a long text pp. Her j ...

  6. [rancher-net]

    ip rule命令 rancher网络全解读 arp命令查询 rancher managed network 实践 docker自定义网桥 iptables增删改查 shell脚本调试技术

  7. mysql主从复制-读写分离

    mysql主从复制+读写分离 环境:mysql主:193.168.1.1mysql从:193.168.1.2amoeba代理:193.168.1.3########################## ...

  8. python day07作业

  9. [转] 理解 LSTM 网络

    [译] 理解 LSTM 网络 http://www.jianshu.com/p/9dc9f41f0b29 Recurrent Neural Networks 人类并不是每时每刻都从一片空白的大脑开始他 ...

  10. 20165228 2017-2018-2 《Java程序设计》第4周学习总结

    20165228 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 子类与继承 子类的定义:使用关键词extends class 子类名 extends 父类名 ...