跨端組件實踐 - 移動時代的前端

作者：佚名 2014-05-26 16:52:29

移動開發

本文為百度前端研發部資深工程師王集鵠在2014 Qcon北京大會上所做的分享，文章分析了移動前端所面臨的變化和問題，并且提出了跨端組件的解決方案，能夠解決跨平臺的前端UI適配問題。

背景

***不變的就是變化

從業十多年，互聯網的變化非常大：最初使用的電腦只有 8M 內存、32M 硬盤，現在口袋里裝的手機已經是 2G 內存、16G 閃存，網絡也從 56K 變成了 1.5M+。這個時代的人是幸福的……

這個期間也見證了 Web 時代的繁榮，從 C/S 走到 B/S。

現在無論是郵件、購物還是游戲、社交、工作等等，在電腦上都能找到滿意的 Web 應用或站點。

購物：淘寶、京東、當當、蘇寧易購 @民工精髓V

社交：貼吧、微博

游戲：各種頁游、我常玩的是 Web 紅警

辦公：腦圖、流程圖、日程安排、Github、郵件

可是這種景象在移動時代并沒有看到。

現場小調查：請問你在手機上和 PC 上用什么方式刷微博？

大部分的人不會在 PC 上用客戶端刷微博

大部分的人不會在手機上用瀏覽器刷微博

結論符合預期，先從變化上分析問題

移動互聯網發生了什么變化？

屏幕更小

顯示區更寶貴，廣告區更難擺放
頁面布局更講究，內容主次更為重要

隨身攜帶

24 小時待機
根據地理位置提供更精準的服務

觸摸操作

雙手很難并行
虛擬鍵盤沒有物理鍵盤便捷

更豐富的內置設備

前后置攝像頭 / 閃關燈
麥克風 / 揚聲器
振動器，靜音狀態也可以知道有消息到達
電子指南針 / 陀螺儀
藍牙 / WiFi / NFC

離線使用場景

在沒有信號
資費不足

沒有持久能源

電池需要充電
計算能力和待機時間沖突

設備碎片化 * 特別是 Android 各種屏幕尺寸、各種 ROM

移動互聯網的變化帶來了新的機遇和挑戰

機遇

移動市場高速增長

艾瑞咨詢數據顯示，2013 年中國移動互聯網市場規模達到 1059.8 億元，同比增速 81.2%，預計到 2017 年，市場規模將增長約 4.5 倍，接近 6000 億。移動互聯正在深刻影響人們的日常生活，移動互聯網市場進入高速發展通道。【查看來源】

挑戰

HTML5 / CSS3 技術在移動端受限

What stops developers from using HTML5？【查看來源】

性能測試

為什么開發者不選擇 HTML5 構建移動應用？前三個原因是：

性能問題，流暢度與 Native 差距較大

硬件接口缺失，不能控制藍牙、閃關燈、振動、WiFi、NFC 等等

難以集成本地元素，不能使用桌面圖標、訂閱推送等

這是我們用主流的機型做的性能測試

性能測試

不難看出 Native 和 Web 的性能依舊差距很大，包括主流韓國和國產機型。

人眼刷新率平均是 24 幀 / 秒，低于這個值用戶就會感覺到跳幀。

當然這些問題在 PC 時代也碰到過！那時是怎么解決的？

影響前端的技術

通過瀏覽器擴展本地能力

使用 ActiveX / NPAPI 技術
最經典的插件就是 Flash，雖然它已經淡出了移動時代

JavaScript Engine 進化

V8 出現后，JavaScript 的性能提升了數倍
結合高性能的引擎 NodeJS 也使 JavaScript 在后端獲得了新生

HTML5 / CSS3

擴展了本地能力，如地理定位、錄音錄像、本地存儲等

但這些影響在移動端是有限的

移動時代前端的現狀

Flash 不能使用

Adobe 將停止開發移動版 Flash

NPAPI 即將退役

Google 今年開始屏蔽 NPAPI 插件【查看來源】

Google 網絡商店不會再接受任何包含基于 NPAPI 插件的新應用或拓展。

對于需要 NPAPI 替代品的開發者，Google 推薦轉向 NaCl、Apps、原生消息 API 和舊版瀏覽器支持。

瀏覽器插件可以擴展本地能力的同時，也會帶來穩定性和安全性的問題。

怎么解決性能瓶頸和本地能力缺失的問題？

JS Binding，通過 JavaScript 直接調用 Native API

從 iOS7 開始，可以使用 JavaScriptCore 接口
常見的框架和技術
- Cocos2D
- Ejecta
- CoconJS
- Node.app

JS Translate，通過編譯器將 JavaScript 翻譯成 Native 語言

如號稱上帝語言的 haXe 可以翻譯成 Java、JavaScript、C++、PHP 的語言

