HTML 5 技術沙龍之“現狀”：HTML 5 到底發生了什么？
愛范兒計劃組織三場 HTML 5 技術沙龍，昨天晚上剛剛舉行了第一場——“談現狀”。第二場和第三場分別在 7 月 14 日和 21 日（均為周六）舉行，二、三場分別講案例和未來趨勢，現在仍然可以報名。
對于愛范兒發起這場活動，無論是我們的讀者還是 HTML 5 圈內的相關從業者，不少人有這個疑問：怎么你們也來攪這個“渾水”？其實原因很簡單，我們想找到一個答案：HTML 5 到底發生了什么？從去年年初開始，HTML 5 像當初的“開放平臺”一樣，經常被人們掛在嘴邊，但實際上我們并沒有看到完全基于 HTML 5 的上乘作品，無論是應用還是游戲。HTML 5 到底發生了什么？
我接觸的騰訊手機 QQ 瀏覽器的人，他們的“HTML 5 創新大賽”搞了兩屆了，今年的比賽還在進行之中，我想邀請他們的一些參賽選手來講一講產品，但目前還沒有看到特別突出的作品。UC 瀏覽器更是在多個場合鼓吹 HTML 5，在最近的一個游戲開放平臺發布會上，他們宣稱已經有 10 多款 HTML 5 游戲開始掙錢并且月收入超過百萬。另外與諾基亞瀏覽器部門接觸過程中，他們同樣對 HTML 5 態度積極，對 Web App 期望甚高。
以上基本上是 HTML 5 技術沙龍活動舉辦的背景——巧合的是，HTML 5 的主要推動者之一 Chrome 在第一場沙龍結束 3 個小時后就宣布入駐 iOS 平臺，完成全平臺布局，這對于 HTML 5 支持者來說是重大利好消息。第一場活動演講的嘉賓是騰訊手機 QQ 瀏覽器的開發人員夏李，HTML 5 夢工場的趙錦江，HTML 5 中國的劉鑫，木疙瘩聯合創始人王勇及清華創業團隊道拍圖說的主要負責人韓知白。夏李主要講 HTML 5 技術；趙錦江和劉鑫主要講行業現狀；王勇的公司在硅谷成立，主要介紹國外的一些情況；韓知白則介紹自己使用 HTML 5 創業的坎坷經歷。
下面是第一場沙龍的內容，我們可以先來了解 HTML 5 的現狀，再在 7 月份的另兩場活動中了解 HTML 5 的作品和未來趨勢。
手機 QQ 瀏覽器夏李：HTML 5 技術概覽
夏李主要講解 HTML 5 的技術特性：Canvas（畫布），CSS3（動畫），WebSocket，FileSystem，本地存儲，離線應用。夏李還舉例 HTML 5 可以調用攝像頭/麥克風（個別支持），獲取地理位置，制作感應器等（鏈接在此）。
- Canvas（畫布）：Canvas 是使用 Javascript（JS） 繪圖的手段，在 Canvas 繪制的圖片中，它不是靜態的 JPG，亦非 Flash，圖片的圖例文字可選。Canvas 專注于線條、圖像和色彩，本身并不支持動畫；要實現動畫，需要使用 Javascript 一幀一幀繪制。這里有 HTML 5 版本《植物大戰僵尸》。
- CSS3（動畫）：CSS3 是 HTML 5 非常關鍵的一部分，可以幫助人們不需要使用復雜的 JS 或切圖就能滿足動畫效果。比如圓角 Button，以往是切圓角圖片進行適配，現在可以直接套入長方形再修改。
- FileSystem：FileSystem 是離線緩存和離線存儲的基礎，是每個瀏覽器給予我們的 URL 沙箱文件系統。安全性比較好——URL 之間無法互相訪問；但 URL 內可以存儲任何東西，包括 CSS 代碼、二進制文件等。
- 本地存儲：共分兩個部分，LocalStorage 和 SessionStorage，前者用于應用調整數據存取，后者用于運行時數據臨時存取。與 cookie 比較，HTML 5 對節省帶寬比較有幫助。
- 離線應用：HTML 5 之前無法做到真正的離線應用，比如輸入一個網站后拉下來的 HTTP 文本，只能實現圖片或 JS 緩存。HTML 5 可以通過 Medfast 實現離線存儲，而不需要緩存。
HTML 5 夢工場趙綿江：HTML 5 是 Web App 代名詞
HTML 5 夢工場發起人是田愛娜，她原來在磊友（現已完全轉向 HTML 5 游戲開發）工作，后來成立 HTML 5 研究小組，在一年前成立 HTML 5 夢工場。在沙龍開始前的短暫交流中，她說自己獨自一人在去年組織了兩場大型 HTML 5 活動，一場 600 多人，一場 800 多人。今年 8 月她將組織一場千人大會。她說“再拉一點贊助，活動成本（國家會議中心場地費、午餐費用等）夠了之后下周就開始宣傳這個大會了”，歡迎感興趣的朋友前往圍觀。
當晚代表 HTML 5 夢工場演講的嘉賓是技術方面主要成員趙錦江（他本人在傲游瀏覽器工作）。他演講第一句話是：HTML 5 其實就是一個 Web Application，它就是為網頁應用而生的；HTML 5 的使命是“Web 里可以出現 app 這類東西”。
趙錦江說 HTML 5 有兩個非常要好的朋友——移動和游戲。對于前者，由于喬布斯干掉了 Flash，促使蘋果被動地成為 HTML 5 的重要推動者；另一移動巨頭 Google 對 HTML 5 的支持力度也很大，尤其是去年年初 Chrome 開始密集更新后——現在 Chrome 移動版已經正式入駐 Android 和 iOS。蘋果和 Google 在移動市場的份額超過 82%（IDC 數據），移動領域無疑是 HTML 5 的廣袤天地——PC 領域，HTML 5 與 Flash 競爭還存在困難。而在游戲領域，有天然的良好的盈利模式（《怒鳥》去年推出 HTML 5 版本）。
大眾眼中的 HTML 5 是什么樣子？趙錦江說顯然沒有技術層面感受那么深刻，普通用戶看到的是 Google 特殊工作日變的的 Doodle、微博私信提醒等直觀的東西。“應用和游戲并不是普通大眾第一眼看到的 HTML 5，HTML 5 是一個代名詞，是‘web app’的代名詞，它在技術人員那里扮演非常重要角色——通過 JS、CSS3 優化可以提高 Web 產業的整體能力”。
關于 HTML 5 的優勢，趙錦江提到兩點：跨平臺，快速實現。前者代碼寫一遍，各個平臺都可以跑；后者調試直觀，比傳統開發更敏捷快速。劣勢方面，有三點：性能需要提 升，JS 腳本語言與 C++、JAVA 還有一定差距；功能還需要完善，現在 W3C（標準制定者）在安全和隱私方面都很謹慎；標準不成熟，目前 HTML 5 標準還沒有完全發布。
在我問到 HTML 5 炒了這么久，為什么還沒有迅速推廣開來時。趙錦江回答：
- HTML 5 核心技術在國外，技術引進和同步、消化需要時間
- 底層的完善，到優秀應用誕生，需要一個過程
- 國內在組織各種活動推廣 HTML 5，大眾接受也需要一個過程
- HTML 5 不是終點，HTML 6、CSS4 已經出現，未來的 WEB 世界會非常大
HTML 5 中國劉鑫：HTML 5 下一站——Hybrid App
劉鑫來自 HTML 5 中國，本職工作是 AppCan 產品副總裁，后者是一家 HTML 5 移動應用在線開發平臺。所屬公司正益無線主要是幫助開發者把 Web App（網頁應用）包裝成 Native App（本地應用）。劉鑫把這一“包裝”工作稱為 Hybrid App（混合應用），在演講之前，他有一篇投稿：《Web App 或夭折，Hybrid App 才是新世界的王》，詳見本文第二頁。
在演講開頭，劉鑫說現在 HTML 5 被炒得這么熱，并不是說 PC 端需要 H5，如果沒有移動端的發展，PC 端在未來 5 年有沒有 HTML 5 都無所謂——Flash 已經足夠好；移動端一出現，HTML 5 的需求才變得迫切。
劉鑫平時也會撰寫文章，論述他對 HTML 5 的理解。演講中提到的 HTML 5 優勢和劣勢均援引自他此前發表的文章。在《WebApp 三大挑戰：瀏覽器性能不足是最大障礙》一文中，他說 HTML 5 的優勢是“跨平臺、迭代成本低（無須重新下載，動態升級）、JS 學習成本低”，而 HTML 5 劣勢是“規范不齊全（可能導致新進入開發者觀望），不同瀏覽器差異大，移動瀏覽器（所調用的）性能與 Native App 相差甚遠”。
考慮國人迭代手機的速度（40 個月以內），劉鑫估計到 2014 年 Web App 才能全面興起。在談到用戶是不是喜歡 Web app 時，劉鑫坦言“用戶才不關心你是 Native App 還是 Web App，喜歡它的是有商業目的的從業群體，比如我們”。
“另一個喜歡 Web App 的是百度”，劉鑫點名說到，“百度對 Web App 重視程度很高，已經上升到戰略層面”。原因是“入口的競爭”，劉鑫認為百度之所以能夠在互聯網時代占據主導地位，是因為百度在分發流量：用戶要找什么東 西，新聞、游戲、電影……直接去百度搜索，百度告訴我們信息在哪里。通過購買關鍵字，百度可以主導流量的分發。但是在移動 OS 商業模式和架構體系下，百度的機會不大，用戶都跑去應用商店里搜索了。“移動互聯網的入口變成了手機桌面，百度、桌面瀏覽器的入口重要性下降了”。
關于 Web App 可以繞過蘋果從而獲得更多收入的說法，劉鑫持保留態度。“iOS 最大的吸引力在于變現能力”，劉鑫說到，“身邊不少朋友做 Web App，采用的收費機制無非兩種：傳統的 SP 扣費模式，或者通過 PC 端為手機充值”。當然，這個觀點證明了 AppCan 在做是一門大生意。
木疙瘩王勇：HTML 5 是一把雙刃劍
王勇是木疙瘩公司的聯合創始人。我在 3 月第七期春苗計劃（張寧那場）見過王勇的同事王志，當時張寧演講結束后王志向其介紹自己手里的 HTML 5 技術，王志說他們有厚實的技術積累。這次王勇趕巧在國內，就邀請他過來演講。
木疙瘩是硅谷公司，目前正在國內籌建北京研發中心，計劃在年底前打造出 5-10 人的技術研發團隊（感興趣的朋友可以聯系他的郵箱，lucas@mugeda.com）。木疙瘩是“基于云計算的 HTML 5 動畫平臺”。王勇的團隊之前在 非死book 上基于 Flash 做過一款純動畫的天氣應用“Anyweather”，下載量有 900 萬。2008 年 iPhone 開始流行的時候，他們計劃反這款應用移植到蘋果 App Store，但發現 iPhone 不支持 flash。
“當時就想，iOS 這么大的一個平臺，應該要有一個跟它對應的（動畫）基礎平臺來支撐它的發展，及支持富媒體（Rich Media）的生產。”王勇介紹到自己做木疙瘩的初衷，“2009 年我們開始關注 HTML 5 領域，很快認為這是一個行業發展的方向，于是就決定做（木疙瘩）這樣的平臺”。
王勇說根據自己兩三年來對 HTML 5 的了解，HTML 5 是大勢所趨，“在未來兩三年內會有非常樂觀和積極的發展”。他自己在灣區（Bay Area）跑過蘋果 Apple Store 和微軟 Microsoft Store，他在這些巨頭們的手機上測試自己的產品，發現支持力度都很廣泛，“把我們做的動畫放在 iPhone 4S 上跑，性能是 iPhone 4 的 6-7 倍。Google 從 Chrome 18 開始也引進了 GPU 對 HTML 5 的加速。對于 HTML 5 來說，硬件、軟件、內核都是加速的”。
另外，非死book 對 Web App 的支持力度也是很大的，同時也是主要推動者。非死book 也在今年 6 月正式對外發布自己的 app store，支持 Web App。王勇認為 非死book 的做法主要是想繞過蘋果的分成模式。事實上，非死book 正在自己 9 億人的帝國里推行自己的虛擬貨幣 非死book Credit——App Store 不支持第三方虛擬貨幣，從這一點來看，騰訊對 Web App 的喜好程度不會弱于百度——非死book 從虛擬貨幣中抽成 30%。在今年 2 月 1 日提交的 IPO 申請文件中，非死book 平臺內最大游戲廠商 Zynga 占到 非死book 總收入的 15%，其中大部分是來自于 非死book Credits 抽成——2010 年 5 月兩家因為虛擬貨幣鬧得不可開交。
對于 HTML 5 面臨的挑戰，王勇認為最主要來自于用戶體驗。王勇用 hao123 網址導航在控制入口、統一體驗方面的成功，來說明手機瀏覽器在用戶體驗方面的控制力，及由此帶來 HTML 5 統一體驗的漫長道路。這一觀點與上面劉鑫的觀點相同，劉鑫認為如果天底下只有一款瀏覽器，那么明天就可以普及 HTML 5。
王勇認為 HTML 5“跨平臺”特性是一把雙刃劍，“優勢有潛力來支持很多設備，劣勢也是它要支持很多設備”。王勇提到山寨廠商，“各種硬件對 HTML 5 支持力度差距很大，‘設備碎片化’嚴重”。
清華道拍途說韓知白：HTML 5 開發不適合創業
韓知白是清華學生，今年剛剛大四畢業，馬上去伯克利大學讀書。在學校的時候他圍繞二維碼做了一個“道拍途說”項目，也接一些外包的活兒。韓知白 介紹了兩個自己失敗的創業故事。一個是通過一個 QR 工具同時生成 QR 碼和網頁內容，“我們是國內第一個可以做到同時生產兩個東西（QR 碼和網頁）的團隊”。但由于消費者對于二維碼的認知剛剛起步，這個過于“前衛”的功能并沒有被發掘出來。第二個項目是做幫助廣告商做 HTML 5 網頁，韓知白的計劃是把手機網站賣出去，但沒有人買。“要讓線下打廣告的人知道移動廣告的重要性很難，線下到線上，很難養活一個第三方制作網頁的公司”。 韓知白打過學校操場、食堂桌子上廣告的主意，但沒有回音。
他現在做的第三個項目是二維碼與 HTML 5 相結合的網站，目前在為清華圖書館服務，不知道前景如何。“作為 HTML 5 開發者，很酷。但仍然很難把 HTML 5 的東西賣出去，大家都不理解 HTML 5。”
讓人比較驚訝的是，韓知白演講的結束語是“如果你是 HTML 5 開發者，更好的選擇是被大公司雇走，而不是嘗試 HTML 5 創業”。這從側面說明 HTML 5 行業現狀跌跌撞撞。
Web App 或夭折，Hybrid App 才是新世界的王
作者：HTML 5 中國劉鑫
基于 HTML5 的 Web App 在移動端接受實用性檢驗后，開發者從熱情轉為觀望。這時候 Hybrid App 作為現階段 HTML 5 技術的落腳點正悄然興起！Native App 和 Web App 的論戰加入了一個新的角色 Hybrid App。
但究竟什么是 Hybrid App？如何定義？
汽車有混合動力 Hybrid，移動應用同樣也有混合模式。Hybrid App（混合模式移動應用）兼具“Native App 良好用戶交互體驗的優勢”和“Web App 跨平臺開發的優勢”。很多人不知道市場上一些主流移動應用都是基于 Hybrid App 的方式開發，比如國外有 非死book、國內有百度搜索等。但究竟什么是 Hybrid App？如何定義？
Hybrid App：Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play etc. Usually， they are downloaded from the platform to a target device, such as iPhone, Android phone or Windows Phone. The subscribers need to install to run them.
我們來拆解一下里面的含義：
- mobile application：Hybrid App 就是一個移動應用
- both browser-supported language and computer language：同時使用網頁語言與程序語言編寫
- available through application distribution platforms：通過應用商店進行分發
- a target device：區分目標平臺
- install to run：用戶需要安裝使用
綜合一下就是：“Hybrid App 同時使用網頁語言與程序語言開發，通過應用商店區分移動操作系統分發，用戶需要安裝使用的移動應用”。總體特性更接近 Native App 但是和 Web App 區別較大。只是因為同時使用了網頁語言編碼，所以開發成本和難度比 Native App 要小很多。因此說，Hybrid App 兼具了 Native App 的所有優勢，也兼具了 Web App 使用 HTML5 跨平臺開發低成本的優勢。
Hyrbid App 為什么會興起？
Hybrid App 的興起是現階段移動互聯網產業的一種偶然。移動互聯網的熱潮刮起后，眾多公司前赴后繼的進入。但是很快發現移動應用的開發人員太少，所以導致瘋狂的人才爭 奪。市場機制下移動應用開發人才的待遇扶搖直上，最終變成眾多企業無法負擔養一個具備跨平臺開發能力的專業移動應用開發團隊。而 HTML5 的出現讓 Web App 露出曙光，HTML5 開發移動應用的跨平臺和廉價優勢讓眾多想進入移動互聯網領域的公司開始心動。可是當下基于 HTML5 的 Web App 更是霧里看花，在用戶入口習慣、分發渠道和應用體驗這三個核心問題沒解決之前，Web App 也很難得以爆發。正是在這樣是機緣巧合下，基于 HTML5 低成本跨平臺開發優勢又兼具 Native App 特質的 Hybrid App 技術殺入混戰，并且很快吸引了眾人的目光。大幅的降低了移動應用的開發成本，可以通過現有應用商店模式發行，在用戶桌面形成獨立入口等等這些，讓 Hybrid App 成為解決移動應用開發困境不錯的選擇，也成為現階段 Web App 的代言人。Hybrid App 像刺客一樣，在 Native App 和 Web App 混戰之時，偶然間的在移動應用開發領域占有了一席之地。
Hybrid App 是如何實現網頁語言與程序語言的混合？誰占主體？
Hybrid App 通常分為三種類型：多 View 混合型，單 View 混合型，Web 主體型。
多 View 混合型
即 Native View 和 Web View 獨立展示，交替出現。目前常見的 Hybrid App 是 Native View 與 WebView 交替的場景出現。這種應用混合邏輯相對簡單。即在需要的時候，將 WebView 當成一個獨立的 View（Activity）運行起來，在 WebView 內完成相關的展示操作。這種移動應用主體通常是 Native App，Web 技術只是起到補充作用。開發難度和 Native App 基本相當。
單 View 混合型
即在同一個 View 內，同時包括 Native View 和 Web View。互相之間是覆蓋（層疊）的關系。這種 Hybrid App 的開發成本較高，開發難度較大，但是體驗較好。如百度搜索為代表的單 View 混合型移動應用，既可以實現充分的靈活性，又能實現較好的用戶體驗。
Web 主體型
即移動應用的主體是 Web View，主要以網頁語言編寫，穿插 Native 功能的 Hybrid App 開發類型。這種類型開發的移動應用體驗相對而言存在缺陷，但整體開發難度大幅降低，并且基本可以實現跨平臺。Web 主體型的移動應用用戶體驗的好壞，主要取決于底層中間件的交互與跨平臺的能力。國外的 appMobi、PhoneGap 國內的 AppCan 和 Rexsee 都屬于 Web 主體型移動應用中間件。其中 Rexsee 不支持跨平臺開發。appMobi 和 PhoneGap 除基礎的底層能力更多是通過插件（Plugins）擴展的機制實現 Hybrid。而 AppCan 除了插件機制，還提供了大量的單 View 混合型的接口來完善和彌補 Web 主體型 Hybrid App 體驗差的問題，接近 Native App 的體驗。
多 View 混合型，單 View 混合型，Web 主體型優劣勢對比
從分析可見，Hybrid App 中的 Web 主體型只要能夠解決用戶體驗差的問題，就可以變成最佳 Hybrid App 解決方案類型。
Hybrid App 的瓶頸與未來
國內外 Hybrid App 的開發框架眾多。如何選擇又成為一個難題。下面對開發者比較關心的集中知名跨平臺開發移動應用中間件進行列表和對比，以便選擇最適合您的移動應用中間件。
- PhoneGap 是相對比較早進入公眾視線的一種選擇。但是，開發者簡單的基于 PhoneGap 來開發移動應用肯定會發現結果和 Web App 比較差的用戶體驗類似。這也是為什么基于 PhoneGap 有實用性的移動應用主要集中在 iOS 上。可是 PhoneGap 這種現狀弱化了 HTML5 的跨平臺價值。
- AppCan 在技術架構上和 PhoneGap 類似是 Web 主體型中間件，但是通過結合了一些原生交互效果能夠達到 iOS、Android 平臺都比較一致的用戶體驗。但是相比 PhoneGap 的開源，AppCan 相對封閉的路線顯得過于謹慎。
- Titanium 是一種基于翻譯機制的跨平臺中間件，能夠開發出具有 Native 體驗的移動應用，但是因為翻譯機制的限制導致移動應用開發不能像真正的 HTML5 開發一樣靈活。哪怕一個按鈕也不能像普通 HTML 一樣來編寫，而必須按照 Titanium 約定的特定格式。
Hybrid App 這個領域雖然還處于比較初期的階段，但是已經有很多優秀的公司和技術團隊在致力于跨平臺開發移動應用中間件技術的研究，給了開發者眾多選擇。開發者可以根 據實際的項目需求來選擇中間件。Web App 雖被瀏覽器廠商和搜索引擎公司所推崇，但存在用戶體驗差、盈利模式不明確等現階段無法解決的問題，或最終夭折。Hybrid App 正在被越來越多的公司和開發者所認同，勢必會成為新世界的王。