写点什么

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:361891
用户头像

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

关注

评论

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

【LeetCode】分组的最大数量Java题解

Albert

LeetCode 8月月更

临床研究方法学,到现场,到数据真实发生的地方 | 对话数智 x 张维拓

ModelWhale

数据分析 人才培养 数据科学 8月月更 临床医学

《福格行为模型》:如何养成好习惯?

郭明

读书笔记

开源一夏 | 查询分页不只有limit,这四种分页方法值得掌握

知识浅谈

开源 8月月更

Jina 实例秀|基于神经搜索的网络安全威胁检测(一)

Jina AI

神经网络架构搜索 Python.

开源一夏|ArkUI如何自定义弹窗(eTS)

坚果

开源 HarmonyOS OpenHarmony 8月月更

关于技术学习的6个观点

郭明

技术人

再次搞定 Ali 云函数计算 FC

小鑫同学

签约计划第三季

【黄啊码】MySQL入门—1、SQL 的执行流程

黄啊码

MySQL 8月月更

Java 是否应该使用通配符导入( wildcard imports)

HoneyMoose

浅聊偏函数

掘金安东尼

JavaScript 函数式 8月月更

Rust 入门指南 (用 WASM 开发第一个 Web 页面)

王泰

rust Wasm WebAssenbly ​Rust

SAP 人工智能解决方案的演进史 - 从 SAP Leonardo 到 SAP Data Intelligence

汪子熙

人工智能 机器学习 AI SAP 8月月更

CentOS6搭建nginx+uwsgi+flask

haiger13

签约计划第三季

Jina 实例秀|七夕神器!比你更懂你女友的口红AI

Jina AI

七夕 神经网络架构搜索

华为开源:聚焦开源基础软件,共建健康繁荣生态

科技热闻

mysql进阶(二十六)MySQL 索引类型

No Silver Bullet

MySQL MySQL索引 8月月更

MySQL之my.cnf配置文件

TimeFriends

8月月更

什么是 DevOps?看这一篇就够了!

胡说云原生

管理 DevOps 运维 开发 签约计划第三季

8月总结高频vue面试题

helloworld1024fd

Vue

转转测试环境的标签域名实践

转转技术团队

nginx hosts

【黄啊码】MySQL入门—2、使用数据定义语言(DDL)操作数据库

黄啊码

MySQL 8月月更

C#/VB.NET:在 Word 中设置文本对齐方式

Geek_249eec

C# word VB.NET 文本对齐

Java使用IReport导出复杂报表

源字节1号

微信小程序 软件开发 前端开发 后端开发

萌宠来袭,如何让“吸猫撸狗”更有保障?

旺链科技

区块链 产业区块链 宠物行业

STM32+SIM800C采用MQTT协议登录OneNet上传温湿度、MQ2烟雾浓度、GPS数据

DS小龙哥

8月月更

仿钉钉审批流程后端 PHP 处理(一)

CRMEB

IDEA 自动导入的配置(Auto import)

HoneyMoose

React的理念与V16的架构变化

郭明

React

语音社交app源码——具备哪些开发优势?

开源直播系统源码

软件开发 语聊房 直播系统源码 语音聊天系统 语音聊天app

《迁移学习导论》第2版,升级内容抢先看!

博文视点Broadview

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