Web模板技术的总结与探索
By
hax （贺师俊）
最后更新时间
2013年8月31日
啥是模板（Template）？
文本内插（interpolation） + 编程语言混合（从而支持表达式和逻辑结构） + 特别的优化？
啥是模板（Template）？
字符串替换？
字符串替换 + 支持简单逻辑？
文本内插（interpolation） + 编程语言混合（从而支持表达式和逻辑结构） + 特别的优化？
匹配规则 + 查询语言和表达式 + 输出指令？
特定编程语言的库？
DSL？
……
一图胜千言
一图胜千言
The basic process: content (from a database), and "presentation specifications" (in a web template), are combined (through the template engine) to mass-produce web documents
定义
Presentation Specifications —— 呈现的规格
所谓 presentation spec，即确定如何将（后端的）数据转化为（前端的）信息
历史上……
拼字符串
反转 => HTML内嵌变量和脚本（例子：PHP）
历史上……
拼字符串
反转 => HTML内嵌变量和脚本
Helper（例子：CakePHP）
历史上……
拼字符串
反转 => HTML内嵌变量和脚本
Helper
自定义标签（JSP TagLib）
历史上……
拼字符串
反转 => HTML内嵌变量和脚本
Helper
自定义标签
组件化（ASP.NET WebForm 和 JSF）
历史上……
拼字符串
反转 => HTML内嵌变量和脚本
Helper
自定义标签
组件化
返璞“归真”
各种问题……
要改一些展现内容，花了很长时间才找到修改的地方
要改进一些结构和样式，不敢动手，因为视图的可测试性不足
重复或相似的代码相当多，由于缺乏称手的工具而难以重构
稍复杂的需求变化，工程师荡漾在一堆标签和php/jsp/js逻辑交织的代码里
由于一些小的非本质性的变动，要改变许多原有的代码
这些问题背后的原因？
表现层代码散布各处 —— 各个层面的代码都在输出html甚至style
Controller大包大揽 —— routing、页面布局、组装、应用逻辑……
视图单元同时承担两个职责 —— 页面单元和复用单元，导致视图单元变得太零碎
前端代码缺乏抽象层 —— 虽有抽象层尝试，但是不够好，很容易产生“抽象泄露”（传统编程的抽象方法不适应前端）
模板解决什么问题？
批量生成页面，或动态生成页面
分离前后端关注点
执行表现层逻辑，更精确的说，执行 presentation spec
模板引擎在不同维度上的分类
前端 or 后端 or 前后端通吃？
支持任意复杂逻辑和表达式 or 受限的逻辑和简单表达式（辅以特别机制如filter） or Logicless？
模板引擎在不同维度上的分类
前端 or 后端 or 前后端通吃？
支持任意复杂逻辑和表达式 or 受限的逻辑和简单表达式（辅以特别机制如filter） or Logicless？
基于字符串的模板 or DOM-aware的模板
如何选择模板引擎？
前端 or 后端 or 前后端通吃？
支持任意复杂逻辑和表达式 or 受限的逻辑和简单表达式（辅以特别机制如filter） or Logicless？
基于字符串的模板 or DOM-aware的模板
语言、平台、框架
性能
如何选择模板引擎？
语法友好
页面结构的组织（布局）
常用单元的复用（组件）
如何选择模板引擎？
语法友好
页面结构的组织（布局）
常用单元的复用（组件）
最佳实践的约束
如何选择模板引擎？
语法友好
页面结构的组织（布局）
常用单元的复用（组件）
最佳实践的约束
安全性
如何选择模板引擎？
语法友好
页面结构的组织（布局）
常用单元的复用（组件）
最佳实践的约束
安全性
与整体架构的匹配
未来趋势
前后端一致
Full stack
UI 绑定
声明式
未来趋势
前后端一致
Full stack
UI 绑定
声明式
HTML5
未来趋势
前后端一致
Full stack
UI 绑定
声明式
HTML5
更强的最佳实践约束和工具集成
总结
模板是 presentation spec
模板解决的问题是：分离前后端关注点
总结
模板是 presentation spec
模板解决的问题是：分离前后端关注点
模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
总结
模板是 presentation spec
模板解决的问题是：分离前后端关注点
模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
如何选择模板：外部条件、功能性、最佳实践的约束
总结
模板是 presentation spec
模板解决的问题是：分离前后端关注点
模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
如何选择模板：外部条件、功能性、最佳实践的约束
未来趋势：……
未来趋势
前后端一致
Full stack
UI 绑定
声明式
HTML5
更强的最佳实践约束和工具集成
未来趋势
前后端一致
Full stack
UI 绑定
声明式
HTML5
更强的最佳实践约束和工具集成
前端主导
总结
模板是 presentation spec
模板解决的问题是：分离前后端关注点
模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
如何选择模板：外部条件、功能性、最佳实践的约束
未来趋势：You Decide
感谢
感谢在模板和许多技术问题上与我一起交流探讨的：jindw、Winter、GZhang、司徒正美等。
本分享也源自于研发Jedi模板引擎，在这里特别感谢以下同事在开发和design review上的帮助：大绵羊、晓良、Sofish、林子、佳辰和飞哥，也要特别感谢百姓网CEO健硕和CTO晓良带领的整个技术团队给予我的信任和极大的自由度。
本分享的标题“致我们终将会用的模板”来自一丝同学的创意。“Web标准翻译与贡献”群的朋友也提议了许多有趣的名字：
