HTML5定稿一週年,你必須要重新認識HTML5了

作者簡介:王安,DCloud CEO,HTML5產業專家,W3C會員。

去年此時,W3C定稿了HTML5。我曾發表一篇文章《HTML 5終於定稿,爲什麼原生App世界將被顛覆》,這文章轉載量很大,它闡述了HTML5的來龍去脈,分析了HTML5的優劣勢並對未來發展做了一些預測。

時隔一年,我們看看HTML5產業都發生了什麼,那些基於理論的預測,哪些被實踐了,結果又如何?

  • 2015年初,Facebook宣佈推出React Native開源框架。

  • 2015年初,騰訊微信推出了JS SDK。

  • 2015年中,阿里巴巴公司的Judy Zhu入選W3C Advisory Board,這是中國人在W3C組織中話語權最高的位置。

  • 2015年中,HTML5中國產業聯盟舉行擴大會議,引入十幾家會員單位

  • 2015年中,Firefox副總宮力離職創業H5OS並獲得鉅額融資。

  • 騰訊QQ玩吧成爲重要的HTML5手機遊戲平臺。

  • 360手機助手與DCloud合作推出流應用,開啓HTML5替代原生的序幕。


從整體來看,2015年是各個巨頭進軍HTML5領域的探索年,不同的公司通過不同的方式在探索HTML5如何爲其所用,在推進、驗證、糾錯、繼續推進中不停迭代,並出現了一些非常亮眼的突破。

Facebook迴歸併發布React Native,並非擁抱HTML5

扎克伯格在2013年放棄HTML5的聲明是HTML5歷史上黑暗的一幕。2015年,Facebook終於回來了。不過這種迴歸略微尷尬的是:React Native並非擁抱HTML5,而是準備幹掉HTML5。React Native雖然仍然是JS,但並不兼容HTML5。通過Facebook的自定義語法,React Native實現了更高效率的渲染引擎,提升了性能表現。

React Native從年初召開發佈會,然後發佈iOS版,直到9月份Android版推出,中間也是在不停試水。

Facebook基於動態語言構建生態鏈的動力是十足的,作爲全球最大的社交基礎平臺,Facebook的Web版本上活躍着廣泛的三方應用,但手機上這套體系搬過不來。

Facebook自己的App是原生開發的,但三方應用如果也使用原生開發,是無法成爲Facebook移動生態的一部分的。而基於HTML5的三方應用,在手機上的表現實在不佳,嚴重打擊用戶在手機上使用、購買這些三方應用的熱情。而Facebook極大的盈利來源恰恰是從三方應用的收入中獲取分成。

雖然基於動態語言構建生態系統的動力十足,但Facebook爲何要另起爐竈呢?

當初Facebook放棄HTML5,就是因爲HTML5的渲染效率在手機上達不到流暢標準,Facebook認爲罪魁禍首是DOM和CSS3。而React Native的原則就是No DOM,使用了完全不同的繪製引擎。

當初CSS3被設計的超級複雜,很大程度上是爲了替代Flash在HTML4年代酷炫的交互效果。在PC上硬件資源沒問題,CSS3雖然複雜也能跑得流暢。但手機不同於PC,DOM和CSS重繪在低端機上並不流暢。

但無論如何,自建標準是比較難的事情,如果僅在Facebook生態裏自然沒別人管,但如果做大了就又會像Flash一樣遭遇巨頭聯合絞殺。但是React Native確實在倒逼瀏覽器引擎開發商反思渲染引擎應該如何優化。

 騰訊在微信和QQ兩大生態中,運用不同思路探索HTML5

騰訊也是社交巨頭,和Facebook有類似的需求,圍繞着騰訊巨大的用戶羣,有衆多三方應用在這裏掘金。不過騰訊有微信和QQ兩套生態,這兩個生態做HTML5的思路還並不相同。對微信而言,公衆號就是它的生態,爲了增強公衆號的能力,微信推出了JS SDK,它本質上是一種輕應用,強化了JS的能力,補充了十幾類常用的API。公衆號是以服務內容和應用爲主的,JS SDK的強化基本沒有考慮HTML5遊戲的需求。

