技術(shù)專題·前端融合技術(shù)棧
原創(chuàng)
一:崔紅保
崔紅保,MUI框架設(shè)計(jì)師,前數(shù)字天堂信息科技公司研發(fā)總監(jiān),8年手機(jī)跨平臺(tái)中間件研發(fā)經(jīng)驗(yàn),目前致力于如何讓HTML5應(yīng)用達(dá)到原生App體驗(yàn)。
點(diǎn)評(píng)內(nèi)容:
隨著HTML5規(guī)范的定稿及手機(jī)硬件的提升,webview的渲染性能大幅提升,前端工程師參與App開(kāi)發(fā)已是常態(tài);現(xiàn)階段,前端主要有兩種參與模式,***種以創(chuàng)業(yè)團(tuán)隊(duì)或小團(tuán)隊(duì)為代表,特點(diǎn)是缺錢少人,前端工程師利用html構(gòu)造界面,css控制樣式,js實(shí)現(xiàn)業(yè)務(wù)邏輯,然后再借助5+ runtime、Cordova等HTML5增強(qiáng)引擎調(diào)用手機(jī)的原生設(shè)備能力(比如:攝像頭、麥克風(fēng)等),從而實(shí)現(xiàn)App完整業(yè)務(wù)的開(kāi)發(fā);這種模式主要利用HTML5的跨平臺(tái)優(yōu)勢(shì),一次開(kāi)發(fā),兼容iOS、Android兩大平臺(tái),借助mui開(kāi)源框架的話,甚至可進(jìn)一步發(fā)布到微信、手機(jī)瀏覽器等平臺(tái);第二種以一線互聯(lián)網(wǎng)公司為代表,特點(diǎn)是人多錢多,這類公司開(kāi)發(fā)原生App則面臨著不同的挑戰(zhàn):
1、業(yè)務(wù)復(fù)雜,安裝***大,用戶在下載安裝過(guò)程中流失率較高;
2、營(yíng)銷活動(dòng)很多,原生開(kāi)發(fā)無(wú)法應(yīng)付多變的營(yíng)銷方案;因此,這類公司通過(guò)自研或集成5+ SDK等方式,核心基座使用原生開(kāi)發(fā)(C/S結(jié)構(gòu)),展示類及營(yíng)銷活動(dòng)等則通過(guò)webview加載服務(wù)端HTML頁(yè)面(B/S結(jié)構(gòu));這種模式的***做法則是新近推出的流應(yīng)用,使用5+ API開(kāi)發(fā)App,用戶***使用時(shí)采用流式下載技術(shù),邊用邊下,將資源文件下載到客戶端本地(變成C/S結(jié)構(gòu)),在保證原生體驗(yàn)的同時(shí),大幅提升用戶獲取App的體驗(yàn),點(diǎn)擊安裝后5秒進(jìn)入首頁(yè)。
互聯(lián)網(wǎng)的世界是開(kāi)放共享的,但進(jìn)入到移動(dòng)化聯(lián)網(wǎng)時(shí)代,占主導(dǎo)的原生應(yīng)用卻是獨(dú)立的,App的內(nèi)容被局限在每個(gè)App內(nèi)部;App之間不能無(wú)縫跳轉(zhuǎn),鏈接和數(shù)據(jù)不能在App之間傳遞和共享,這就是常說(shuō)的“應(yīng)用孤島”,在用戶體驗(yàn)層面,這實(shí)際上是歷史的倒退。然互聯(lián)互通作為用戶剛需,蘋果和Google自然也在努力解決,比iOS 9新推出Universal Links(通用鏈接),但效果依然不夠理想。反觀HTML5,卻天然具有互聯(lián)互通的基因,任何場(chǎng)景均可直達(dá),不存在應(yīng)用孤島的問(wèn)題;舉一個(gè)廣告直達(dá)的例子,現(xiàn)在大家可見(jiàn)的App廣告,基本上都是App安裝廣告,比如“9.9元看老炮兒”,用戶點(diǎn)擊后會(huì)引導(dǎo)下載某個(gè)電影購(gòu)票App,然后確認(rèn)權(quán)限安裝、啟動(dòng)App進(jìn)入首頁(yè),查找《老炮兒》的電影,進(jìn)入搶票或優(yōu)惠活動(dòng)頁(yè),整個(gè)過(guò)程需要1~2分鐘,用戶轉(zhuǎn)化率低,廣告投放收益差;而基于HTML5的流應(yīng)用卻不存在這樣的問(wèn)題,用戶點(diǎn)擊廣告banner后,5秒后直接進(jìn)入《老炮兒》的搶票優(yōu)惠活動(dòng)頁(yè),轉(zhuǎn)化率在95%左右。從廣告轉(zhuǎn)化率和最終用戶體驗(yàn)上對(duì)比,基于HTML5的流應(yīng)用明顯更勝一籌。
因此,基于HTML5的簡(jiǎn)單、跨平臺(tái)、動(dòng)態(tài)、開(kāi)放的先天基因,未來(lái)前端技術(shù)必然會(huì)越來(lái)越多的參與到App開(kāi)發(fā)中,這個(gè)時(shí)代真的是前端工程師的春天。
#p#
二:孫東
孫東,14年加入藝龍網(wǎng),任職h5前端架構(gòu)師,曾在當(dāng)當(dāng)網(wǎng),新浪網(wǎng),百度等互聯(lián)網(wǎng)公司工作,前端經(jīng)驗(yàn)豐富,創(chuàng)立了slarkjs框架,在前端渲染,server渲染加速,云端一體化等領(lǐng)域有較深研究。
H5和APP不是天然割裂的,業(yè)務(wù)上的融合已然普遍存在。在一些經(jīng)常變動(dòng)的活動(dòng)頁(yè)、或不太需要性能的靜態(tài)頁(yè),App開(kāi)發(fā)者已經(jīng)習(xí)慣于使用內(nèi)嵌H5來(lái)減少多套代碼提高開(kāi)發(fā)效率,而社會(huì)化分享的H5鏈接,也會(huì)通過(guò)喚起或下載,給APP導(dǎo)流。近年來(lái),技術(shù)上H5和APP也在越走越近,通過(guò)js bridge,內(nèi)嵌的H5也可以來(lái)利用APP的功能,和既有APP實(shí)現(xiàn)的業(yè)務(wù)串聯(lián)起來(lái)。
2015年facebook發(fā)布的 react-native,可以說(shuō)是前端屆的重大變革,站在了若干融合的前端框架肩膀上,***次實(shí)現(xiàn)了js框架與native 布局、語(yǔ)法、轉(zhuǎn)換工具的***整合,精簡(jiǎn)了臃腫的WebKit,使用高性能的jscore解析器,所開(kāi)發(fā)的APP 既具備原生開(kāi)發(fā)的優(yōu)質(zhì)體驗(yàn),又具備H5開(kāi)發(fā)的靈活,可以預(yù)見(jiàn)在2016年,優(yōu)秀的APP開(kāi)發(fā)者學(xué)習(xí)js,優(yōu)秀的js開(kāi)發(fā)者學(xué)習(xí)安卓/iOS,將成為普遍的現(xiàn)實(shí)。
#p#
三:孫東風(fēng)
孫東風(fēng),12年開(kāi)發(fā)管理經(jīng)驗(yàn),曾就職百度、HP、東方財(cái)富,全棧工程師,技術(shù)圖書(shū)作者,出版有《例學(xué)Symbian開(kāi)發(fā)》、《iPhone&iPad開(kāi)發(fā) 實(shí)戰(zhàn)》、《構(gòu)建iPhone企業(yè)級(jí)應(yīng)用-基于HTML、CSS和JavaScript》,國(guó)內(nèi)最早一批從事移動(dòng)互聯(lián)網(wǎng)行業(yè)的人之一。擅長(zhǎng)移動(dòng)平臺(tái)、大用戶 量級(jí)后端系統(tǒng)架構(gòu)。
點(diǎn)評(píng)內(nèi)容:
關(guān)于前端融合這個(gè)技術(shù)話題,業(yè)內(nèi)也有很多解決方案。但是基本上無(wú)法解決移動(dòng)互聯(lián)網(wǎng)行業(yè)的本質(zhì)問(wèn)題,用戶對(duì)APP的交互體驗(yàn)越來(lái)越挑剔,選擇也越來(lái)越多。而原來(lái)的Native的開(kāi)發(fā)方式的成本居高不下,加上響應(yīng)速度相對(duì)較慢。
目前來(lái)看,比較好的方式是采用FaceBook開(kāi)源的React Native框架,從本質(zhì)上解決了H5的交互體驗(yàn)差和開(kāi)速開(kāi)發(fā)之間的矛盾,用戶界面和業(yè)務(wù)邏輯采用JS快速開(kāi)發(fā),一些特效采用Native的方式開(kāi)發(fā)并提供相關(guān)接口給JS來(lái)調(diào)用,從而使得開(kāi)發(fā)人員可以快速響應(yīng)業(yè)務(wù)的變化。
而React Native的目的也是“Learn once,write anywhere”,JS的業(yè)務(wù)邏輯和界面很大一部分可以重復(fù)使用在iOS、Android以及H5頁(yè)面上,大大降低開(kāi)發(fā)成本。 我們本身也在基于這塊提供全棧的SaaS解決方案,從而從根本上解決創(chuàng)業(yè)公司缺少技術(shù)人員的問(wèn)題,原則上只需要一個(gè)會(huì)JS的程序員即可快速響應(yīng)業(yè)務(wù)需求。
#p#
四:編輯點(diǎn)評(píng)
王雪燕·開(kāi)發(fā)頻道編輯
點(diǎn)評(píng)內(nèi)容:
作為關(guān)注前端融合技術(shù)不太久的小白來(lái)說(shuō),給出有價(jià)值的點(diǎn)評(píng)是不可能的。那我就在這個(gè)說(shuō)說(shuō)個(gè)人的感受,15年很多的新技術(shù)流行開(kāi)來(lái),框架方面比較火的就屬基于 JavaScript 的開(kāi)源框架 React Native,還有引用很多vue.js優(yōu)點(diǎn)使得編程風(fēng)格更加簡(jiǎn)約的Weex 框架。而Node.js的出現(xiàn)促進(jìn)了棧的融合,使得前端工程師與后端越來(lái)越近,這樣一來(lái),一些前端工程師找到了突破點(diǎn),慢慢可以部署和發(fā)布整個(gè)應(yīng)用的能力。
本為客戶端腳本語(yǔ)言的JavaScript也加入到了后端的陣營(yíng),慢慢涉及移動(dòng)端Native領(lǐng)域。就目前看來(lái),前端開(kāi)發(fā)在效率和速度上遠(yuǎn)遠(yuǎn)超過(guò)客戶端,這對(duì)于高頻應(yīng)用很適合適合,但是高頻應(yīng)用還要求體驗(yàn)要求很高的話可能和native還有一定差距。
給新入前端開(kāi)發(fā)人員一點(diǎn)小建議:面對(duì)錯(cuò)綜復(fù)雜的眾多新的前端技術(shù),不要盲目都試圖去學(xué)會(huì),對(duì)這些技術(shù)做一些了解,知道各個(gè)技術(shù)的優(yōu)缺點(diǎn),可應(yīng)用的場(chǎng)景和定位就OK了。然后,針對(duì)所在工作環(huán)境中用到或未來(lái)可能用到的深入學(xué)習(xí)。待所需的技術(shù)掌握好,再去考慮研究其他的新技術(shù)以及如何運(yùn)用新技術(shù)來(lái)把當(dāng)前工作做得更***。