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

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 前端技術的研究，熱衷 HTML五、移動 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開發者大會，在業界的影響力也不斷擴大。

本篇文章力圖從前端各個方面去整理總結騰訊當前的技術體系，但必定會有許多遺漏，同時開源信息畢竟有限，但願相關同窗能夠一塊兒多多交流。

這是大廠前端技術體系解密系列第三篇，後續還會有其餘大廠的內容，精彩還將繼續，有興趣的同窗能夠關注本公衆號【奶爸碼農】第一時間得到信息。

 

 

『奶爸碼農』從事互聯網研發工做10+年，經歷IBM、SAP、陸金所、攜程等國內外IT公司，目前在美團負責餐飲相關大前端技術團隊，按期分享關於大前端技術、投資理財、我的成長的思考與總結。

推薦閱讀

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

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