百度技術沙龍第 57 期 新時代的前端

本文做者：HelloDeveloper

2014 年 12 月 21 日，在由百度主辦、InfoQ 負責策劃組織和實施的第 57 期百度技術沙龍活動上，百度移動雲事業部資深研發工程師張袁煒分享瞭如何將原生能力融入到 WebApp 中，獨立開發者郭宇分享了 Node.js 的應用場景和存在的問題。本文將對這兩個分享作一下簡單的回顧，同時提供相關資料的下載。

 

主題一：Blend：融入原生能力到 WebApp（下載講稿）

 

爲何選擇 WebApp 做爲開發方案呢？首先，天下武功，惟快不破。WebApp 能夠隨時更新，而一個原生 App 的更新週期大概在 14 天左右。其次，WebApp 的開發成本低，用原來的網頁開發人員寫一個移動端跑的網頁便可，不用組建新的開發團隊。

 

性能是 WebApp 的軟肋。另外，WebApp 缺少端能力，不能適應複雜的應用場景。好比，不能說打開瀏覽器掃描下二維碼。

 

若是有一種解決方案，可以融合 Web 的靈活性（包括迭代速度和開發成本）和原生的能力，再加上一些原生能力，這是很是不錯的。這就是 HybridApp 解決方案。

 

業內目前已經有一些方案。好比 Phonegap，它支持的平臺很全面。可是全平臺支持的代價是，API 數量不足。還有一個缺點是性能低下，沒有對交互和用戶體驗作優化，致使體驗不好。

 

再好比 Titanium，能夠編譯成原生應用運行，可是學習成本高，要學習它的 API 和架構；系統比較複雜，使用人數也不多，大概在整個市場份額裏面只有 5% 不到。

 

業內認知度比較高的 HybridApp 方案，因爲存在很多問題，因此百度的開發團隊但願造一個不同的輪子——但願提供一個提升性能、有融合能力的 HybridApp 解決方案，這就是 Blend。

 

Blend 的目標有三：

 

性能 

又包括三個方面，一是轉場動畫，讓它實現比較好的效果，跟原生 App 相似；二是離線緩存，避免在沒有 WIFI 或沒有網絡的時候打開緩慢或報錯；三是以原生方式提供一些組件，方便用戶。

能力 

好比說端能力，把它包裝出來在 WebAPP 上面使用。再就是雲能力，把百度的雲服務封裝成 API 開放給 WebApp。第三個是 UI 能力，好比說要作轉場動畫，在 WebApp 上面很難作到，必須用原生支持。

易用性 

由於這至關於要求開發者徹底拋棄掉以前的開發理念，而後從新接受一套全新的東西，這會致使推廣很難，並且開發者學習起來成本也很高。因此 Blend 在易用性上有幾個目標：一是漸進加強，好比有一個純 WebApp，如今想把它弄成一個交互性更好的原生 App，只須要加一行配置或者是用某種方式去告訴框架。API 能簡化就簡化配置，在易用性上作了 Meta 擴展。另外就是推出一整套框架，讓你們用的時候，只須要寫本身的邏輯代碼就能夠了。

有了設計目標，回到關鍵點，性能、轉場動畫到底怎麼實現。

 

張袁煒以百度文庫的 WebApp 爲例，介紹了轉場動畫的實現。剛纔說了咱們要解決的是剛纔當 Blend 發現用戶點擊頁面中某個連接，這個頁面即將被刷新時，就去初始化 WebView，而且把它放在當前 View 的右邊，遮住下面的層。其實裏面的內容全都是 Web 的，可是轉場的效果和動畫是用純原生方式來實現的。

 

在 Web 交互中，很是卡的東西用原生方式實現，其餘全部的交互和開發用純 Web 語言來下降開發成本。

 

接下來張袁煒介紹了開發 Blend 的過程當中遇到的問題，以及相應的解決方案和思路。

 

首先是優雅降級和漸進加強。優雅降級，意思是作一個最強的方案出來，而後針對差一點的手機作一個降級的方案。漸進加強是針對最基礎的環境來作，而後再在更高級的瀏覽器上提升的交互性能。

 

Blend 提供了一整套一站式服務，裏面有不少組件，方便開發者使用。設計 API 的一個思路就是「簡單就是美」。由於不少現有的框架很重，或者功能很強大，可是要學習可能就得花十天半個月，這樣的框架可能叫好不叫座，因此要考慮簡化開發者的學習成本。

Blend 的架構以下圖所示：

從下往上來看，Blend 會支持三個平臺，一個是 iOS，一個是 Android，還有一個就是純的瀏覽器。首先說 iOS 或者 Android，能夠在上面開發一個 Runtime，把原生的能力經過 js 的封裝，把它的接口暴露出來給上面的 js 或者是頁面調用。這是 Native 層，是用原生代碼開發的。上面是 JsAPI，這一層提供了不少能力和不少交互組件供開發者使用。再上面就是 HTML API。

主題二：Node.js As Infrastructure——談談 Node.js

Node.js 的成長速度很是驚人，並且受到普遍的技術市場的承認，同時在國內外的公司也獲得了普遍的應用。

郭宇結合本身的經驗，介紹了 Node.js 的優點：

• 先後端統一的設計提高代碼複用度
• 衆多的開源模塊下降開發成本
• 支持高 IO Web 服務成本低
• JavaScript 程序員仍是蠻多
• 部署簡單方便，版本與環境可控
• 處於升溫狀態的市場，廣受支持

但 Node.js 也有一些劣勢：

• 編程模型複雜
• 異步流程控制繁瑣
• Error Handle 成本高
• 優秀的 JavaScript 程序員不多
• 不適用於計算密集型應用
• 社區規範、API 變更頻繁

以後郭宇分享了本身的一些經驗：

• 若是你的團隊成員小於 3 人，用！
• 若是你的產品在起步階段（A 輪前），用！
• 若是你有 1 位以上優秀的 JS 程序員，用！
• 若是生產環境主要用其餘語言，不要嘗試遷移
• 放心的使用 Node.js 編寫內部系統
• 在熟悉以前，別讓前端工程師觸碰業務邏輯

原文連接地址：https://developer.baidu.com/topic/show/290167