天天看點

對無線電商動态化方案的思考(一)

如題,接下裡的一段時間裡,我會從無線電商動态化的角度談一談自己的了解和思考

首先要談的是無線,或者說移動。手機和傳統桌面端計算機有着非常大的不同,首先是随時随地,這樣它就需要同時也可以擁有更多的傳感器,比如鏡頭、體感、定位、藍牙、nfc 等等,當然也包括多點觸摸屏,人們的操作和互動方式也發生了很大的變化;其次它的螢幕尺寸和電腦完全不同,也由此産生了完全不同的閱讀體驗和閱讀方式;再有就是能耗和穩定性變得非常非常關鍵,如何流暢的展示複雜界面和大資料,如何有效控制由于資源問題而導緻的 crash,如何幫使用者省電,如何長時間使用還不會發燙,都變成了很重要的課題。總而言之,一個輸入,一個輸出,一個性能。

還有一個潛在的問題,就是無線端很多形态大家都還在一起摸索之中,這其中有很高的“試錯”成本,我們的産品經理甚至會在項目初期就主動坦承我們需要很多試錯,需要快速疊代。是以在無線端探索性質的東西非常多,遠遠多過桌面端。

電商這個話題其實挺大的,我隻說一些從個人技術角度看到的電商:就是 1 什麼地方都得能随時改,2 随時改

從電商平台的角度,我們無時無刻需要為使用者挑選和推薦更好更适合的選購資訊,比如有新品上架了,有商品降價了,有促銷活動了……它作為平台一定是自由的,資訊是充分流通的,是以也必須是非常靈活實時的。

再有就是電商是和真金白銀打交道的,這要求我們對技術方案的穩定性和準确性做非常嚴格的把控,對項目工程化有極高的要求,項目過程中的半點松懈都有可能對使用者産生極大的影響。

今天的移動端,大家基本都是通過各式各樣的 app 來完成自己的事情,而這些 app 都是 native 的,有必要的版本控制和釋出節奏。浏覽器的位置相對沒有那麼明顯,更多的充當了一個“快速降級”的角色,即如果我們沒有安裝 x (類) 應用,那麼當我需要使用 x 的時候,就用浏覽器打開一個 x 的網站。

既然大家的主戰場都是 native app 了,那基于上面我們對于無線和電商這兩個關鍵詞的分析和了解,如何在充分合理運用裝置的輸入輸出、并且能夠快速疊代、實時調整、還能把控性能和各方面風險,就變成了重中之重。

比如每年雙十一當天,整個天貓和淘寶的各條産品線都處在高度“敏感”的狀态,活動當天出現的任何一個狀況都可能産生非常重大的影響,需要我們可以靈活調整;在平時賣家和買家産生的任何資訊和資料,都希望可以最通暢的釋出出來。尤其是賣家,如何“裝修”好自己的店鋪,“打扮”好自己的寶貝資訊,“張羅”好自家的活動,都需要非常強的動态性做支撐。

先反觀今天的桌面端,浏覽器已經是絕對的主角了,我個人身為一個前端工程師算是親身經曆了浏覽器從默默無聞到變成桌面端第一使用時長的全過程。而今天的手機則是 native app 的天下。我覺得原因有很多,比如體驗、能耗、生态、入口等等,同時也是因為手機上的浏覽器需要順應很多颠覆式的變化并且在多個廠商之間尋求統一。

html5 其實在移動端一如既往的保有着它的跨平台和快速實作的優良特點,随着手機作業系統的不斷更新,越來越多的 html5 新特性有機會在實際産品中運用起來。但也一直有很多局限性。

比如提供的功能有限——這個問題目前很多地方都在通過 hybrid 方案來解決,把底層的能力或業務上的特殊需求封裝成 javascript api 暴露給 webview,進而讓 web 頁面可以通過 javascript 調到這些特性。相信任何團隊在這條路上經過一段時間,都已經把問題解決得差不多了。

