Origami：基于组件的Web应用程序

在Velocity Europe 2014大会上，FT Labs的总监Andrew Betts为与会者展示了由他们自行开发的一套用于web开发的标准与工具，目标是以它来应对创建与维护总数超过800个的*.ft.com网站的开发中的挑战。FT Labs的主要策略是将web页面分解为多个组件，由合理定义的规则来构造这些组件。

\\

FT Labs是隶属于金融时报（Financial Times）的一个团队，专注于web技术。由于金融时报的电子资产的快速发展，公司面临着一系列的挑战，这些挑战都与规模的扩大有关。在他们管理的大量网站中缺乏通用与结构化的规则和工具，意味着大量的工作被不断重复。不断扩大与趋于复杂化的web生态系统对公司的发展生产了极大的阻力：难以维护及更新web应用程序；遗留的代码无法消除；费解的应用程序集成过程；所需要的端到端的工程技术又难以找到。

\\

因此FT Labs计划寻求一种能够解决这些问题的解决方案，并决定了这套基于组件的方案。这套方案是由一系列准则推动的，以下仅举几例：

\\

• 必须完全遵守标准\\t
• 不允许对某个单一的产品（例如网站）创建特定的组件\\t
• 组件应当易于使用，并且具有灵活性\\t
• 组件使用者对于所使用的组件有权决定在何时进行升级\\t
• 组件应当被封装，或者使用命名空间，以确保不会与其它组件产生冲突\\t
• 对外部系统的依赖应降至最低，因此保证了整个解决方案的高可靠性与快速发布能力\

组件以两种形式存在：模块（module）与web service。

\\

\\

基于Origami组件创建的应用程序（图片来自于Origami网站）

\\

模块是指静态资源（例如CSS文件）或CommonJS模块，因此它的主要目的在于为多个网站提供相同的UI体验。每个模块必须遵守规格说明，包括命名规则、打包及构建配置、测试及演示规则，以及一些其它需求。举例来说，o-grid是一套适应响应式布局的网格系统，o-date专用于日期的格式化与修改，o-ft-typography则是专门用于FT的排版样式。这些模块的文档说明了遵循规格开发可实现的效果。

\\

如同名称所示，web service通过URL终结点提供内容与数据。Web service同样必须遵循一套规格说明，其中定义了一些需求，例如过期规则、必须提供的终结点（用于运行情况诊断、度量以及文档化），版本化规则以及多web service环境的规则。Origami web service的例子包括responsive-image-proxy，它是一个用于改变图片大小与进行图片优化的代理服务。

\\

Origami为模块提供了一套构建服务，通常在运行时进行触发。如果某个网页中包含了以下格式的\u0026lt;link\u0026gt;标签：

\\

\\u0026lt;link rel=\"stylesheet\" href=\"//build.origami.ft.com/bundles/css?modules=o-ft-icons@^2.3.1\" /\u0026gt;

\\

那么构建过程中会进行以下处理：

\\

• 安装o-ft-icons模块的2.3.1版本（或升级至下一个主要版本）\\t
• 如果存在任何依赖项，则自动进行安装\\t
• 运行构建过程\\t
• 对CSS输出内容进行压缩（Minify）\\t
• 进行GZip压缩并进行缓存\\t
• 由某个CDN进行托管\

与之类似的是，script标签会触发JavaScript的构建过程，其内容基本相同。

\\

FT Labs为组件提供了一份注册信息，可以为任何人使用。当然，如同我们所看到的那样，某些组件是专门为金融时报网站所使用的。

\\

在报告的最后，Andrew为与会者演示了FT Labs的Polyfills服务。Polyfills是一种JavaScript代码，它能够为web浏览器加入本身不支持的特性，以此减少各个浏览器提供商与各种版本所带来的差异。这个服务是可自定义的，但使用起来极其简单，只要在web页面中加入以下script标签即可。

\\

\\u0026lt;script src="https://cdn.polyfill.io/v1/polyfill.min.js"\u0026gt;\u0026lt;/script\u0026gt;

\\

查看英文原文：Origami: Component-Based Web Applications