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