前端工程化

在很早以前，我一直以为前端很简单，前端没什么好架构的，有jQuery就足够了，jQuery的确太优秀了，以至于很多标准都参照了它。移动时代的到来，让web有更大的舞台，web有跨平台、快速部署的天然优势，世界也对web有更多的想法和期待，前端业务也越来越复杂，前端正在经历了前所未有的挑战。这时前端也非常需要框架来解决一些问题。前端借鉴了很多优秀的思想，产生了大量的框架，百家曾鸣，这是前端最好的时刻，也是最坏的时刻。前端需谨慎前行。

接下来看看淘在路上h5的整体架构图

架构层大概是这样

前后端分离
why：

• 前端严重依赖后端
• 沟通成本高
• 职责不清楚

前端写Demo，后端套页面

• 后端需要写HTML
• 前端仍然确认后端写的HTML

前端写View层，后端只管数据

• 前端需要熟悉后端语言
• 前端需要了解后端架构

html 没有include的能力

我们怎么做的：

• view由浏览器渲染
• 和客户端使用同一套API
• 前端不依赖后端

前后端分离之后的优点：
1、开发效率更高，在联调之前，互不干扰，前端开发完成后就是实际可用的代码，不需要再转换成后台编译环境，前后端都可以快乐的开发了。

h5App 包含的部分
h5App的优点：
把资源离线到本地也是很多公司的解决方案。
打开页面时，html,css,js这些资源已经在本地，所以非常快的就可以发起ajax请求去取数据，缩短了页面展示时间。
这里有一个对比，H5APP大概20ms左右的就开始请求了，浏览器需要等到400ms以后才可以请求数据

本来访问本地需要用file协议打开html代码，这有很多不方便的，不能跨域，不能共用cooike，跳转网页都需要用file协议，不能post请求。

虚拟域可以做到打开一个线上的地址，实际上访问的是离线到本地的html。

虚拟域的优点：
这是一套超好的解决方案，有了它，前端开发者不用考虑开发的是离线缓存的代码还是在浏览器运行的代码，不用考虑跨域问题，cookie可以共用。这也是我们一套代码适应多端的关键点。

JsBridge:
js本来是不能和iOS 直接通讯的，但是实际使用中，我们又需要双方可以通讯，所以聪明的程序员就想出了jsBrigde这样的方式。

h5App 是团队的成果，这是一个跨部门深度合作的项目。在这里需要感谢王乐天、单斌、张彦华、朱伟、金刚、董凯，因为有你们的深度参与和支持，h5App才能完成。让我们给他们最热烈的掌声。

开发

调试

高效跨平台的调试技巧是一个前端必须掌握的，前端正在经历一个比IE6更混乱的时代，各种平台，各种设备，各种自家定制的webview。

构建工具

使用了gulp开发构建工作流，gulp 生态发展很快，有很多插件可以直接使用，页有一些不能满足我们的业务需求的，所以这套工具，自己也写了几个插件