解密國內BAT等大廠前端技術體系-騰訊篇（長文建議收藏）

奶爸碼農發表於2019-11-04

1 引言

為了瞭解當前前端的發展趨勢，讓我們從國內各大網際網路大廠開始，瞭解他們的最新動態和未來規劃。這是解密大廠前端技術體系的第三篇，前兩篇已經講述了阿里和百度在前端技術這幾年的技術發展。這一篇從騰訊講起。

2 騰訊團隊介紹

2018年9月30日，騰訊宣佈正式啟動新一輪戰略升級，優化組織架構，將原有的七大事業群拆分重組，在保留原有四個事業群的基礎上新增平臺與內容事業群和雲與智慧產業群。

平臺與內容事業群（PCG）成立後，把過去散落在QQ、QQ瀏覽器等不同產品中的團隊聚集到一起。騰訊是希望，5G時代到來的時候，它們在內容流方面成為國內的重要媒體。全新的平臺與內容事業群（PCG）成立，騰訊業務最多、規模最大的部門誕生了。涵蓋新聞、長短視訊、影業、動漫、資訊流、社交平臺各級管理幹部和產品業務，來自於原先四個不同的事業群，員工數量超過一萬人。

雲與智慧產業事業群（CSIG）的主要部分，脫胎於原SNG旗下的騰訊雲業務，也包括原SNG的音視訊團隊、優圖AI實驗室團隊，另外還併入了原CDG的智慧零售、原MIG的地圖、安全、孵化器的網際網路+業務。這是騰訊成立20年曆史上，第一次出現完全TO B的大業務單元。騰訊把TO B業務提升到了一個前所未有的戰略高度。原本分散在各個事業群下面的TO B業務，獲得了一個統一的介面，將以更加聚合、更加高效的方式為企業客戶提供服務。

介紹完騰訊的組織架構後，下面重點介紹一下騰訊前端的技術團隊情況：

AlloyTeam

騰訊 Web 前端團隊 - Alloy Team 來自於騰訊 SNG(社交網路事業群)，源於 2008 年成立的騰訊 WebQQ 團隊，於 2011 年 10.24 正式對公司外以< 騰訊 AlloyTeam> 為團隊名稱進行對外交流，AlloyTeam 的寓意是：像合金一樣將各種技術，以及各個成員的聰明才智聚合在一起，從而產生更強的合金特性，未來我們也希望通過聚合業界的各大前端牛人，來共同推動 Web 前端技術在中國的發展！我們致力於 Web 前端技術的研究，熱衷 HTML5、移動 Web 技術，用最酷的新技術開發各種有趣的開源專案。

Alloy Team在業界具有非常高的知名度，在開源社群也是非常活躍，一些熱門的專案有：wepy - 小程式元件化框架，omi - 前端跨平臺框架，weui - 微信風格UI元件庫等等。

IVWeb

IVWEB團隊是騰訊專業的前端團隊，我們的口號是“卓越Web，全棧研發”。主要負責騰訊移動直播產品NOW直播、花樣直播、花樣交友、手Q附近等騰訊直播平臺研發工作。團隊注重社群建設和對外交流分享，目前對外開源專案有：Feflow和Aegis。

除了開源專案以外，IVWEB團隊還組織了TLC騰訊Live開發者大會，目前已經是第三年了，會議內容涵蓋跨平臺、小程式開發實踐、服務端Node/Serverless、監控等等主題，在業內已經頗具影響力。

CDC

騰訊CDC，全稱“騰訊使用者研究與體驗設計部（Customer Research & User Experience Design Center）”，2003年開始組建，正式成立於2006年5月，是騰訊公司級的設計團隊，分佈深圳、北京、成都三地，致力於提升騰訊產品的使用者體驗，探索網際網路生態體驗創新。

CDC經歷過騰訊重大產品的體驗設計，如QQ、QQ空間、QQ遊戲、RTX 、QQ電腦管家、QQ瀏覽器、QQ音樂、騰訊視訊、開放平臺、企業QQ、騰訊網、財付通、騰訊微博、朋友網、騰訊地圖、QQ拼音、SOSO、拍拍、騰訊WE大會、微眾銀行、米大師、企業雲、安全雲、AI LAB、微保、騰訊公益、數字廣東等，以及更多概念產品的孵化。

TGideas

TGideas隸屬於騰訊互動娛樂旗下，專注IP內容力構建與發展，是集產品內容開發，內容營銷，IP商業化擴充，體驗設計等能力為一體的中臺設計團隊。成員由資深創意人，內容創作者，視覺設計師，概念藝術家，技術工程師，內容營銷策劃，內容商務等成員組成。