雖然微信強化了JS SDK,但公衆號的性能和體驗還是讓用戶不太爽的,切換頁面的長時間等待、Back錯亂等很多問題讓人煩躁。從這個角度看,還是落後Facebook一籌。

另一方面,如何推進開發商使用JS SDK也是一件撓頭的事情。本來滴滴出行內嵌在微信裏的版本是可以通過微信JS SDK來展現地圖和語音輸入的,但滴滴並沒有強化微信內嵌版的體驗。這裏就暴露了微信的另一個問題:當一個App廠商自己也是巨頭或者想成爲巨頭時,它必然不會依賴和強化微信裏的入口,它會希望主推自己的獨立入口。

回想張小龍做微信公衆號的理念“再小的個體也有自己的品牌”和“消除中介”,這一切也是順理成章。

與微信不同,QQ是另一套思路,QQ用戶低齡化,愛玩遊戲,通過HTML5遊戲變現是QQ空間這個產品更關注的事情,於是騰訊在QQ空間App裏推出了玩吧欄目,專門匯聚HTML5遊戲,給這些遊戲導流量,然後獲取分成收益。目前玩吧匯聚了各種主流HTML5遊戲,包括普通HTML5遊戲和使用Cocos2d-HTML5、Egret等引擎的遊戲。

2015年有不少渠道在探索HTML5遊戲,包括瀏覽器和一些超級App,甚至包括滴滴出行也開設了遊戲中心。但就目前的情況,大多數渠道都沒有亮眼成績。玩吧在衆多渠道的勝出反映一個現狀:HTML5遊戲目前比較適合基於社交屬性的輕度遊戲。

業內還有一些開發商嘗試把HTML5遊戲引入到互動營銷、客戶服務以及多屏互動領域,這些有意義的探索或許在未來能給消費者和商家帶來新的體驗。

將HTML5應用於應用市場,360等企業尋求新突破點

應用市場對待HTML5與社交平臺不同。應用市場不存在通過社交用戶建立開放平臺並變現的需求,應用市場是比較自由和單純的發行渠道。

但原生應用的發行是一個很簡單的工作,無法差異化的,各家就是拼自己的資源和流量佔入口。於是應用市場也在尋找自己的突破點。360手機助手在2015年初上線了生活助手欄目,彙總了各種O2O廠商的服務,但不是讓用戶下載這些O2O廠商的原生App,而是直接打開HTML5網頁。年中360還宣佈對HTML5服務免流量,目前360生活助手裏訪問這些O2O廠商的HTML5 App可以不花通信流量費,費用由360買單。

O2O服務的集成發行其他巨頭也很重視,百度在宣佈200億砸向O2O後,手機百度及各條產品都很注重O2O廠商的HTML5服務引入;小米也推出了小米生活,華爲也在做華爲生活,也都是類似思路。於是今年O2O廠商們有一個忙碌的工作就是把HTML5頁面集成到各家渠道。由App分發升級爲服務分發,這是應用市場自己的動力,但用戶使用習慣的養成還需要時間。

OS國產化,從HTML5入手

2015年中,HTML5中國產業聯盟舉行擴大會議。這個聯盟其實2013年就成立了,無奈當時整個產業太冷。隨着基礎環境的變化,越來越多的公司開始重視HTML5,並加入HTML5中國產業聯盟一起推動產業發展。目前聯盟的會員們已經形成從開發、測試、發行、培訓、外包、融資、媒介宣傳的***HTML5產業服務能力。這也讓中國的HTML5開發者有更強的信心和更方便的服務。

