HTML5一周年

原文鏈接http://www.oschina.net/news/68526/html5-one-year
去年此時，W3C定稿了HTML5。我曾發(fā)表一篇文章《HTML 5終于定稿，為什么原生App世界將被顛覆》，這文章轉載量很大，它闡述了HTML5的來龍去脈，分析了HTML5的優(yōu)劣勢并對未來發(fā)展做了一些預測。
　　時隔一年，我們看看HTML5產業(yè)都發(fā)生了什么，那些基于理論的預測，哪些被實踐了，結果又如何？
　　2015年初，F(xiàn)acebook宣布推出React Native開源框架。2015年初，騰訊微信推出了JS SDK。2015年中，阿里巴巴公司的Judy Zhu入選W3C Advisory Board，這是中國人在W3C組織中話語權最高的位置。2015年中，HTML5中國產業(yè)聯(lián)盟舉行擴大會議，引入十幾家會員單位2015年 中，F(xiàn)irefox副總宮力離職創(chuàng)業(yè)H5OS并獲得巨額融資。騰訊QQ玩吧成為重要的HTML5手機游戲平臺。360手機助手與DCloud合作推出流應 用，開啟HTML5替代原生的序幕。
　　從整體來看，2015年是各個巨頭進軍HTML5領域的探索年，不同的公司通過不同的方式在探索HTML5如何為其所用，在推進、驗證、糾錯、繼續(xù)推進中不停迭代，并出現(xiàn)了一些非常亮眼的突破。
　　Facebook回歸并發(fā)布React Native，并非擁抱HTML5
　　扎克伯格在2013年放棄HTML5的聲明是HTML5歷史上黑暗的一幕。2015年，F(xiàn)acebook終于回來了。不過這種回歸略微尷尬的 是：React Native并非擁抱HTML5，而是準備干掉HTML5。React Native雖然仍然是JS，但并不兼容HTML5。通過Facebook的自定義語法，React Native實現(xiàn)了更高效率的渲染引擎，提升了性能表現(xiàn)。
　　React Native從年初召開發(fā)布會，然后發(fā)布iOS版，直到9月份Android版推出，中間也是在不停試水。
　　Facebook基于動態(tài)語言構建生態(tài)鏈的動力是十足的，作為全球最大的社交基礎平臺，F(xiàn)acebook的Web版本上活躍著廣泛的三方應用，但手機上這套體系搬過不來。
　　Facebook自己的App是原生開發(fā)的，但三方應用如果也使用原生開發(fā)，是無法成為Facebook移動生態(tài)的一部分的。而基于HTML5的三方 應用，在手機上的表現(xiàn)實在不佳，嚴重打擊用戶在手機上使用、購買這些三方應用的熱情。而Facebook極大的盈利來源恰恰是從三方應用的收入中獲取分 成。
　　雖然基于動態(tài)語言構建生態(tài)系統(tǒng)的動力十足，但Facebook為何要另起爐灶呢？
　　當初Facebook放棄HTML5，就是因為HTML5的渲染效率在手機上達不到流暢標準，F(xiàn)acebook認為罪魁禍首是DOM和CSS3。而React Native的原則就是No DOM，使用了完全不同的繪制引擎。
　　當初CSS3被設計的超級復雜，很大程度上是為了替代Flash在HTML4年代酷炫的交互效果。在PC上硬件資源沒問題，CSS3雖然復雜也能跑得流暢。但手機不同于PC，DOM和CSS重繪在低端機上并不流暢。
　　但無論如何，自建標準是比較難的事情，如果僅在Facebook生態(tài)里自然沒別人管，但如果做大了就又會像Flash一樣遭遇巨頭聯(lián)合絞殺。但是React Native確實在倒逼瀏覽器引擎開發(fā)商反思渲染引擎應該如何優(yōu)化。
　　騰訊在微信和QQ兩大生態(tài)中，運用不同思路探索HTML5
　　騰訊也是社交巨頭，和Facebook有類似的需求，圍繞著騰訊巨大的用戶群，有眾多三方應用在這里掘金。不過騰訊有微信和QQ兩套生態(tài)，這兩個生態(tài) 做HTML5的思路還并不相同。對微信而言，公眾號就是它的生態(tài)，為了增強公眾號的能力，微信推出了JS SDK，它本質上是一種輕應用，強化了JS的能力，補充了十幾類常用的API。公眾號是以服務內容和應用為主的，JS SDK的強化基本沒有考慮HTML5游戲的需求。
　　雖然微信強化了JS SDK，但公眾號的性能和體驗還是讓用戶不太爽的，切換頁面的長時間等待、Back錯亂等很多問題讓人煩躁。從這個角度看，還是落后Facebook一籌。
　　另一方面，如何推進開發(fā)商使用JS SDK也是一件撓頭的事情。本來滴滴出行內嵌在微信里的版本是可以通過微信JS SDK來展現(xiàn)地圖和語音輸入的，但滴滴并沒有強化微信內嵌版的體驗。這里就暴露了微信的另一個問題：當一個App廠商自己也是巨頭或者想成為巨頭時，它必 然不會依賴和強化微信里的入口，它會希望主推自己的獨立入口。
　　回想張小龍做微信公眾號的理念“再小的個體也有自己的品牌”和“消除中介”，這一切也是順理成章。
　　與微信不同，QQ是另一套思路，QQ用戶低齡化，愛玩游戲，通過HTML5游戲變現(xiàn)是QQ空間這個產品更關注的事情，于是騰訊在QQ空間App里推出 了玩吧欄目，專門匯聚HTML5游戲，給這些游戲導流量，然后獲取分成收益。目前玩吧匯聚了各種主流HTML5游戲，包括普通HTML5游戲和使用 Cocos2d-HTML5、Egret等引擎的游戲。
　　2015年有不少渠道在探索HTML5游戲，包括瀏覽器和一些超級App，甚至包括滴滴出行也開設了游戲中心。但就目前的情況，大多數渠道都沒有亮眼成績。玩吧在眾多渠道的勝出反映一個現(xiàn)狀：HTML5游戲目前比較適合基于社交屬性的輕度游戲。
　　業(yè)內還有一些開發(fā)商嘗試把HTML5游戲引入到互動營銷、客戶服務以及多屏互動領域，這些有意義的探索或許在未來能給消費者和商家?guī)硇碌捏w驗。
　　將HTML5應用于應用市場，360等企業(yè)尋求新突破點
　　應用市場對待HTML5與社交平臺不同。應用市場不存在通過社交用戶建立開放平臺并變現(xiàn)的需求，應用市場是比較自由和單純的發(fā)行渠道。
　　但原生應用的發(fā)行是一個很簡單的工作，無法差異化的，各家就是拼自己的資源和流量占入口。于是應用市場也在尋找自己的突破點。360手機助手在 2015年初上線了生活助手欄目，匯總了各種O2O廠商的服務，但不是讓用戶下載這些O2O廠商的原生App，而是直接打開HTML5網頁。年中360還 宣布對HTML5服務免流量，目前360生活助手里訪問這些O2O廠商的HTML5 App可以不花通信流量費，費用由360買單。
　　O2O服務的集成發(fā)行其他巨頭也很重視，百度在宣布200億砸向O2O后，手機百度及各條產品都很注重O2O廠商的HTML5服務引入；小米也推出了 小米生活，華為也在做華為生活，也都是類似思路。于是今年O2O廠商們有一個忙碌的工作就是把HTML5頁面集成到各家渠道。由App分發(fā)升級為服務分 發(fā)，這是應用市場自己的動力，但用戶使用習慣的養(yǎng)成還需要時間。
　　OS國產化，從HTML5入手
　　2015年中，HTML5中國產業(yè)聯(lián)盟舉行擴大會議。這個聯(lián)盟其實2013年就成立了，無奈當時整個產業(yè)太冷。隨著基礎環(huán)境的變化，越來越多的公司開 始重視HTML5，并加入HTML5中國產業(yè)聯(lián)盟一起推動產業(yè)發(fā)展。目前聯(lián)盟的會員們已經形成從開發(fā)、測試、發(fā)行、培訓、外包、融資、媒介宣傳的一條龍 HTML5產業(yè)服務能力。這也讓中國的HTML5開發(fā)者有更強的信心和更方便的服務。
　　2015年中，F(xiàn)irefox副總裁、Firefox OS的核心人物宮力博士，宣布辭職創(chuàng)業(yè)做H5OS，并獲得紫光國際1億美金的巨額投資。這筆巨款著實令人吃驚，且不說上半年瘋狂股市是否引發(fā)泡沫，但 H5OS指向的是紫光國際看好的中國政府國產化OS市場。自從斯諾登事件后，中國政府就反復強調國產化。在政府信息化領域圍繞著很多IT公司，都試圖從中 尋找到新機會。
　　關于OS的國產化，有些人從Linux入手，另有一些人，從HTML5入手。鑒于Google和中國政府的關系，Chrome OS是沒人敢碰的，于是不少人在接觸Firefox OS，宮力博士的創(chuàng)業(yè)也在情理之中。
　　此外，華為也推出了國產安全手機，從芯片到系統(tǒng)都是國產的。
　　但手機上的OS比PC上的OS難做。做一個操作系統(tǒng)本就很難，操作系統(tǒng)出來后要建生態(tài)更難。PC上大多數業(yè)務本就是基于Web的，但手機上目前大多數 優(yōu)質App都是Native的，缺少優(yōu)質的應用是目前所有做手機HTML5 OS的尷尬。如果希望在HTML5的OS上有足夠好的體驗，必然涉及擴展HTML5，但如果各家定義自己的擴展規(guī)范，讓開發(fā)者為每家單獨開發(fā)，這個事基本 就無法推動了。產業(yè)各方合力，把擴展標準統(tǒng)一，才可能有機會。
　　流應用，HTML5產業(yè)又一大亮點
　　2015年在HTML5產業(yè)里最大的亮點是360和DCloud公司推出的流應用，它對于HTML5缺陷的彌補和優(yōu)勢的發(fā)揮，可以說做得淋漓盡致。
　　在360手機助手里搜索“大眾點評外賣”，看到的按鈕不是“下載”，而是“秒開”。 　　流應用？這是輕應用換個概念炒冷飯嗎？
　　當然不是，點擊秒開后并不是在線打開一個網頁，仍然是安裝一個客戶端App，仍然如原生App般強大和流暢。只不過這個客戶端App是JS代碼，并像 流媒體一樣流式發(fā)行、邊用邊下，實現(xiàn)了5秒內完成客戶端App的下載、安裝、啟動。App二次使用仍然在桌面點圖標啟動，應用使用體驗也與傳統(tǒng)原生App 沒有區(qū)別。
　　一定要注意，對于用戶而言，使用App的功能體驗與之前的原生方式并沒有區(qū)別，但是獲取App卻秒開了。
　　讀者肯定會問，怎么實現(xiàn)的？
　　這個新概念包括的新技術有點多，本文不負責科普所有實現(xiàn)過程。大概講講HTML5為何能達到原生的功能和體驗。
　　流應用使用了一種強化的JS引擎（HTML5+），這種引擎能讓JS調用操作系統(tǒng)的40萬API，并將之前HTML5體驗不佳的交互都改進為原生體驗。
　　不同于React Native的反HTML5方案，HTML5+采取的方案是強化HTML5。
　　HTML5+兼容HTML5，并擴充40萬原生API。對于DOM和CSS3動畫效果不佳的部分場景，使用原生動畫補足，比如窗體切換、下拉刷新的動態(tài)交互效果，不采用CSS3動畫，而是通過JS調用了原生view動畫。
　　相比React Native，強化HTML5的方案對開發(fā)商更友好，開發(fā)商只需把現(xiàn)有的HTML5版本做簡單強化改造即可，而不是重新寫一套No DOM的代碼。
　　HTML5定稿后一年的業(yè)內大事基本整理完畢，接下來我想深入分析流應用這個里程碑產品會給產業(yè)帶來什么變化。
　　HTML5出現(xiàn)這幾年，在PC上已經廣為應用，但在手機上，始終是備胎。
　　流應用的出現(xiàn)顛覆了大眾對HTML5 的認知。以往提到HTML5，大多數人都會認為HTML5有5個問題：
　　HTML5的性能不行，不如原生；HTML5的api不夠，很多功能實現(xiàn)不了；HTML5沒法離線運行，斷網就不能用了，即使有離線緩存，三方軟件清 理垃圾后也不能用了；HTML5只能在瀏覽器里用，沒法直接在桌面啟動；通過HTML5強化引擎（如PhoneGap/Cordova）開發(fā)跨平臺 App，那是小公司為了省錢做的事，大公司還是要用原生。
　　現(xiàn)在，這五個常規(guī)認知被終結了。
　　好吧，聽起來大家真的需要重新認識HTML5了。
　　基于強化引擎運行的HTML5，功能、性能、離線運行、桌面啟動，均和原生一樣了（至少用戶感覺不到差別）。
　　以大眾點評外賣流應用為例，它的窗體切換pop-in動畫、流暢的下拉刷新，均是原生標準，還有一個流應用叫“36Kr資訊”，還可以手機進入飛行模式后再次從桌面啟動該App，一樣可以用而不會出現(xiàn)白屏或404。
　　為了消除大家對HTML5的五個錯誤認知，特地錄了36Kr流應用的操作視頻，演示在飛行模式和手機清理垃圾后仍然可正常使用，讓大家眼見為 實：http://v.qq.com/boke/gplay /c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_k0171y6vfyu.html
　　當HTML5這五個問題被消除后，這個世界就變了，但還變的不夠，因為其實HTML5還有很多強于原生的地方可以發(fā)掘。
　　我在去年HTML5定稿時寫的文章提到HTML5有5個原生也比不了的優(yōu)勢：
　　跨平臺快速迭代開源生態(tài)發(fā)達更容易推廣天生開放非孤島，可方便互聯(lián)
　　這五個技術優(yōu)勢，都如何應用呢？
　　HTML5的跨平臺，不是常規(guī)意義上的跨Android和iOS平臺。對于很多應用開發(fā)商而言，原來至少有3撥團隊，分別負責Android、iOS、微信公眾號的開發(fā)。
　　能不能一套代碼，跨多個平臺，且在各個平臺都有最佳體驗呢？
　　答案是可以的。挑食火鍋是一個O2O創(chuàng)業(yè)公司，他們只有一套HTML5代碼，通過MUI框架和條件編譯技術，編譯出了六個平臺的版本，iOS的ipa包、Android的apk包、HTML5瀏覽器版、微信公眾號版、百度直達號版，以及流應用版。
　　對于缺錢少人的創(chuàng)業(yè)公司，這是極具誘惑力的解決方案。
　　可能有人覺得，對于不差錢的大公司而言，HTML5的跨平臺優(yōu)勢不夠明顯。那么往下看。
　　任何大App廠商，都在追求快速迭代、熱更新、A/B測試，在這些領域，使用HTML5都比原生要方便的多。
　　這益處仍不夠多？再看HTML5的第四個優(yōu)勢：更容易推廣。
　　用戶獲取應用，一般通過應用商店或掃碼下載。
　　應用商店里點下載原生App，從下載到App真正啟動，折損50%，也就是100次下載只有50個App啟動激活。
　　而二維碼掃描，折損高達90%！很少有人在沒WIFI的時候下載十幾M的原生包。
　　這些不合理，以往似乎被人忽視了，但這些不合理終將被解決。
　　不管是50%還是90%的折損，通過流應用都可以避免。
　　除了降低折損，流應用還有一個推廣方面的特點，就是可以充分利用社交網絡推廣。
　　用戶分享一個流應用，就像分享一個消息，可以進朋友圈，也可以短信、微博分享。別人點擊就可以獲得這個流應用。
　　在原生應用體系里，這是不可想象的。以前我們怎么分享App？我說：Hi，這個App不錯，推薦給你；你說：OK，回頭有WIFI時我去應用商店下一個。這種土鱉場景想想就夠了，未來終于可以美好一些了。
　　然后再看HTML5的第五個優(yōu)勢：天生開放非孤島，可方便互聯(lián)。
　　這會帶來什么場景變化？
　　有3個很好玩的應用模式：廣告直通車、掃碼直通車、分享直通車，這給App打開了一個通過內容帶動應用發(fā)行的新途徑。
　　分享直通車：如果你的朋友在朋友圈里分享了一個好吃的飯館，你點擊后立即秒開流應用并自動進入該飯館，繼續(xù)點外賣、或團券，這是多么方便的體驗！這個 看似未來的東西已經實現(xiàn)。在360手機助手里搜索“大眾點評外賣”，在里面分享一個飯館，就是這個效果。掃碼直通車：公交站牌或電梯廣告經常有電商特價購 物，如果此時放一個掃碼購，用戶掃描后只需幾百k流量秒開了流應用，并且直接進入特價購物界面買單。廣告直通車：我們經常在應用市場看到廣告banner 圖，顯示某知名電影票特價10元一張，點擊該廣告圖后提示下載某電影票購票App。大多數用戶會在這里折損掉。而廣告直通車，則可以點擊廣告圖后，直接秒 開流應用并進入到這個電影的購票界面。
　　內容拉動發(fā)行，這扇窗打開，相信很多有創(chuàng)意的運營人員，可以玩出各種花樣來吸引用戶。
　　剛才說了HTML5對開發(fā)者而言，有5個原生也比不了的優(yōu)勢。但對于最終用戶而言，HTML5是一個陌生的技術名詞，開發(fā)商跨平臺開發(fā)了，成本下降了，可最終用戶沒有直觀感受。他們如何感受HTML5的好處？
　　流應用給普通手機用戶帶來了5個好處：
　　省時間：獲取流應用是秒開，邊用邊下；省流量：流應用的體積一般都是幾百K，比原生App小10倍，而更新包體積都是幾k，沒有門檻的輕易獲取新服 務，也不會看到那么多更新角標頭疼；省空間：手機有空間，不如拍照片。把iphone6換成6s的唯一原因是你之前的iphone6是16g的（有沒有戳 中你？）；省電、不卡：如果Android手機裝上100個傳統(tǒng)原生應用，那這手機基本就廢了，會變的很卡很費電。而流應用，裝上1000個也不會讓手機 變卡變費電；場景串聯(lián)：
　　出差訂了機票后，就可以去航空公司App值機，然后去打車App里訂去機場的出租車，然后去天氣App里看當地天氣……你不需要反復切回主屏啟動不同的App，并輸入明明上一個App里已經記錄的查詢條件。
　　之所以說流應用是HTML5產業(yè)的里程碑事件，是因為從此后我們可以重新審視HTML5 vs Native之爭：
　　HTML5的5個缺點被解決了；HTML5對開發(fā)商有5個原生比不了的優(yōu)勢；HTML5對用戶有5個原生比不了的優(yōu)勢。
　　我們先不爭論原生是否會消失，但在2015年，HTML5產業(yè)確實取得了突破性進展。
　　我們不再是只能干巴巴的說：“手機硬件、網絡都在提升，HTML5是趨勢”這種年年都在說的“真理”了。
　　一些產品真正解決了HTML5的缺陷，并利用HTML5的優(yōu)勢讓開發(fā)商和用戶，實打實的感受到了HTML5給他們的帶來的價值。
　　眾多從業(yè)公司，眾多產品和思路，誰能最終勝出仍然未知。但看著未來越來越近是令人欣喜的，并且更欣喜的是中國公司在這場變革中引領了很多創(chuàng)新。