2013/web_template/index.html

<!doctype html>
<html lang="zh-cmn-Hans-x-hax">
<head>
<meta charset="utf-8">
<title>Template</title>
<link rel="stylesheet" type="text/css" href="/slides/common.css">
<link rel="stylesheet" type="text/css" media="projection, screen and (min-width: 780px)" href="/slides/projection.css">
<link rel="alternate stylesheet" title="slides" type="text/css" href="/slides/run.css">
<script src="/slides/app.js"></script>
<style>
code {
	font-family: 'Consolas', 'Courier New', monospace;
}
code mark {
	color: black;
	background: yellow;
}
code del {
	color: #993333;
}
code ins {
	text-decoration: none;
	color: #00cc00;
}
pre {
	margin: 0;
	line-height: 1.38;
}
body > header dt {
	display: none;
}
</style>
</head>
<body>

<header>
	<hgroup>
	<h1>Web模板技术的总结与探索</h1>
	</hgroup>
	<dl>
		<dt>By
		<dd>hax （贺师俊）
		<dt>最后更新时间
		<dd style="text-align:center;"><time datetime="2013-07-12">2013年8月31日</time>
	</dl>
</header>

<section id="what-is-template-0">
	<h1>啥是模板（Template）？</h1>
</section>

<section id="template-sample-1">
	<h1>示例1</h1>
	<pre><code>
		Hello $user!
	</code></pre>
</section>

<section id="what-is-template-1">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>字符串替换？
	</ul>
</section>

<section id="template-sample-2">
	<h1>示例2</h1>
	<p><a href="https://github.com/myst729/front.js/blob/gh-pages/demo.html">18行代码的模板引擎的demo</a>
</section>

<section id="what-is-template-2">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>字符串替换 + 支持简单逻辑？
	</ul>
</section>

<section id="template-sample-3">
	<h1>示例3</h1>
	<p><a href="http://underscorejs.org/#template">underscore.js 的模板</a>
</section>

<section id="what-is-template-3">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>文本内插（interpolation） + 编程语言混合（从而支持表达式和逻辑结构） + 特别的优化？
	</ul>
</section>

<section id="template-sample-4">
	<h1>示例4</h1>
	<p><a href="http://www.w3.org/TR/xslt#data-example">XSLT</a>
</section>

<section id="what-is-template-4">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>匹配规则 + 查询语言和表达式 + 输出指令？
	</ul>
</section>

<section id="template-sample-5">
	<h1>示例5</h1>
	<p><a href="http://groovy.codehaus.org/Builders">Groovy Builders</a>
</section>

<section id="what-is-template-5">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>特定编程语言的库？
	</ul>
</section>

<section id="template-sample-6">
	<h1>示例6</h1>
	<p><a href="http://jade-lang.com/">Jade</a>
</section>

<section id="what-is-template-6">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>DSL？
	</ul>
</section>

<section id="template-sample-8">
	<h1>更多示例</h1>
	<p><a href="http://stackoverflow.com/questions/2719345/comparison-of-web-template-engines">Comparison of web template engines</a>
</section>

<section id="how-many-template-engines?">
	<h1>有多少种模板？</h1>
	<p><a href="http://en.wikipedia.org/wiki/Template_engine_(web)#Comparison">模板引擎的比较</a>
</section>

<section id="what-is-template-7">
	<h1>啥是模板（Template）？</h1>
	<ul>
		<li>字符串替换？
		<li>字符串替换 + 支持简单逻辑？
		<li>文本内插（interpolation） + 编程语言混合（从而支持表达式和逻辑结构） + 特别的优化？
		<li>匹配规则 + 查询语言和表达式 + 输出指令？
		<li>特定编程语言的库？
		<li>DSL？
		<li>……
	</ul>
</section>

<section id="what-is-template-10">
	<h1>一图胜千言</h1>
	<figure>
		<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a2/TempEngWeb016.svg/245px-TempEngWeb016.svg.png">
	</figure>
</section>

<section id="what-is-template-11">
	<h1>一图胜千言</h1>
	<figure>
		<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a2/TempEngWeb016.svg/245px-TempEngWeb016.svg.png" style="float: left; margin-right: 1em; background: white">
		<figcaption>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</figcaption>
	</figure>
</section>

<section id="what-is-template-12">
	<h1>定义</h1>
	<ul>
		<li>Presentation Specifications —— 呈现的规格
		<li>所谓 presentation spec，即确定如何将（后端的）数据转化为（前端的）信息
	</ul>
</section>

<section id="why-template-0">
	<h1>模板解决什么问题？</h1>
</section>

<section id="why-template-1">
	<h1>模板解决什么问题？</h1>
	<ul>
		<li>批量生成页面，或动态生成页面
	</ul>
</section>

<section id="template-history-1">
<h1>历史上……</h1>
<ul>
	<li>拼字符串