2015年中,Firefox副總裁、Firefox OS的核心人物宮力博士,宣佈辭職創業做H5OS,並獲得紫光國際1億美金的鉅額投資。這筆鉅款着實令人吃驚,且不說上半年瘋狂股市是否引發泡沫,但H5OS指向的是紫光國際看好的中國政府國產化OS市場。自從斯諾登事件後,中國政府就反覆強調國產化。在政府信息化領域圍繞着很多IT公司,都試圖從中尋找到新機會。

關於OS的國產化,有些人從Linux入手,另有一些人,從HTML5入手。鑑於Google和中國政府的關係,Chrome OS是沒人敢碰的,於是不少人在接觸Firefox OS,宮力博士的創業也在情理之中。

此外,華爲也推出了國產安全手機,從芯片到系統都是國產的。

但手機上的OS比PC上的OS難做。做一個操作系統本就很難,操作系統出來後要建生態更難。PC上大多數業務本就是基於Web的,但手機上目前大多數優質App都是Native的,缺少優質的應用是目前所有做手機HTML5 OS的尷尬。如果希望在HTML5的OS上有足夠好的體驗,必然涉及擴展HTML5,但如果各家定義自己的擴展規範,讓開發者爲每家單獨開發,這個事基本就無法推動了。產業各方合力,把擴展標準統一,纔可能有機會。

流應用,HTML5產業又一大亮點

2015年在HTML5產業裏最大的亮點是360和DCloud公司推出的流應用,它對於HTML5缺陷的彌補和優勢的發揮,可以說做得淋漓盡致。

在360手機助手裏搜索“大衆點評外賣”,看到的按鈕不是“下載”,而是“秒開”。

56542fe9f2083.jpg 

流應用?這是輕應用換個概念炒冷飯嗎?

當然不是,點擊秒開後並不是在線打開一個網頁,仍然是安裝一個客戶端App,仍然如原生App般強大和流暢。只不過這個客戶端App是JS代碼,並像流媒體一樣流式發行、邊用邊下,實現了5秒內完成客戶端App的下載、安裝、啓動。App二次使用仍然在桌面點圖標啓動,應用使用體驗也與傳統原生App沒有區別。

一定要注意,對於用戶而言,使用App的功能體驗與之前的原生方式並沒有區別,但是獲取App卻秒開了。

讀者肯定會問,怎麼實現的?

這個新概念包括的新技術有點多,本文不負責科普所有實現過程。大概講講HTML5爲何能達到原生的功能和體驗。

流應用使用了一種強化的JS引擎(HTML5+),這種引擎能讓JS調用操作系統的40萬API,並將之前HTML5體驗不佳的交互都改進爲原生體驗。

不同於React Native的反HTML5方案,HTML5+採取的方案是強化HTML5。

HTML5+兼容HTML5,並擴充40萬原生API。對於DOM和CSS3動畫效果不佳的部分場景,使用原生動畫補足,比如窗體切換、下拉刷新的動態交互效果,不採用CSS3動畫,而是通過JS調用了原生view動畫。

相比React Native,強化HTML5的方案對開發商更友好,開發商只需把現有的HTML5版本做簡單強化改造即可,而不是重新寫一套No DOM的代碼。

HTML5定稿後一年的業內大事基本整理完畢,接下來我想深入分析流應用這個里程碑產品會給產業帶來什麼變化。

HTML5出現這幾年,在PC上已經廣爲應用,但在手機上,始終是備胎。

流應用的出現顛覆了大衆對HTML5 的認知。以往提到HTML5,大多數人都會認爲HTML5有5個問題:

 1. HTML5的性能不行,不如原生;

 2. HTML5的api不夠,很多功能實現不了;

 3. HTML5沒法離線運行,斷網就不能用了,即使有離線緩存,三方軟件清理垃圾後也不能用了;

 4. HTML5只能在瀏覽器裏用,沒法直接在桌面啓動;

 5. 通過HTML5強化引擎(如PhoneGap/Cordova)開發跨平臺App,那是小公司爲了省錢做的事,大公司還是要用原生。


