写点什么

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

  • 2014-12-16
  • 本文字数:1428 字

    阅读完需:约 5 分钟

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

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

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

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

组件以两种形式存在:模块(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 为模块提供了一套构建服务,通常在运行时进行触发。如果某个网页中包含了以下格式的标签:

复制代码
<link rel="stylesheet" href="//build.origami.ft.com/bundles/css?modules=o-ft-icons@^2.3.1" />

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

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

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

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

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

复制代码
<script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script>

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

2014-12-16 09:361897
用户头像

发布了 428 篇内容, 共 177.4 次阅读, 收获喜欢 38 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营 大作业(一)

netspecial

极客大学架构师训练营

炎币交易所APP系统开发|炎币交易所软件开发

系统开发

用领域驱动设计驱动系统的重构

积极&丧

区块链的核心技术是什么?

CECBC

区块链

Week10作业

lggl

作业

是的,我又换工作了

Rayjun

工作

架构相关5

FreeOcean

避坑指南,Elasticsearch 分页查询的两个问题,你一定要知道

AlwaysBeta

elasticsearch python 爬虫

软件组件设计原则

积极&丧

架构师训练营第五周作业

zamkai

从场景出发,日志聚类还可以这么玩

信仰圣光吧丶

AIOPS 日志聚类 日志治理

Java并发底层知识,锁获取超时机制知多少?

码农架构

Java java 并发

最近一些让我颇有感触的话

Bruce Talk

随笔

架构师训练营 大作业(二)

netspecial

极客大学架构师训练营

ARROW阿罗AOW币APP系统软件开发

系统开发

框架VS架构,看两者异同

田维常

框架

13张图彻底搞懂分布式系统服务注册与发现原理

爱笑的架构师

微服务 服务注册与发现 七日更

AOP的姿势之 简化 MemoryCache 使用方式

八苦-瞿昙

aop

微服务过载保护原理与实战

万俊峰Kevin

微服务 go-zero Go 语言

安全架构:加密与解密

积极&丧

区块链 链什么?

CECBC

区块链 分布式

pagerank算法

橘子皮嚼着不脆

XRP瑞波币软件系统开发|XRP瑞波币APP开发

系统开发

重磅!四部门联合约谈蚂蚁集团!刚刚,约谈的主要内容曝光……

CECBC

金融

安全架构:反垃圾与风控

积极&丧

我家有猫

熊斌

生活方式 七日更 我家有猫

架构师训练营第十周作业

李日盛

关于微服务架构

落朽

Week10总结

lggl

总结 作业

架构师训练营第十周笔记

李日盛

学习 微服务 DDD

数据仓库的前世今生

数据社

数据仓库 七日更

Origami:基于组件的Web应用程序_JavaScript_João Miranda_InfoQ精选文章