這個團隊在創意設計方面有非常深厚的功力，有不少關於影像、影視方面的創作。同時在技術方面，他們也開源了例如適用於移動端的Motion元件庫、移動端Mocha-UI元件庫、字型壓縮Font Spide等等。

下圖是騰訊前端技術體系的全景圖，涵蓋基礎設施、服務層、跨平臺框架、UI元件庫、小程式以及工程化等方面：

3 基礎設施

依託於騰訊雲服務的能力，騰訊沉澱了強大的基礎設施能力，這裡只摘取了一小部分和前端技術體系相關的服務。

CDN作為靜態資源分發已經得到廣泛運用，對於使用者體驗的提升有極大的作用。騰訊雲除了在全網有著快速、穩定、智慧、安全的內容加速服務，還能夠支援海外加速、全球應用加速等能力，對於全球化應用可以起到很好的幫助。

Serverless作為無伺服器的技術服務現在已經成為了各大雲廠商的標配，雲函式 SCF 是騰訊云為企業和廣大開發者們提供的無伺服器執行環境，您無需購買和管理伺服器，而只需使用平臺支援的語言編寫核心程式碼並設定程式碼執行的條件，程式碼即可在騰訊雲基礎設施上彈性、安全地執行。騰訊雲完全管理底層計算資源，包括伺服器 CPU、記憶體、網路和其他配置/資源維護、程式碼部署、彈性伸縮、負載均衡等。程式碼按需執行，空閒時不收費。使用雲函式將幫您免除所有運維性操作，使您更加專注於核心業務的開發，實現快速上線和迭代，把握業務發展的黃金時期。

騰訊雲還提供了關於視訊直播、短視訊、網路安全、大資料視覺化平臺、小程式雲開發解決方案、測試服務、監控服務等等能力、極光推送等等能力。

其中，HTTPDns解析服務提供了穩定中立的第三方DNS解析服務，有效的解決了DNS劫持、DNS解析速度等問題，可以有效提升使用者體驗。

極光推送更是作為國內移動APP推送的主要解決方案，整合了iOS、Android的推送能力，解決了國內Android機型分散，缺乏統一的推送能力的問題，具備了每日數億資訊量的處理能力和極高的到達率。

4 小程式

微信小程式

微信小程式在2017年推出，是一種不用下載就能使用的應用，已經構造了新的小程式開發環境和開發者生態。現在已經有超過150萬的開發者加入到了小程式的開發，小程式應用數量超過了一百萬，覆蓋200多個細分的行業，日活使用者達到兩個億。

微信小程式是一個真正現象級的平臺型產品，改變了許多人使用App的方式。而且隨著微信小程式的成功，各大網際網路廠商都開始開發各自平臺的小程式，同時手機廠商也聯合起來開發快應用平臺。

小程式的渲染層和邏輯層分別由 2 個執行緒管理：渲染層的介面使用了 WebView 進行渲染，邏輯層採用 JsCore 執行緒執行 JS 指令碼。

為什麼要這麼設計呢？前面提到的管控和安全，為了解決這些問題，我們需要阻止開發者使用一些瀏覽器提供的，諸如跳轉頁面、操作 DOM、動態執行指令碼的開放性介面。

邏輯層：建立一個單獨的執行緒去執行 JavaScript，在這個環境下執行的都是有關小程式業務邏輯的程式碼
渲染層：介面渲染相關的任務全都在 WebView 執行緒裡執行，通過邏輯層程式碼去控制渲染哪些介面。一個小程式存在多個介面，所以渲染層存在多個 WebView 執行緒

同時，小程式的資原始檔是下載到本地快取進行載入、渲染、執行，類似於原生App中Hybrid離線包的方式，能夠提供了非常好的效能體驗。

wepy - 小程式元件化開發框架

原生小程式開發方式相對比較封閉，無法利用前端開發的完整體系生態，於是wepy就希望通過元件化、現代前端式的開發方式引入到小程式開發中。

