移動Web富應用框架RAIS釋出

rainy發表於2017-04-25
原文網址 : https://flycode.co/archives/112582
Web框架AI

先看看RAIS能做什麼

簡介

RAIS是專注移動端的Web富應用解決方案，它提供開發Rich Web App的MVVM框架、基礎元件、編譯工具、除錯外掛等全鏈路開發工具，幫助開發者快速高效構建具備優秀互動體驗的Web應用。
更多資訊請參見官網 http://rais.tmall.net

為什麼？

從hybrid模式興起到現在已有數年，依託海量的Web開發者群體與PC時代積累的基礎設施，Web在移動端的佔比大幅攀升。但在使用者體驗要求越來越高的今天，Web頁面的體驗瓶頸也愈發明顯：

開啟速度慢。以高度動態化為核心的設計思想在今天的高速網路環境下反而拖累了載入速度，僅僅載入一個頁面的基礎UI部分就需要10-20個網路請求，並且悲催的是部分資源是需要順序執行的，這在爭分奪秒，哦不，爭秒奪毫秒的移動端上顯然水土不服，雖然通過各種快取策略得以緩解，但是由於需要保證資源載入時序，“單點故障”效應仍然是拖累載入速度的最大殺手。天貓H5頁面平均秒開率在iPhone 65%(均值1200ms)，Android 35%(均值2000ms)左右，這讓“H5頁面開啟慢”的標籤難以撕掉。

互動瓶頸。Web核心在移動端互動層面的支援遠不及Native UI，這導致在下拉重新整理、切頁動畫、多頁狀態保持、頁面滾動等等互動體驗上與Native UI有明顯差異，所以大多數人選擇在Native中實現檢視功能和瀏覽鏈路，而在Web內實現單個頁面的UI元素，這使得每個頁面切換都需要重新載入頁面，聞起來還保持的上世紀PC頁面的氣息。

體系化框架缺失。在今天崇尚簡單快速操作的移動端，缺乏體系化的元件框架和開發工具，多數開發者在開啟一個專案前，往往要糾結於技術選型，而最終只能選擇用零散的元件拼湊頁面。

我問過不少同學，如何區分H5頁面與Native頁面？得到的答案五花八門，比如：“頁面佈局不穩定，從上往下載入的是H5”、“滾動沒停止時圖片出不來的是H5”等等，當然最多的答案還是“開啟要白屏一兩秒鐘的是H5”

所以RAIS的初衷，正是解決移動Web的互動體驗和全鏈路開發體驗問題。

而近兩年站在風口的React Native以及我們自己的WEEX，與其說給Web端開發者帶來了希望，倒不如說，NativeUI+WebDSL的興起讓我們看到了他們對移動端H5的絕望。好，那麼問題來了，我們為什麼要死磕H5呢？

我們認為，Web的優勢在於高度動態化、靈活的UI模型以及海量的開發者群體。如果用一句話來概括WebUI的靈活性，那就是“沒有什麼UI佈局是一個 position:absolute 搞不定的，如果有，那就兩個”。當然，這是句玩笑話。NativeUI+WebDSL的硬傷在於任何WebDSL終究無法還原真正的WebUI模型，這使得其開發效率要追趕H5，尚需些時日。而Web標準是所有Web開發者多年達成的共識，短時間內難以被新標準取代。 而今天移動端Web的窘境，是我們還遠沒有做好。許多人相信“H5是終局”，但是要“再等等”，那句話叫什麼來的？“幸福不會從天降，共產主義等不來”（原諒我抄了這麼low的slogan）。而且，在手機硬體更新換代遠快於PC的年代，我們相信在一兩年內，將會是移動Web的大時代。回想當年PC，BS大規模替代CS的時代，又用了幾年呢？

另外，Apple對除自身的 built-in webkit 外的動態SDK的態度比較曖昧，2017.3.8 發出的大量開發者警告可見一斑。

RAIS是如何解決這些問題的？

體驗瓶頸突破與基礎元件封裝

開啟速度。RAIS會將資源打包，將程式碼請求減少到1個（使用預載入情況下則無請求）；首屏通過資料配置實現優先渲染。一般使用者從看到介面到手指滑動介面通常在1.5s以上，極端情況也至少需要800ms，因此在首屏展示至使用者操作間，可以讓使用者在無感知間完成二次渲染。RAIS目前的線上頁面iPhone秒開率達到93%（均值430ms），Android秒開率達到82%（均值860ms）。
滾動阻塞。在UC3核心和iOS的UIWebView中存在使用滾動頁面時，JavaScript停止執行的問題，導致在滾動期間的懶載入圖片以及節點回收等無法執行。RAIS提供了ScrollView元件解決此問題，並保證較好的效能。
下拉重新整理。基於ScrollView的實現，純Web的下拉重新整理也成為可能，RAIS提供了pulldown-scrollview以支援下拉重新整理操作。
長列表實時回收。RAIS提供ListView元件，以支援長列表實時進行UI物件回收，在ListView裡可以看到載入10000條資料流暢滾動的例子。
曝光事件。RAIS提供appearance模組，以支援元素曝光/隱藏時的事件派發

MVVM與高效能

RAIS提供了MVVM的App框架，並在內建的directive提供了針對移動端模式的效能優化方案。比如在 repeat directive 中，提供了from x to x功能，開發者可以更改顯示範圍，repeat directive 能夠以最佳複用率複用UI物件，ListView就是基於此功能實現的。

ListView 10000條資料渲染效果

多頁應用

RAIS可構建高效能的單檢視應用，也提供了多檢視和路由系統，提供可自定義切頁動畫的檢視切換。同時，支援檢視快取，可在路由中配置當前檢視在下次訪問時使用上次的快取物件還是重新渲染。使用快取檢視可保持上次一操作的狀態，比如上一次列表滑動的位置。

更多特性可以移步官網 http://rais.tmall.net 檢視。

RAIS提供哪些框架和工具？

  1. RAIS框架 & 移動端基礎元件庫
  2. 編譯器 & 工程腳手架 & 周邊工具和Chrome開發外掛
  3. RAIS 模組貢獻機制 & 最佳實踐


RAIS Chrome 除錯外掛

自己試試？

請移步這裡 http://rais.tmall.net/guide/rais/quickStart/ 快速搭建一個RAIS App

目前已知的問題和解決方案

  1. Android低端機在U3核心下滾動有卡頓現象，預計3月中旬支援在U4及Chrome核心上使用native-scroller
  2. 暫不支援橫劃手勢返回，預計在3月中旬支援
  3. 在Chrome56上除錯時，滾動Scrollview時會有警告。此為Chrome在56版本中的更新修改的特性，預計在3月中旬修復

最後

對WebApp方向有興趣的同學歡迎隨時向我們吐槽、建議、貢獻、合作。
RAIS框架 http://gitlab.alibaba-inc.com/groups/rais
移動元件庫 http://gitlab.alibaba-inc.com/groups/rais-mobile


相關文章