現在,這五個常規認知被終結了。

好吧,聽起來大家真的需要重新認識HTML5了。

基於強化引擎運行的HTML5,功能、性能、離線運行、桌面啓動,均和原生一樣了(至少用戶感覺不到差別)。

以大衆點評外賣流應用爲例,它的窗體切換pop-in動畫、流暢的下拉刷新,均是原生標準,還有一個流應用叫“36Kr資訊”,還可以手機進入飛行模式後再次從桌面啓動該App,一樣可以用而不會出現白屏或404。

爲了消除大家對HTML5的五個錯誤認知,特地錄了36Kr流應用的操作視頻,演示在飛行模式和手機清理垃圾後仍然可正常使用,讓大家眼見爲實:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_k0171y6vfyu.html “”

當HTML5這五個問題被消除後,這個世界就變了,但還變的不夠,因爲其實HTML5還有很多強於原生的地方可以發掘。

我在去年HTML5定稿時寫的文章提到HTML5有5個原生也比不了的優勢:

 1. 跨平臺

 2. 快速迭代

 3. 開源生態發達

 4. 更容易推廣

 5. 天生開放非孤島,可方便互聯


這五個技術優勢,都如何應用呢?

HTML5的跨平臺,不是常規意義上的跨Android和iOS平臺。對於很多應用開發商而言,原來至少有3撥團隊,分別負責Android、iOS、微信公衆號的開發。

能不能一套代碼,跨多個平臺,且在各個平臺都有最佳體驗呢?

答案是可以的。挑食火鍋是一個O2O創業公司,他們只有一套HTML5代碼,通過MUI框架和條件編譯技術,編譯出了六個平臺的版本,iOS的ipa包、Android的apk包、HTML5瀏覽器版、微信公衆號版、百度直達號版,以及流應用版。

對於缺錢少人的創業公司,這是極具誘惑力的解決方案。

可能有人覺得,對於不差錢的大公司而言,HTML5的跨平臺優勢不夠明顯。那麼往下看。

任何大App廠商,都在追求快速迭代、熱更新、A/B測試,在這些領域,使用HTML5都比原生要方便的多。

這益處仍不夠多?再看HTML5的第四個優勢:更容易推廣。

用戶獲取應用,一般通過應用商店或掃碼下載。

應用商店裏點下載原生App,從下載到App真正啓動,折損50%,也就是100次下載只有50個App啓動激活。

而二維碼掃描,折損高達90%!很少有人在沒WIFI的時候下載十幾M的原生包。

這些不合理,以往似乎被人忽視了,但這些不合理終將被解決。

不管是50%還是90%的折損,通過流應用都可以避免。

除了降低折損,流應用還有一個推廣方面的特點,就是可以充分利用社交網絡推廣。

用戶分享一個流應用,就像分享一個消息,可以進朋友圈,也可以短信、微博分享。別人點擊就可以獲得這個流應用。

在原生應用體系裏,這是不可想象的。以前我們怎麼分享App?我說:Hi,這個App不錯,推薦給你;你說:OK,回頭有WIFI時我去應用商店下一個。這種土鱉場景想想就夠了,未來終於可以美好一些了。

然後再看HTML5的第五個優勢:天生開放非孤島,可方便互聯。

這會帶來什麼場景變化?

有3個很好玩的應用模式:廣告直通車、掃碼直通車、分享直通車,這給App打開了一個通過內容帶動應用發行的新途徑。

  • 分享直通車:如果你的朋友在朋友圈裏分享了一個好吃的飯館,你點擊後立即秒開流應用並自動進入該飯館,繼續點外賣、或團券,這是多麼方便的體驗!這個看似未來的東西已經實現。在360手機助手裏搜索“大衆點評外賣”,在裏面分享一個飯館,就是這個效果。

  • 掃碼直通車:公交站牌或電梯廣告經常有電商特價購物,如果此時放一個掃碼購,用戶掃描後只需幾百k流量秒開了流應用,並且直接進入特價購物界面買單。

  • 廣告直通車:我們經常在應用市場看到廣告banner圖,顯示某知名電影票特價10元一張,點擊該廣告圖後提示下載某電影票購票App。大多數用戶會在這裏折損掉。而廣告直通車則可以點擊廣告圖後,直接秒開流應用並進入到這個電影的購票界面。