WePY (發音: /'wepi/) 專案啟動於 2017 年 11 月份，是小程式最早的框架之一，是一款讓小程式支援元件化開發的框架，通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程式。框架的細節優化，Promise，Async Functions的引入都是為了能讓開發小程式專案變得更加簡單，高效。

特性：

使用 Vue Observer 實現資料繫結
支援 Vue watch/computed/mixin 等特性
基於原生元件實現元件化開發
支援 TypeScript

小程式開發框架目前在業界已經百花齊放，下圖就是一個對比，可以看到對於小程式多端開發的訴求是非常高的，wepy對於小程式型別支援略顯不足，同時也沒有移動端容器支援的能力，但其在流行程度和元件豐富度上還是佔據優勢。

westore - 微信小程式解決方案

github.com/Tencent/wes…

受 Omi 框架的啟發，且專門為小程式開發的 JSON Diff 庫，所以有了 westore 全域性狀態管理和跨頁通訊框架讓一切盡在掌握中，且受高效能 JSON Diff 庫的利好，長列表滾動載入顯示變得輕鬆可駕馭。總結下來有如下特性和優勢:

和 Omi 同樣簡潔的 Store API
超小的程式碼尺寸(包括 json diff 共100多行)
尊重且順從小程式的設計(其他轉譯庫相當於反其道行)
增強 data 資料繫結，函式屬性可直接繫結到 WXML
this.update 和 setData 語法類似，但返回一個Promise
this.update 比原生 setData 的效能更優，更加智慧
Westore 專為小程式外掛開發定製了模板
Westore 整合了騰訊雲開發

解決了小程式的痛點:

使用 this.data 可以獲取內部資料和屬性值，但不要直接修改它們，應使用 setData 修改
setData 程式設計體驗不好，很多場景直接賦值更加直觀方便
setData 卡卡卡慢慢慢，JsCore 和 Webview 資料物件來回傳浪費計算資源和記憶體資源
元件間通訊或跨頁通訊會把程式搞得亂七八糟，變得極難維護和擴充套件

5 UI元件庫

WeUI

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程式量身設計，令使用者的使用感知更加統一。

WeUI提供了表單、基礎元件、操作反饋、導航相關、搜尋相關、層級規範等方面的元件庫，下圖就是部分表單、列表、選擇器的元件示例。通過這套UI元件庫，可以在微信Web生態中打造出和微信原生體驗一致的介面風格，可以保證使用者的體驗。

騰訊雲圖

騰訊雲圖（Tencent Cloud Visualization，TCV）是一站式資料視覺化展示平臺，旨在幫助使用者快速通過視覺化圖表展示海量資料，10 分鐘零門檻打造出專業大屏資料展示。精心預設多種行業模板，極致展示資料魅力。採用拖拽式自由佈局，無需編碼，全圖形化編輯，快速視覺化製作。騰訊雲圖支援多種資料來源配置，支援資料實時同步更新，同時騰訊雲圖基於 WEB 頁面渲染，可靈活投屏多種螢幕終端。

6 跨平臺

Hippy - 多端一體化方案

Hippy 作為前終端的一體化方案，其擁抱W3C標準，通過自繪和源生混合繪圖元件複用以追求極致效能，並不斷接入實現更多優質元件。其已經在瀏覽器上應用了數十個內外部業務，承載了數十億計的使用者訪問量，拿下了公司內部2018年年度程式碼文化獎。

對於多端一體化的研發方式，業界一直在探索，例如React Native、Weex實現了通過JS編寫、Native渲染很好的平衡了研發效率和渲染效率，但是依舊無法直接實現Web/Native的多端一體化，因此依舊需要尋找一個框架可以在多端實現跨平臺、高效能、動態化釋出的開發解決方案。

項⽬目架構 Hippy SDK 採⽤用三層設計，其中：

JavaScript 層：提供業務程式碼運⾏行行時的前端上下⽂文環境；目前支援前端主流框架，例如React、Vue
C++ 層：JavaScript執行時介面的封裝；任務排程器包含延遲任務、優先順序管理、事件迴圈等等；提供基礎 UI 元件與佈局計算框架，並負責渲染⾄至⽬目標平臺；
Native Framework 層：負責前終端通訊與 JavaScript VM，並提供 Native 相關模組；

從Hippy-React架構中可以看到其如何支援三端：

Web端：依賴Hippy-React-Web將Hippy React程式碼轉換成React-Dom，然後再渲染到Web瀏覽器
Android/iOS：通過執行時的C++佈局引擎對Hippy React程式碼進行解析得到類似React Element物件，裡面會含有元件物件的基本屬性(name/props/events等)，再通過React-Reconciler進行轉換成對應的FiberNode，然後再通過Native Renderer渲染出原生元件。

Hippy目前來看擁有以下特點：

擁抱社群：即將開源，同時會緊跟W3C標準，將來開源後可能會有更多的社群去豐富其元件
追求效能：採用Binding模式的前終端通訊方式，提升Web和Native之間的通訊效能，同時基於C++的介面封裝、任務排程、UI/佈局計算框架等等，都達到了高效能渲染能力
更多元件：支援Canvas、Lottie/PAG動畫、騰訊地圖
設計適用：設計稿直出程式碼

omi - 前端跨端平臺

Omi (讀音 /ˈomɪ/，類似於歐米) 是跨框架框架，基於 Web Components 設計，也可以使用相同語法的 omio 相容 IE8+。支援 PC Web、移動 H5 和小程式開發(One framework, Mobile & desktop & mini program)。

相對於React或者Vue現在主流的前端框架而言，Omi有以下特點：

4KB 的程式碼尺寸，比小更小
順勢而為，順從瀏覽器的發展和 API 設計，Webcomponents + JSX 相互融合為一個框架 Omi，Webcomponents 也可以資料驅動檢視, UI = fn(data)
Shadow DOM 與 Virtual DOM 融合，Omi 既使用了虛擬 DOM，也是使用真實 Shadow DOM，讓檢視更新更準確更迅速
類似 WeStore 體系，99.9% 的專案不需要什麼時間旅行,也不僅僅 redux 能時間旅行,請不要上來就 redux，Omi store 體系可以滿足所有專案

基於omi，現在已經有了一整套完整的生態支援：

omip：小程式和H5跨端開發
omix：小程式開發框架
omi-router：路由
omi-cli：腳手架工程
...

Kbone - 前端和小程式同構框架

Kbone 這個方案出現，源自於一個需求：微信開放社群當時只有 Web 端，為了讓資訊可以更方便地傳播、分享和使用，希望實現社群小程式版，互動體驗儘量貼近於 Web 端。

此次同構到小程式端需要考慮幾個因素：多端程式碼複用、儘可能支援已有的特性和效能要有保證。其實最主要的就是要在儘量不改動現有程式碼的情況下來完成小程式的開發。

Kbone 這個介面卡方案的大致設計思路，我們將其歸納為兩個模組：仿造介面和自定義元件。正因為這個方案是通過提供介面卡的方式來仿造出 Web 環境，所以使用者程式碼不需要做任何魔改，大部分特性都可以繼續使用不需要被刪減，比如 vue-router、window.location 操作等。

不同於其他前端和小程式同構框架通過語法轉譯的方案，Kbone通過實現仿造Dom介面，從而讓上層前端程式碼無須太多改變。Kbone 這套方案最大的優勢：擴充套件性強、對各個特性的支援全面、對程式碼編寫的要求少以及自由度高、不需要魔改 Web 框架的底層實現，這樣對於程式碼的維護、升級也都更為簡單方便。

7 工程化

騰訊Now直播團隊在2019 ArchSummit大會上分享了團隊在工程化相關建設的思考，可以給到不少啟發。

前端工程化不再是簡單的Webpack打包、部署而已，從完整的研發流程來看，可以涵蓋建立專案、本地開發、功能測試、釋出、線上監控多個環節，每個環節又有各自需要建設的基礎能力，只有有了這些Devops的能力，才能促使研發團隊技術的標準化，提高研發運維效率。

分享中重點提到了打造前端工程化幾個方面的思考：

本地開發：基於CLI/GUI打造一體化工作流。由於各個團隊的技術棧不一樣，導致每個團隊使用例如create-react-app或者vue-cli等不同的cli工具。在建立專案時，往往也是簡單通過專案複製。為了解決這個問題，基於開發套件和外掛方案，可以實現在專案建立、本地開發、釋出等環節實現統一的cli工具，統一了研發流程。
部署釋出的演化。團隊經歷了三個階段：1）手工釋出，依賴手工配置實現打包釋出。2）基於Jenkins實現了一定的自動化，但系統無法進行自定義。3）自研CI，基於docker並且打通企業微信進行訊息通知，實現了程式碼提交、分支合併、持續部署等能力。
團隊工具平臺實踐。沉澱了從質量、效能、效率等方面完整的工具集，可以有效沉澱最佳實踐，提升團隊的基礎能力。

團隊規範：開發、協作規範制定和落地。包含開發規範（各種程式碼編碼規範），協作規範（git規範、分支規範、文件規範、commit規範等），釋出規範（監控告警規範、釋出checklist規範、離線包規範）。在程式碼規範通過eslint方式落地，並且整合進入CI流程，git commit也通過工具進行檢查。

寫在最後

騰訊給大家的感覺一直都是產品驅動、悶聲發大財的樣子，而且從技術方面由於有阿里、百度這類技術沉澱深厚的公司作為對比也沒有給人留下深刻的印象。但是，最近幾年隨著微信平臺的崛起，圍繞微信平臺的開發框架、跨端同構方面獲得了比較大突破，同時，也舉辦例如TWeb conf、騰訊Live開發者大會，在業界的影響力也不斷擴大。

本篇文章力圖從前端各個方面去整理總結騰訊當前的技術體系，但一定會有許多遺漏，同時開源資訊畢竟有限，希望相關同學可以一起多多交流。

這是大廠前端技術體系解密系列第三篇，後續還會有其他大廠的內容，精彩還將繼續，有興趣的同學可以關注本公眾號【奶爸碼農】第一時間獲得資訊。