WebAPP在開發效率上與NativeApp相比有著天然的優勢，但是在體驗上卻有著較大的差距。移動互聯網時代如何實現優勢互補，將Native能力融入到WebAPP中，是業界一直在探討的話題。本期百度技術沙龍，加入百度已經6年的資深前端張袁煒為大家帶來了主題為《融入原生能力到WebApp》的技術分享，主要講解了Blend架構對于WebApp的優化問題。

據悉，本期百度技術沙龍是今年的***一期，作為國內最早的技術交流活動，百度技術沙龍即將迎來自己的第5個年頭，如今百度技術沙龍已經被北京甚至全國的技術愛好者視為不可或缺的技術學習家園。

[[125175]]

“在做Blend框架中我們會遇到許多問題。對于這些問題，我們的解決方案是降級和增強，這是兩個不同的設備或者是要匹配兩個不同的目標時，我們采用的方案。”張袁煒說。

Blend開源 用一整套方案使WebApp流暢起來

Blend其實是HybridApp的方案，張袁煒和他的團隊之所以要造它，是因為現有的HybridAPP方案在性能上解決不了問題，他們希望能夠有一個提高性能，有融合能力的HybridAPP解決方案。

在張袁煒看來，WebApp最大的優勢在于迭代速度。移動互聯網時代，以WebApp為主角的HTML5開發方案的迭代速度很快，它是隨時可以更新的，因為它每次用戶訪問，如果不走緩存，它就會到服務器上獲取最新的數據。而無論是安卓還是iOS的Native App一個發版的周期平均下來大概是十四天，這會嚴重影響迭代速度。

張袁煒表示：“天下武功唯快不破，大家知道移動互聯網時代，一個公司或者一個產品想要成功，有可能它的時間要求是天級別的。如果你一個產品晚上線一天機會就錯失了，也就是說我們要盡可能加快迭代速度。”

作為正在做的應用開發框架，Blend不僅僅是一項“拿來即用”的開源技術，更是一種開發理念。使用這個理念，App不僅能保留web靈活性，剔除冗長的版本發布過程，做到極快的迭代速度，還能在交互中保證足夠的流暢性。

這樣的實現結果說起來容易，可張袁煒團隊剛剛開始架構Blend時，著實費了一番功夫。他們首先針對WebApp的性能、能力、易用性三個大方面開始了整套架構方案的研發。在經歷了一段時間的摸索之后，張袁煒發現了一套比較合理的架構方案：在Web交互中，用原生的Web實現的時候，非常卡的東西用Native來實現，其他所有的交互和所有的開發都用純Web語言來降低開發成本。

這是張袁煒和他的團隊進行Blend開發時的基本思路，有了思路，那么應該怎么做這個架構?總的來說，Blend會支持三個平臺，一個是iOS，一個是安卓，還有一個就是瀏覽器。

在iOS或者是安卓端，張袁煒和他的團隊在上面開發一個Runtime，把原生的能力通過js的封裝，把它的接口暴露出來給上面的js或者是頁面調用同時，他們也開發了很多JsAPI給開發者使用。“首先是端能力，這個更像應用調起，你要調起微信或者是百度搜索，我們還具有本地文件的能力;第二個是云能力，這里面包括百度的服務，帳號的服務和支付;第三個是UI能力，我們有轉場動畫等等，還有手勢跟隨，還會用Native組件。”張袁煒介紹道。

打造原生應用體驗 Clouda+為直達號提供“引擎”

“Blend能在能保證用戶體驗的前提下節省人力成本，又有很高的定制性，迭代速度和web相當，對我們編程開發的幫助很大。”在現場的討論環節，一位聽眾表示。

在現場，張袁煒還為聽眾們列舉了不少案例。他介紹，開源的Blend技術糅合了WebApp和NativeApp各自的優勢，結合百度強大的云能力，可以為直達號和WebApp開發和部署提供有力支持。

作為Clouda+的重要做成部分，Blend為移動web應用開發提供了整體解決方案，最近火爆網絡的百度直達號正是因為有了Clouda+，才能做到用戶體驗極佳，體驗和交互媲美Native應用。

具體來說，Blend是一套JavaScript的API，將Native的端能力和百度的云服務融合(Blend)到WebApp中。

“Blend由BlendUI和BlendAPI兩部分組成。主要解決了webapp的兩大難題，UI交互不流暢和無法調用設備能力。”張袁煒解釋道。

BlendUI讓Javascript擁有操作Webview和Native控件的能力，讓web

移動端交互流暢，體驗無異于NativeApp。BlendAPI則讓WebApp擁有移動設備的原生能力和百度云服務能力。