第二個問題是性能問題,今天在移動端,裝置的性能,不論是從 cpu 還是記憶體還是電池都不能和桌面端同日而語,簡單的界面用起來是沒感覺的,一旦互動複雜或資料量達到一定程度,webview 的弊端還是比較明顯的。而且上述兩點都是比較絕對的,而由于性能和能力缺失而引發的上層技術方案的傾斜則會産生更多深遠的影響。比如二維碼掃描與識别、省市區地理位置選擇、包括一些複雜的動畫設計,這些問題都不是“前端能不能做”的問題,而是做出來效果好不好的問題,或“卡不卡”的問題。

在桌面端,浏覽器之是以能一統江湖,其實不隻要歸功于 w3c 和 html5,我們的浏覽器還有一位好朋友:那就是 adobe flash player plugin,它雖然不是标準的開放的,但是在後期有着驚人的使用者,對浏覽器的能力做了大範圍的擴充,而性能也是 native 級别的,這恰恰解決了我們上面提到的幾個問題——後期 adobe 還提供過 air 平台,可以完全甩開 web 開發桌面應用。而現在的移動端就沒有這麼好的“福利”了,遲遲沒有人站出來充當“移動端的 flash”的角色。

我所在的團隊一直在不斷思考和探索無線電商動态化這個問題。在這個過程中,我們看到了很多不錯的方案,也做了很多自己的嘗試

傳統 hybrid:基于嵌入 native app 的 webview,通過對 api 的擴充達到解決問題的目的,這個已經流行好一陣子了,無需多提

為 hybrid 引入 native 界面:我個人最早是在去年 qcon 北京聽 @王集鹄 大叔的分享,當時隻有安卓版本,大概做法是以類似 plugin 的方式把一塊 native 界面引入到 webview 當中,這樣在整體還是 webview 的情況下,可以局部達到特殊的 native 效果。随後在今年的 velocity 北京,也看到了一個類似的方案,這次 native 界面是“蓋在 webview 上”的,并随着 webview 滾動條做相應滾動,以保持界面的一緻效果。

weapp:這是我們無線事業部2年前開啟的一個項目,設計一套 json 格式,可以描述界面的結構和樣式,然後各端實作對這套 json 格式的解析和渲染。這樣我們隻要每次請求不一樣的 json 資料,就可以展示出不一樣的界面效果,和之前的 hybrid 方案不同的是,在 native app 裡我們的展示效果是 100% native 的,并且我們還做了 html5 版本的“降級”渲染方案,使用者在浏覽器裡同樣有機會借助我們的渲染方案把整個界面展示出來。

react native:這位老兄毫無疑問是今年全球最火熱的移動技術方案之一,界面是 100% 的 native,徹底颠覆了移動應用的技術棧和開發體驗。但最重要的是,它在運作時是用 javascript 進行控制的。這件事為我們打開了一個巨大的腦洞:一旦我可以線上釋出和加載 javascript 檔案,那也就意味着我具備了動态性的能力!于是乎出現了通過動态釋出 react native 代碼達到動态性目的的技術方案。

我們經過一系列的調研、思考和讨論之後,提出了一套完全針對無線電商動态化的技術方案。它同樣:

緻力于移動端

能夠充分排程 native 的能力

能夠充分解決和回避性能瓶頸

能夠靈活擴充

能夠多端統一

能夠優雅“降級”到 html5

能夠保持較低的開發成本

能夠快速疊代

能夠輕量實時釋出

能夠融入現有的 native 技術體系

能夠工程化管理和監控

我們覺得它并不是那種第一眼看上去很偉大的東西,但是它能夠幫我們解決幾乎所有實際業務中遇到的問題,是個非常務實的家夥。

我們甚至覺得這個方案裡面沒有什麼高深的東西,沒有颠覆式的新科技,但我們非常針對性的關注細節,并且在實際業務當中産生的效果卻是颠覆式的。

對無線電商動态化方案的思考(一)

更令人振奮的是,這套技術方案在今年的雙十一全球狂歡盛典中經受住了考驗,我們成功的支援了主會場的前期研發和當天的釋出即實時調整。這也讓我們更有勇氣和信心面對接下來的更多挑戰!

我給它起了一個酷酷的新名字:weex

關于 weex 我們有太多收獲想分享,今天先開個頭,談一談自己對無線電商動态化的淺見。

繼續閱讀