Native App，直接使用 Native 技術，從頭再來

廣義的前端就是要面向用戶界面和交互
前端技術也有向全端和全棧的發展趨勢

選擇手游創業的 @大城小胖近期做了一個教學視頻，專門介紹 JSBinding 大家可以參考：When iOS loves JS

PC 時代 JSBinding 可以用 MSScriptControl

以上技術可以解決問題，但不能發揮 Web 自然跨端、迭代方便（不同等待漫長的上架時間）的優勢

我們還得尋找一些適合自己的方案。

Hybrid 混合應用方案

本地服務，網頁通過 HTTP / WebSocket 與本地服務通信，使用本地能力

本地服務

在 Android 里寫一個不難，參考 NanoHttpd DIY 一個移動版的 HTTP 服務
- 優勢：能夠無縫兼容所有瀏覽器
- 劣勢：通信容易被嗅探和偽造；很難利用 UI 組件

加殼，這是最常用的技術

有較成熟的框架可以使用，如：Cordova
通過使用和擴展插件，獲得本地能力

Google 也有投入 Cordova 的項目 Chrome apps on Android and iOS

本地服務和加殼方式，都能訪問本地能力。但后者本地能力在同一個進程里調度，安全性和便利性相對要高。

回到主題，什么是跨端組件？

自動響應端能力的組件

跨端組件示意

受到響應式網頁設計理念的啟發，界面布局可以根據運行環境自動響應和調整，那么本地能力也可以這樣
如在普通瀏覽器里使用 HTML5 / CSS3 構造組件，在提供本地能力的環境里使用 Native View 構造組件。
在提供本地能力的環境里，界面會更流暢；在沒有本地能力的環境里應用是完整的。

跨端組件解決的問題：

滿足 UI 需要局部流暢的需求
滿足運行在各種環境的需求

特點

同一套 API
更好地使用運行環境提供的能力

PC 時代也有這樣的組件，如：Raphaël 一款矢量圖組件，在具 VML 的環境里使用 VML，其他環境里使用 SVG，并保持同一套 API。發散一想：jQuery、WebUploader（適配 Flash 和 HTML5）也都是自動響應各種運行環境。

成本總是伴隨著收益，解決老問題就會帶來新的問題

當頁面發生滾動時，Native View 怎么和網頁元素一起滾動？還有 Reflow 時怎么調整 Native View 的位置?

UI 融合的問題

滾動的問題在 Android 中處理比較方便。因為 WebView 繼承至：ViewGroup / AbsoluteLayout，我們只需要將 WebView 作為 Native View 的容器就可以搞定這個問題。

Reflow 發生的頻率不高，就用了定時器這種簡單粗暴的方法。

#p#

跨端組件研發的步驟

確定需求

哪些組件適合做跨端組件？

計算量大，需要流暢

圖冊瀏覽
地圖
多媒體播放器
3D渲染
圖像識別，二維碼識別、手勢識別

減少操作步驟，省去授權

錄像、錄音

HTML5能力增強

地理定位增強，結合 WiFi
Canvas 性能增強（參考：FastCanvas）

開發環境

Android / ANT、iOS 環境搭建
安裝 NPM
安裝 Cordova 參考：命令行文檔

天朝的網絡大家知道的，主要找一些代理和鏡像

設計 API

發現很多前端團隊都開始使用和關注 Web Components

在跨端組件的落地上，我們也選擇這種方式來提供 API，原因是：

降低學習成本，保留原生 Web 組件的使用方式
降低業務代碼維護工作

目前移動端原生還不支持這個標準，還得選用框架適配，如：Polymer

跨端組件 HTML5 示例代碼：

<body> 
    <div id="mapBox"> 
        <light-map width="350" height="400" center="116.404,39.915" zoom="11"></light-map> 
    </div> 
</body>

將組件的HTML部分放到需要顯示的位置，然后就和普通的Element一樣使用：

var lightMap = document.querySelector('light-map'); 可以通過 DOM 樹操作
lightMap.addEventLister() 添加事件
lightMap.setAttribute()、lightMap.getAttribute() 設置屬性

組件開發

Cordova Plugin 開發

plugin.xml 配置需要的權限、JavaScript 命名空間、文件對應的工程目錄等待。細節請參考官方文檔

