在很早以前，我一直以為前端很簡單，前端沒什么好架構的，有jQuery就足夠了，jQuery的確太優秀了，以至于很多標準都參照了它。移動時代的到來，讓web有更大的舞臺，web有跨平臺、快速部署的天然優勢，世界也對web有更多的想法和期待，前端業務也越來越復雜，前端正在經歷了前所未有的挑戰。這時前端也非常需要框架來解決一些問題。前端借鑒了很多優秀的思想，產生了大量的框架，百家曾鳴，這是前端最好的時刻，也是最壞的時刻。前端需謹慎前行。

接下來看看淘在路上h5的整體架構圖

架構層大概是這樣

前后端分離
why：

• 前端嚴重依賴后端
• 溝通成本高
• 職責不清楚

前端寫Demo，后端套頁面

• 后端需要寫HTML
• 前端仍然確認后端寫的HTML

前端寫View層，后端只管數據

• 前端需要熟悉后端語言
• 前端需要了解后端架構

html 沒有include的能力

我們怎么做的：

• view由瀏覽器渲染
• 和客戶端使用同一套API
• 前端不依賴后端

前后端分離之后的優點：
1、開發效率更高，在聯調之前，互不干擾，前端開發完成后就是實際可用的代碼，不需要再轉換成后臺編譯環境，前后端都可以快樂的開發了。

h5App 包含的部分
h5App的優點：
把資源離線到本地也是很多公司的解決方案。
打開頁面時，html,css,js這些資源已經在本地，所以非?？斓木涂梢园l起ajax請求去取數據，縮短了頁面展示時間。
這里有一個對比，H5APP大概20ms左右的就開始請求了，瀏覽器需要等到400ms以后才可以請求數據

本來訪問本地需要用file協議打開html代碼，這有很多不方便的，不能跨域，不能共用cooike，跳轉網頁都需要用file協議，不能post請求。

虛擬域可以做到打開一個線上的地址，實際上訪問的是離線到本地的html。

虛擬域的優點：
這是一套超好的解決方案，有了它，前端開發者不用考慮開發的是離線緩存的代碼還是在瀏覽器運行的代碼，不用考慮跨域問題，cookie可以共用。這也是我們一套代碼適應多端的關鍵點。

JsBridge:
js本來是不能和iOS 直接通訊的，但是實際使用中，我們又需要雙方可以通訊，所以聰明的程序員就想出了jsBrigde這樣的方式。

h5App 是團隊的成果，這是一個跨部門深度合作的項目。在這里需要感謝王樂天、單斌、張彥華、朱偉、金剛、董凱，因為有你們的深度參與和支持，h5App才能完成。讓我們給他們最熱烈的掌聲。

開發

調試

高效跨平臺的調試技巧是一個前端必須掌握的，前端正在經歷一個比IE6更混亂的時代，各種平臺，各種設備，各種自家定制的webview。

構建工具

使用了gulp開發構建工作流，gulp 生態發展很快，有很多插件可以直接使用，頁有一些不能滿足我們的業務需求的，所以這套工具，自己也寫了幾個插件