tessellate Architecture
转自: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的更多相关文章
- Game Engine Architecture 9
[Game Engine Architecture 9] 1.Formatted Output with OutputDebugString() int VDebugPrintF(const char ...
- Undefined symbols for architecture arm64解决方案
在iOS开发中经常遇到的一个错误是Undefined symbols for architecture arm64,这个错误表示工程某些地方不支持arm64指令集.那我们应该怎么解决这个问题了?我们不 ...
- Optimal Flexible Architecture(最优灵活架构)
来自:Oracle® Database Installation Guide 12_c_ Release 1 (12.1) for Linux Oracle base目录命名规范: /pm/s/u 例 ...
- EF框架组件详述【Entity Framework Architecture】(EF基础系列篇3)
我们来看看EF的框架设计吧: The following figure shows the overall architecture of the Entity Framework. Let us n ...
- [Architecture] 系统架构正交分解法
[Architecture] 系统架构正交分解法 前言 随着企业成长,支持企业业务的软件,也会越来越庞大与复杂.当系统复杂到一定程度,开发人员会发现很多系统架构的设计细节,很难有条理.有组织的用一张大 ...
- 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 ...
- ios build时,Undefined symbols for architecture xxx问题的总结
简单来说,Undefined symbols基本上等于JAVA的ClassNotFoundException,最常见的原因有这几种: build的时候没有加framework 比如说,有一段代码我用了 ...
- 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 ...
- ios开发错误之: Undefined symbols for architecture x86_64
错误如下: Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_RoutingHTTPServer", refere ...
随机推荐
- Mac生成rsa证书
详细参考大神 https://blog.csdn.net/qq_30513483/article/details/51242338 RSA为一种加密算法,生成的文件格式有两种,一种是PEM格式,另一种 ...
- Ubuntu 14.04 安装 Xilinx ISE 14.7 全过程(转)
reference:https://www.cnblogs.com/tracyone/p/3561781.html 按照ISE后,建立ISE启动连接: 这个帖子作为我安装xilinx ISE 14.7 ...
- Android开发 ---Fragment片段布局
前言 Fragment想必大家不陌生吧,在日常开发中,对于Fragment的使用也很频繁,现在主流的APP中,基本的架构也都是一个主页,然后每个Tab项用Fragment做布局,不同选项做切换,使用起 ...
- freemarker学习 (servlet + freemarker -> Struts2+freemarker -> springMVC+freemarker)
什么是freemarker? freemarker类似于jsp,但不是jsp!怎么说呢?freemarker文件后缀是.ftl,它不像jsp本质是servlet,它将构建模板.解析模板.使用模板分离开 ...
- OpenStack平台虚拟机实例在线迁移失败问题
一.在线迁移时提示如下的报错 二.原因分析 通过kolla-ansible部署queens版本时,因为OEM的机器设备的UUID记录的一致,导致迁移时识别的是自身机器的UUID,导致迁移失败 三.问题 ...
- iframe 常见问题 解析
1. jquery在iframe子页面获取父页面元素代码如下: $("#objid",parent.document) 2. jquery在父页面获取iframe子页面的元素代码如 ...
- L312 难看懂的
There are few sadder sights than 8 pile of fan letters ,lovingly decorated with hand drawings,suffer ...
- 移动端设置, mobile , 一张图片作为背景 ,平铺 ,自动拉伸 , 图片 铺满视界 ,窗口. background-image , background-size, background-repeat
1. 效果: 浏览器: 手机模拟: 2.代码: <!DOCTYPE html> <html lang="en"> <head> <met ...
- 创建vue项目
1.创建项目 vue creat 项目名 // 要提前进入目标目录(项目应该创建在哪个目录下) // 选择自定义方式创建项目,选取Router, Vuex插件 2.启动/停止项目 npm run se ...
- Python eval,exac,compile
# eval 是把字符串类型的数据作为代码进行执行 s = "18+2" ret = eval(s) # 执行字符串类型的代码 print(ret) code = input(&q ...