<?xml version="1.0" encoding="UTF-8"?> 
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" 
      id="com.baidu.light.flashlight" 
      version="0.2.7"> 
    <name>Flashlight</name> 
    <description>Cordova Flashlight Plugin</description> 
    <license>Apache 2.0</license> 
    <keywords>cordova,battery</keywords> 
    <repo>https://github.com/zswang/light-flashlight.git</repo> 
    <issue>https://github.com/zswang/light-flashlight/issue</issue> 
 
    <js-module src="www/flashlight.js" name="flashlight"> 
        <clobbers target="light.flashlight" /> 
    </js-module> 
    <!-- android --> 
    <platform name="android"> 
        <config-file target="res/xml/config.xml" parent="/*"> 
            <feature name="Flashlight" > 
                <param name="android-package" value="com.baidu.light.flashlight.Flashlight"/> 
            </feature> 
        </config-file> 
 
        <config-file target="AndroidManifest.xml" parent="/*"> 
            <uses-permission android:name="android.permission.CAMERA" /> 
            <uses-permission android:name="android.permission.FLASHLIGHT" /> 
        </config-file> 
 
        <source-file src="src/android/Flashlight.java" target-dir="src/com/baidu/light/flashlight" /> 
    </platform> 
</plugin>

我就自己寫一個閃光燈插件實現非常簡單，供大家參考

JavaScript 關鍵部分

var cordova = require('cordova'), 
    exec = require('cordova/exec'); 
 
var flashlight = flashlight || {}; 
 
function torch(successCallback, errorCallback) { 
    exec(successCallback, errorCallback, 'Flashlight', 'torch', []); // 調用 Native 的提供的方法，指定回調、Native 對應的類名和動作 
}; 
 
flashlight.torch = torch; 
module.exports = flashlight;

Android 關鍵部分

public class Flashlight extends CordovaPlugin { 
    private Camera mCamera; 
    public boolean execute(String action, JSONArray args, 
            CallbackContext callbackContext) throws JSONException { 
        if (mCamera == null) { 
            mCamera = Camera.open(); 
        } 
        if ("torch".equals(action)) { // 打開手電的動作 
            Parameters parameters = mCamera.getParameters(); 
            parameters.setFlashMode(Parameters.FLASH_MODE_TORCH); 
            mCamera.setParameters(parameters);  
            callbackContext.success(null); // 回調 JavaScript 
        } else { 
            return false; 
        } 
        return true; 
    } 
}

百度地圖提供了 Android、JS、iOS 三個版本，正好適合用來做地圖跨端組件

地圖跨度組件 Cordova Plugin JavaScript 部分

var cordova = require('cordova'), 
    exec = require('cordova/exec'); 
 
var baidumap = baidumap || {}; 
 
/** 
 * 初始化 
 * @param{Object} options 配置項，顯示位置 
 * @param{Function} callback 回調 
 */ 
function init(options, callback) { 
    exec(callback, function() { 
    }, 'BaiduMap', 'init', [options]); 
}; 
 
baidumap.init = init; 
 
module.exports = baidumap;

地圖跨度組件 Cordova Plugin Android 部分

public class BaiduMap extends CordovaPlugin { 
    private CallbackContext mCallbackContext = null; 
 
    @SuppressWarnings("unchecked") 
    public boolean execute(String action, JSONArray args, 
            CallbackContext callbackContext) throws JSONException { 
        if ("init".equals(action)) { 
            if (args == null) { 
                return false; 
            } 
 
            JSONObject params = args.optJSONObject(0); 
            JSONArray center = params.optJSONArray("center"); 
            // Native View 在頁面中的顯示區域 
            int left = params.optInt("left"); 
            int top = params.optInt("top"); 
            int width = params.optInt("width"); 
            int height = params.optInt("height"); 
            String guid = params.optString("id"); 
            int zoom = params.optInt("zoom"); 
            createMap(guid, left, top, width, height, 
                    (float) center.optDouble(0), (float) center.optDouble(1), 
                    zoom); 
            mCallbackContext = callbackContext; 
 
        } 
        return true; 
    } 
 
    private static Handler mHandler = new Handler(Looper.getMainLooper()); 
    private static Hashtable<String, MapView> mMaps = new Hashtable<String, MapView>(); 
 
    public void initialize(CordovaInterface cordova, CordovaWebView webView) { 
        super.initialize(cordova, webView); 
        // 初始化百度地圖 Android 版本 
        BMapManager baiduMapManager = new BMapManager(webView.getContext() 
                .getApplicationContext()); 
        baiduMapManager.init(new MKGeneralListener() { 
            @Override 
            public void onGetNetworkState(int state) { 
            } 
 
            @Override 
            public void onGetPermissionState(int state) { 
            } 
        }); 
    } 
 