</ul>
</section>

<section id="template-history-2">
<h1>历史上……</h1>
<ul>
	<li>拼字符串
	<li>反转 => HTML内嵌变量和脚本（例子：PHP）
</ul>
</section>

<section id="template-history-3">
<h1>历史上……</h1>
<ul>
	<li>拼字符串
	<li>反转 => HTML内嵌变量和脚本
	<li>Helper（例子：CakePHP）
</ul>
</section>

<section id="template-history-4">
<h1>历史上……</h1>
<ul>
	<li>拼字符串
	<li>反转 => HTML内嵌变量和脚本
	<li>Helper
	<li>自定义标签（JSP TagLib）
</ul>
</section>

<section id="template-history-5">
<h1>历史上……</h1>
<ul>
	<li>拼字符串
	<li>反转 => HTML内嵌变量和脚本
	<li>Helper
	<li>自定义标签
	<li>组件化（ASP.NET WebForm 和 JSF）
</ul>
</section>

<section id="template-history-6">
<h1>历史上……</h1>
<ul>
	<li>拼字符串
	<li>反转 => HTML内嵌变量和脚本
	<li>Helper
	<li>自定义标签
	<li>组件化
	<li>返璞“归真”
</ul>
</section>

<section id="problems">
<h1>各种问题……</h1>
<ul>
	<li>要改一些展现内容，花了很长时间才找到修改的地方
	<li>要改进一些结构和样式，不敢动手，因为视图的可测试性不足
	<li>重复或相似的代码相当多，由于缺乏称手的工具而难以重构
	<li>稍复杂的需求变化，工程师荡漾在一堆标签和php/jsp/js逻辑交织的代码里
	<li>由于一些小的非本质性的变动，要改变许多原有的代码
</ul>
</section>

<section id="problems-reason">
<h1>这些问题背后的原因？</h1>
<ul>
	<li>表现层代码散布各处 —— 各个层面的代码都在输出html甚至style
	<li>Controller大包大揽 —— routing、页面布局、组装、应用逻辑……
	<li>视图单元同时承担两个职责 —— 页面单元和复用单元，导致视图单元变得太零碎
	<li>前端代码缺乏抽象层 —— 虽有抽象层尝试，但是不够好，很容易产生“抽象泄露”（传统编程的抽象方法不适应前端）
</ul>
</section>

<section id="web-arch">
<h1>Web设计原则</h1>
<ul>
	<li>前端口头禅：内容、样式、行为 的分离
	<li>一般的设计原则：SoC —— <a href="http://en.wikipedia.org/wiki/Separation_of_concerns">Seperation of Concerns</a>
</ul>
</section>

<section id="why-template-2">
	<h1>模板解决什么问题？</h1>
	<ul>
		<li>批量生成页面，或动态生成页面
	</ul>
</section>

<section id="why-template-2">
	<h1>模板解决什么问题？</h1>
	<ul>
		<li>批量生成页面，或动态生成页面
		<li>分离前后端关注点
		<li>执行表现层逻辑，更精确的说，执行 presentation spec
	</ul>
</section>

<section id="sort-template-engines-1">
	<h1>模板引擎在不同维度上的分类</h1>
	<p><a href="http://garann.github.io/template-chooser/">模板引擎选选看</a>
</section>

<section id="sort-template-engines-2">
	<h1>模板引擎在不同维度上的分类</h1>
	<ul>
		<li>前端 or 后端 or 前后端通吃？
	</ul>
</section>

<section id="sort-template-engines-3">
	<h1>模板引擎在不同维度上的分类</h1>
	<ul>
		<li>前端 or 后端 or 前后端通吃？
		<li>支持任意复杂逻辑和表达式 or 受限的逻辑和简单表达式（辅以特别机制如filter） or Logicless？
	</ul>
</section>

<section id="sort-template-engines-4">
	<h1>模板引擎在不同维度上的分类</h1>
	<ul>
		<li>前端 or 后端 or 前后端通吃？
		<li>支持任意复杂逻辑和表达式 or 受限的逻辑和简单表达式（辅以特别机制如filter） or Logicless？
		<li>基于字符串的模板 or DOM-aware的模板
	</ul>
</section>

<section id="how-to-choose-0">
	<h1>如何选择模板引擎？</h1>
</section>

<section id="how-to-choose-1">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>前端 or 后端 or 前后端通吃？
		<li>支持任意复杂逻辑和表达式 or 受限的逻辑和简单表达式（辅以特别机制如filter） or Logicless？
		<li>基于字符串的模板 or DOM-aware的模板
		<li>语言、平台、框架
		<li>性能
	</ul>
</section>

<section id="how-to-choose-2">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>语法友好
	</ul>
</section>

<section id="how-to-choose-3">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>语法友好
		<li>页面结构的组织（布局）
	</ul>
