QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

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

关注

评论

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

由循环开始的前端学习杂谈话事录-sam9029

Sam9029

前端 个人博客 成长笔记 9月月更

五分钟了解 Databend 全新 SQL 类型系统

Databend

开源项目 sql 开源社区 SQL分析

Java 并发编程解析 | 如何正确理解Java领域中的锁机制,我们一般需要掌握哪些理论知识?

Java快了!

Java并发 java;

利器 | TestNG 与 Junit 对比,测试框架如何选择?

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

代码分析体系及Sonarqube平台

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

云架构系统如何做性能分析?| 实战干货

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

不懂PO 设计模式?这篇实战文带你搞定 PO

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

隐私计算,让企业大数据走进数据网络时代

Jessica@数牍

Xshell 7 安装激活与换机转移许可证教程详解

淋雨

Linux xshell #运维

无代码开发平台怎么选?选择合适无代码平台的13个关键步骤

优秀

无代码平台

验证一个小小的问题

艾小仙

Java MySQL 编程 程序员 compact

mysql查询 limit 1000,10 和limit 10 速度一样快吗?如果我要分页,我该怎么办?

Java快了!

MySQL

一文搞懂测试左移和测试右移的 Why-How-What

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

一文带你了解接口测试价值与体系

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

数字藏品系统软件开发

开源直播系统源码

NFT 数字藏品 数字藏品系统软件开发 数字藏品app

「工作小记」关于业务组件的思考

叶一一

前端 React 组件开发 9月月更

从 Linux 内核角度探秘 JDK NIO 文件读写本质

bin的技术小屋

Linux jdk nio Linux Kenel 文件I/O

利器 | AppCrawler 自动遍历测试实践(三):动手实操与常见问题汇总

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

隐私计算中的算子是个啥?可视化组合配置的算子解决方案了解下

Jessica@数牍

隐私计算 算子 隐私计算性能

「工作小记」小程序开发的喜怒哀乐

叶一一

小程序 前端 9月月更

数据可视化系列教程之React组件使用技巧

云智慧AIOps社区

前端 React 数据可视化

利器 | Java 接口自动化测试首选方案:REST Assured 实践 (一)

霍格沃兹测试开发学社

阿里云丁宇:以领先的云原生技术,激活应用构建新范式

阿里巴巴中间件

阿里云 云原生 应用构建

代码质量管理平台实战| SonarQube 安装、配置及 JaCoCo、Maven 集成

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

一文彻底理解 Cookie、Session、Token

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

java基础学习:java中的反射

Java快了!

java;

【xShell 7】强悍的Linux远程链接工具、终端模拟器

淋雨

Linux 运维 xshell

利器 | REST Assured 实践(二):断言实现

霍格沃兹测试开发学社

软件测试 自动化测试 测试开发

你以为Shell只是命令行?读懂这篇文,给你的工作赋能

霍格沃兹测试开发学社

leetcode 114. Flatten Binary Tree to Linked List 二叉树展开为链表(简单)

okokabcd

LeetCode 算法与数据结构

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