    public void createMap(String guid, int left, int top, int width, 
            int height, float lng, float lat, int zoom) { 
        mHandler.post(new Runnable() { // 注意 JavaScript 調用 Native 會在子線程，如果操作 UI 需放到 主線程中 
            private String mGuid; 
            private int mLeft; 
            private int mTop; 
            private int mWidth; 
            private int mHeight; 
            private float mLng; 
            private float mLat; 
            private int mZoom; 
 
            public Runnable config(String guid, int left, int top, int width, 
                    int height, float lng, float lat, int zoom) { 
                mGuid = guid; 
                mLeft = left; 
                mTop = top; 
                mHeight = height; 
                mWidth = width; 
                mLng = lng; 
                mLat = lat; 
                mZoom = zoom; 
                return this; 
            } 
 
            @SuppressWarnings("deprecation") 
            @Override 
            public void run() { 
                MapView mapView = new MapView(BaiduMap.this.webView 
                        .getContext()); 
                MapController mapController = mapView.getController(); 
                GeoPoint point = new GeoPoint((int) (mLat * 1E6), 
                        (int) (mLng * 1E6)); 
                mapController.setCenter(point); 
                mapController.setZoom(mZoom); 
 
                float scale = BaiduMap.this.webView.getScale(); 
 
                LayoutParams params = new LayoutParams((int) (mWidth * scale), 
                        (int) (mHeight * scale), (int) (mLeft * scale), 
                        (int) (mTop * scale)); 
                mapView.setLayoutParams(params); 
                BaiduMap.this.webView.addView(mapView); // 大家注意這一句，將 Native View 添加在 WebView 上，自然就響應頁面滾動 
 
                mMaps.put(mGuid, mapView); 
            } 
 
        }.config(guid, left, top, width, height, lng, lat, zoom)); 
    } 
}

Web Component，注意適配 runtime 環境

void function() { 
    var instances = {}; 
    var guid = 0; 
 
    var LightMapPrototype = Object.create(HTMLDivElement.prototype); 
    LightMapPrototype.createdCallback = function() { 
        var self = this; 
        var div = document.createElement('div'); 
        var zoom = 11; 
        var center = [ 116.404, 39.915 ]; 
        this.setZoom = function(value) { 
            zoom = value; 
            map.setZoom(zoom); 
        }; 
        this.setCenter = function(value) { 
            center = String(value).split(','); 
            map.setCenter(new BMap.Point(center[0], center[1])); 
        }; 
 
        div.style.width = (this.getAttribute('width') || '300') + 'px'; 
        div.style.height = (this.getAttribute('height') || '300') + 'px'; 
        this.appendChild(div); 
 
        // 判斷當前的運行環境 
        var runtime = (typeof cordova != 'undefined') 
                && (typeof light != 'undefined') // 有可能插件沒有安裝或者當前版本不支持 
                && (typeof light.map != 'undefined') ? 'cordova' : 'browser'; 
 
        var map; 
        switch (runtime) { 
        case 'cordova': 
            var obj = div.getBoundingClientRect() 
            light.map.init({ 
                guid : guid, 
                center : center, 
                zoom : zoom, 
                left : obj.left + window.pageXOffset, 
                top : obj.top + window.pageYOffset, 
                width : Math.round(obj.width), 
                height : Math.round(obj.height) 
            }); 
 
            instances[guid] = this; 
            guid++; 
            break; 
        case 'browser': 
            map = new BMap.Map(div); // 創建Map實例 
            map.enableScrollWheelZoom(); // 啟用滾輪放大縮小 
            map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 
            map.addControl(new BMap.OverviewMapControl()); // 添加縮略地圖控件 
            map.centerAndZoom(new BMap.Point(center[0], center[1]), zoom); // 初始化地圖,設置中心點坐標和地圖級別 
 
            map.addEventListener('moveend', function() { 
                var value = map.getCenter(); 
                center = [ value.lng, value.lat ]; 
                self.setAttribute('center', center); 
                var e = document.createEvent('Event'); 
                e.initEvent('moveend', true, true); 
                self.dispatchEvent(e); 
            }); 
            map.addEventListener('zoomend', function() { 
                var value = map.getZoom(); 
                zoom = value; 
                self.setAttribute('zoom', zoom); 
                var e = document.createEvent('Event'); 
                e.initEvent('zoomend', true, true); 
                self.dispatchEvent(e); 
            }); 
 
            break; 
        } 
        this.map = map; 
    }; 
    LightMapPrototype.attributeChangedCallback = function(attributeName, 
            oldValue, newValue) { 
        var self = this; 
        switch (attributeName) { 
        case 'center': 
            self.setCenter(newValue); 
            break; 
        case 'zoom': 
            self.setZoom(newValue); 
            break; 
        default: 
            return false; 
        } 
        return true; 
    }; 
    document.registerElement = document.registerElement || document.register; 
    function init() { 
        var LightMap = document.registerElement('light-map', { 
            prototype : LightMapPrototype 
        }); 
    } 
    if (typeof cordova != 'undefined') { 
        document.addEventListener('deviceready', init, false); // 等待設備初始化完成 
    } else { 
        init(); 
    } 
}();