HTML5 PPT
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Hornbill</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://www.lamper.cn/NodeJS/css/reveal.min.css">
<link rel="stylesheet" href="http://www.lamper.cn/NodeJS/css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="http://www.lamper.cn/NodeJS/lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script><link rel="stylesheet" href="./Hornbill_files/paper.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body style="transition: -webkit-transform 0.8s ease; -webkit-transition: -webkit-transform 0.8s ease;">
<div class="reveal default center">
<div style="width: 960px; height: 700px; zoom: 0.842142857142857;">
<!--
<section id="themes">
<h2>Themes</h2>
<p>
Reveal.js comes with a few themes built in: <br>
<a href="?theme=sky#/themes">Sky</a> -
<a href="?theme=beige#/themes">Beige</a> -
<a href="?theme=simple#/themes">Simple</a> -
<a href="?theme=serif#/themes">Serif</a> -
<a href="?theme=night#/themes">Night</a> -
<a href="?#/themes">Default</a>
</p>
<p>
<small>
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code><head></code> using a <code><link></code>.
</small>
</p>
</section>
-->
<section style="top: -40px; display: block;">
</section>
<section style="top: -154px; display: block;">
<h1>大道至简</h1>
<h2>javascript的web解决方案</h2>
</section>
<section class="stack future" data-previous-indexv="2" style="top: 0px; display: block;">
<section style="top: -99.5px; display: block;">
<h3>为什么要重构？我们是在重复造轮子吗?why？</h3>
</section>
<section style="top: -165.5px; display: block;">
<p></p><h3>为什么要分层,传统的MVC架构的不足</h3><p></p>
<ul>
<li>C层容易去干M层的活</li>
<li>前端开发要去学smarty or sth.</li>
<li>只是显示上的修改也要整体发布</li>
</ul>
</section>
<section class="" style="top: -187px; display: block;">
<p></p><h3>为什么不使用一些流行的开源程序</h3><p></p>
<ul>
<li>我们只关注显示层,开源程序都是通用型程序，对我们来说“太强大了”</li>
<li>开源程序为了服务端和客户端语法一致，服务端代码是冗余的</li>
<li>二次开发成本过高</li>
</ul>
</section>
</section>
<section class="stack future" data-previous-indexv="2" style="top: 0px; display: block;">
<section style="top: -74.5px; display: block;">
<h3>我们想要什么样的轮子</h3>
</section>
<section style="top: -77.5px; display: block;">
<small>
<ul>
<li>对我们来说要足够简单</li>
<li>要方便扩展</li>
<li>性能要好</li>
</ul>
</small>
</section>
<section style="top: -66.5px; display: block;" class="">
<p>很幸运，我们有Node</p>
</section>
</section>
</div>
<div>
<section style="top: -88px; display: block;">hornbill用到的开源程序
<p>
<small>
<a href="http://nginx.org/" target="_blank"><span data-title="nginx ">nginx </span></a>
<a href="http://nodejs.org/" target="_blank"><span data-title="Node.js ">Node.js </span></a>
<a href="https://www.varnish-cache.org/" target="_blank"><span data-title="varnish ">varnish </span></a>
<a href=""><span data-title="
formidable/
uglifyjs/
less">
formidable/
uglifyjs/
less</span></a>
就这些了
</small>
</p>
</section>
</div>
<div>
<section style="top: -134px; display: none;">
<h2>Hornbill构成</h2>
<small>
<ul>
<li>
web -> Client-Side 的 .js 和 .css ,.less
</li>
<li>
server -> Server-Side 的 V和C,基于资源,url动态映射
</li>
<li>
jserver -> 静态文件伺服 .js .css .less 及js动态合并文件
</li>
<li>
cmd -> js文件的压缩 ， less to css生成 ，服务端进程的启动控制
</li>
</ul>
</small>
</section>
<section class="stack future" data-previous-indexv="5" style="top: 0px; display: none;">
<section style="top: -20px; display: block;">先看下代码长什么样子</section>
<section style="top: -20px; display: block;">
<p>C层</p>
<img src="./Hornbill_files/ppt-s1.png">
<p style="background:black;color:green">controller/mls.com/guang.js</p>
</section>
<section style="top: -20px; display: block;">
<p>V层</p>
<img src="./Hornbill_files/ppt-s-view.png">
</section>
<section style="top: -20px; display: block;">
<img src="./Hornbill_files/ppt-s-view-repeat-tpl.png">
</section>
<section style="top: -20px; display: block;">
<p>js长这个样子（AMD）</p>
<img src="./Hornbill_files/ppt-web-cap.png">
<p style="background:black;color:green">component/dialog.js</p>
</section>
<section style="top: -20px; display: block;" class="">
<p>css长这个样子 (LESS)</p>
<img src="./Hornbill_files/ppt-web-less.png">
<p style="background:black;color:green">less/welcome.less</p>
</section>
</section>
<section style="top: -66.5px; display: none;">
<p>它们是如何工作的</p>
</section>
<section style="top: -40px; display: none;">
</section>
<section style="top: -61.5px; display: block;">
没有绝对的规则
</section>
<section style="top: -40px; display: block;">
</section>
</div>
<div style="display: block;"><span style="width: 67.3684210526316px;"></span></div><aside style="display: block;"><div class="navigate-left enabled"></div><div class="navigate-right enabled"></div><div></div><div></div></aside><div></div><div></div></div>
<script src="./Hornbill_files/head.min.js"></script>
<script src="./Hornbill_files/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script><script type="text/javascript" src="./Hornbill_files/highlight.js"></script><script type="text/javascript" src="./Hornbill_files/zoom.js"></script><script type="text/javascript" src="./Hornbill_files/notes.js"></script>
</body></html>