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