內容拉動發行,這扇窗打開,相信很多有創意的運營人員,可以玩出各種花樣來吸引用戶。

剛纔說了HTML5對開發者而言,有5個原生也比不了的優勢。但對於最終用戶而言,HTML5是一個陌生的技術名詞,開發商跨平臺開發了,成本下降了,可最終用戶沒有直觀感受。他們如何感受HTML5的好處?

流應用給普通手機用戶帶來了5個好處:


 1. 省時間:獲取流應用是秒開,邊用邊下;

 2. 省流量:流應用的體積一般都是幾百K,比原生App小10倍,而更新包體積都是幾k,沒有門檻的輕易獲取新服務,也不會看到那麼多更新角標頭疼;

 3. 省空間:手機有空間,不如拍照片。把iphone6換成6s的唯一原因是你之前的iphone6是16g的(有沒有戳中你?);

 4. 省電、不卡:如果Android手機裝上100個傳統原生應用,那這手機基本就廢了,會變的很卡很費電。而流應用,裝上1000個也不會讓手機變卡變費電;

 5. 場景串聯:


出差訂了機票後,就可以去航空公司App值機,然後去打車App裏訂去機場的出租車,然後去天氣App裏看當地天氣……你不需要反覆切回主屏啓動不同的App,並輸入明明上一個App裏已經記錄的查詢條件。

之所以說流應用是HTML5產業的里程碑事件,是因爲從此後我們可以重新審視HTML5 vs Native之爭:

  • HTML5的5個缺點被解決了;

  • HTML5對開發商有5個原生比不了的優勢;

  • HTML5對用戶有5個原生比不了的優勢。


我們先不爭論原生是否會消失,但在2015年,HTML5產業確實取得了突破性進展。

我們不再是隻能乾巴巴的說:“手機硬件、網絡都在提升,HTML5是趨勢”這種年年都在說的“真理”了。

一些產品真正解決了HTML5的缺陷,並利用HTML5的優勢讓開發商和用戶,實打實的感受到了HTML5給他們的帶來的價值。

衆多從業公司,衆多產品和思路,誰能最終勝出仍然未知。但看着未來越來越近是令人欣喜的,並且更欣喜的是中國公司在這場變革中引領了很多創新。

HTML5的崛起,可能會讓一些原生開發工程師不安,歡迎大家一起理性討論,但求不要未經思考或驗證的亂噴。我個人也是程序員出身,會多種編程語言,我總覺得一個開發者需要經常適應語言大戰的變遷。我的微博,weibo.com/wangan2000。

再次歡迎大家體驗流應用

在360手機助手裏搜索“大衆點評外賣”、“36kr資訊”。沒有體驗條件的可看如下視頻:

  • 視頻1 應用市場秒開流應用:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_i0171dyo7cf.html 


  • 視頻2 快碼,掃描立即秒裝app:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_w0171ems73j.html 


  • 視頻3 分享,通過社交網絡快速傳播App:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html 


  • 視頻4 流應用不是Web網頁,斷網時照樣使用:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_k0171y6vfyu.html 

    

native是使用原生系統內核的,相當於直接在系統上操作。,是我們傳統意義上的軟件,更加穩定。但是H5的APP先得調用系統的瀏覽器內核,相當於是在網頁中進行操作,較原生APP穩定性稍差,似乎還沒有百萬級用戶量的H5 APP。但是h5最大的優點是可以跨平臺,開發容易。native的話需要用ANDROID的語言和IOS的語言各自寫,H5只要開發一套

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章