</section>

<section id="how-to-choose-4">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>语法友好
		<li>页面结构的组织（布局）
		<li>常用单元的复用（组件）
	</ul>
</section>

<section id="how-to-choose-5">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>语法友好
		<li>页面结构的组织（布局）
		<li>常用单元的复用（组件）
		<li>最佳实践的约束
	</ul>
</section>
<section id="how-to-choose-6">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>语法友好
		<li>页面结构的组织（布局）
		<li>常用单元的复用（组件）
		<li>最佳实践的约束
		<li>安全性
	</ul>
</section>
<section id="how-to-choose-7">
	<h1>如何选择模板引擎？</h1>
	<ul>
		<li>语法友好
		<li>页面结构的组织（布局）
		<li>常用单元的复用（组件）
		<li>最佳实践的约束
		<li>安全性
		<li>与整体架构的匹配
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
		<li>UI 绑定
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
		<li>UI 绑定
		<li>声明式
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
		<li>UI 绑定
		<li>声明式
		<li>HTML5
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
		<li>UI 绑定
		<li>声明式
		<li>HTML5
		<li>更强的最佳实践约束和工具集成
	</ul>
</section>

<section>
	<h1>总结</h1>
</section>

<section>
	<h1>总结</h1>
	<ul>
		<li>模板是 presentation spec
	</ul>
</section>

<section>
	<h1>总结</h1>
	<ul>
		<li>模板是 presentation spec
		<li>模板解决的问题是：分离前后端关注点
	</ul>
</section>

<section>
	<h1>总结</h1>
	<ul>
		<li>模板是 presentation spec
		<li>模板解决的问题是：分离前后端关注点
		<li>模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
	</ul>
</section>

<section>
	<h1>总结</h1>
	<ul>
		<li>模板是 presentation spec
		<li>模板解决的问题是：分离前后端关注点
		<li>模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
		<li>如何选择模板：外部条件、功能性、最佳实践的约束
	</ul>
</section>

<section>
	<h1>总结</h1>
	<ul>
		<li>模板是 presentation spec
		<li>模板解决的问题是：分离前后端关注点
		<li>模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
		<li>如何选择模板：外部条件、功能性、最佳实践的约束
		<li>未来趋势：……
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
		<li>UI 绑定
		<li>声明式
		<li>HTML5
		<li>更强的最佳实践约束和工具集成
	</ul>
</section>

<section>
	<h1>未来趋势</h1>
	<ul>
		<li>前后端一致
		<li>Full stack
		<li>UI 绑定
		<li>声明式
		<li>HTML5
		<li>更强的最佳实践约束和工具集成
		<li>前端主导
	</ul>
</section>

<section>
	<h1>总结</h1>
	<ul>
		<li>模板是 presentation spec
		<li>模板解决的问题是：分离前后端关注点
		<li>模板最重要的三个分类维度：前端/后端；逻辑复杂度的控制；DOM-aware
		<li>如何选择模板：外部条件、功能性、最佳实践的约束
		<li>未来趋势：<strong>You Decide</strong>
	</ul>
</section>

<section>
<h1>感谢</h1>
<ul>
	<li>感谢在模板和许多技术问题上与我一起交流探讨的：jindw、Winter、GZhang、司徒正美等。
	<li>本分享也源自于研发Jedi模板引擎，在这里特别感谢以下同事在开发和design review上的帮助：大绵羊、晓良、Sofish、林子、佳辰和飞哥，也要特别感谢百姓网CEO健硕和CTO晓良带领的整个技术团队给予我的信任和极大的自由度。
	<li>本分享的标题“致我们终将会用的模板”来自一丝同学的创意。“Web标准翻译与贡献”群的朋友也提议了许多有趣的名字：<br>
		模板金刚、那些年我们一起干过的模板、当模板遇见html、模板沉思录、可摸的洗衣板……在此一并表示感谢。<br>

</ul>
</section>

<section id="faq">
<h1>FAQ<h1>
</section>

<footer>
	<h1>Thank you</h1>
	<dl>
		<dt>我的Blog
		<dd><a href="http://hax.iteye.com/">hax.iteye.com</a>
		<dt>我个人的开源
		<dd><a href="https://github.com/hax">github.com/hax</a>
	</dl>
	<address>
		<dl>
			<dt>Email
			<dd><a href="mailto:johnhax@gmail.com">heshijun@baixing.com</a>
			<dt>Weibo
			<dd><a href="http://weibo.com/haxy">weibo.com/haxy</a> (@johnhax)
			<dt>Twitter
			<dd><a href="http://twitter.com/haxy">@haxy</a>
			<dt>Fanfou
			<dd><a href="http://fanfou.com/haxy">@haxy</a>
		</dl>
	</address>
</footer>

</body>
</html>