2019TLC大會精彩回顧—大前端·信息流

總體概況

2019年8月17日，第三屆TLC大會在科興科學園國際會議中心完美落下帷幕。做爲一年一度的技術盛會，本次大會雲集國內外19名技術專家，現場參會人數超過600人，線上直播（騰訊直播）人氣6000+。宣傳覆蓋40+媒體及技術平臺，線上曝光10w+，社區全覆蓋。

本屆TLC大會的主題是「大前端，信息流」，由騰訊NOW直播IVWEB團隊出品。講師陣容堪稱豪華，有Microsoft Edge研發經理&webpack維護者Sean Larkin、前手機淘寶前端負責人程劭非(winter)、 騰訊雲實時音視頻技術負責人蔣磊、阿里巴巴前端技術專家大漠、Vue.js 團隊成員蔣豪羣等國內外知名技術專家。

會議持續一天，上午在主會場舉辦，下午分爲4個技術分會場，分別爲大前端專場、信息流專場、跨平臺技術專場、IVWEB技術專場。議題共19個，涵蓋了Webpack五、Vue、WebAssembly、小程序、Flutter、Node.js、TRTC 等熱門技術在音視頻、大前端、信息流等領域的實踐與經驗，同時還有技術管理領域的一些心得與分享。

本次大會場面火爆，現場座無虛席，且延續了過往兩屆積累的優良口碑，現場參會者，無論是與觀衆、講師仍是嘉賓，都一致給予了高度評價。相比第二屆TLC大會，本次大會議題更爲聚焦，參與的開發者更多，在業內具備更高的影響力。隨着本次大會的成功舉辦，但願IVWEB團隊能夠繼續助力並引領大前端、音視頻、信息流技術領域的發展，爲廣大開發者提供更爲廣闊的技術交流平臺。

附：TLC 2019官網地址，TLC 2019講師PPT下載地址

大會開場

爲TLC開幕致辭的是NOW直播總經理吳奇勝。奇勝用謙虛幽默的方式，向在座的小夥伴分享了他從業以來的一些經歷和感悟。從PC時代的Q+應用，再到移動互聯網時代的H5和小程序，技術、理念在不斷更新，如何用更好的性能、更便捷的體驗服務咱們的用戶是C側成功的關鍵。

同時關於直播業務和信息流業務奇勝還給出了本身的思考。直播做爲信息流的一部分，跟信息流的無縫疊加，能豐富信息流而且帶給用戶更好的交互和體驗。

對於本屆TLC大會奇勝但願，大會能幫助參會的小夥伴們更好地理解技術趨勢，你們一塊兒分享、交流、成長，都可以有所收穫。

第二位開幕致辭的嘉賓是TLC大會發起人兼出品人、騰訊技術專家、IVWEB團隊負責人劉恆兵(河伯)。河伯首先對到場的嘉賓、講師、參會同窗表達了感謝，並對IVWEB團隊團隊近一年來在基礎建設、社區分享、開源共建方面所取得的成績進行了簡要彙報。

同時，河伯結合歷史背景和技術趨勢，回顧了歷屆TLC大會的概況，以及本次TLC大會的主要議題簡要。

在社區方面，河伯回顧了IVWEB團隊近期着力作的幾個事情，包括高校技術沙龍、社區影響力建設、圍繞性能&效率而開展的技術項目（Feflow/Aegis）等。

主會場

《Breaking [not so] Bad: What’s new in webpack 5 and how you can prepare!!》

第一場是Microsoft Edge 研發經理、webpack 維護者Sean Larkin爲咱們帶來的演講**《Breaking [not so] Bad: What’s new in webpack 5 and how you can prepare!!》**。

目前webpack 5 還處於 alpha 階段，webpack團隊正準備發佈新的 Beta 版本。Sean Larkin爲參會者講述了webpack 5 中新加入的一些使人振奮的功能，之因此作出這些突破性變化的緣由，以及開發者如何從 webpack 4 升級到 5。此外，Sean Larkin 還對 webpack 的下一步規劃進行了展望，同時鼓勵並但願在場的開發者同窗可以更多地參與到webpack的共建當中。

《聊聊技術管理成長中的對與錯》

第二場是由前手機淘寶前端負責人**程劭非(winter)**老師爲咱們帶來的演講《聊聊技術管理成長中的對與錯》。

winter老師首先簡單介紹了下他畢業以來，從微軟亞洲研究院，到盛大創新院，再到淘寶的從業經驗。接着，winter老師跟參會者分享了他自走上管理崗位以來所犯過的 「三個錯誤」，包括：一、試圖給設計師定規範 二、讓前端工程師學服務端技術作全棧 三、試圖用JSON配置應對業務變化。

經過戲謔幽默的口吻，winter老師分享了這些年他在技術、管理上一些深刻的思考以及寶貴的經驗，現場參會者獲益頗多。

《實時音視頻客戶端技術實踐》

第三場是騰訊雲實時音視頻技術負責人蔣磊老師爲咱們帶來的演講《實時音視頻客戶端技術實踐》。

對直播行業來講，實時音視頻技術是平臺依賴生存和發展的技術根基，蔣磊老師經過40分鐘的分享，給咱們帶來了一線的寶貴實踐經驗。

蔣磊老師首先簡要介紹了實時音視頻技術的應用場景，以及過程當中可能遇到的各類技術挑戰，如網絡時延、丟包、卡頓等。接下來，蔣磊老師分享了騰訊雲TRTC低延時互動音視頻方案，針對上述挑戰所作出的應對和優化，如根據網絡狀態自適應調整傳輸策略、經過帶寬換延時、經過RPS/PLC下降丟包的影響等。此外，蔣磊老師還分享了對產品質量的監控與維護，以及線上實踐過程的心得等。

大前端專場

大前端就是全部前端的統稱，大前端的出現讓咱們開發一個新產品的時候服務只須要寫一次，可是能夠面向更多的產品，例如網站、Android客戶端、iOS客戶端和微信小程序等。有了跨平臺技術，各個平臺的差別性就抹平了，開發者只須要一套技術棧就能夠開發出適用於多個平臺的客戶端。大前端不只會成爲移動開發與Web前端的發展趨勢，也將會是將來的顯示設備終端的開發技術趨勢。

《探索動效開發模式》

第一場分享的嘉賓是來阿里巴巴前端技術專家大漠老師，他分享的主題是《探索動效開發模式》。 大漠老師的經常使用暱稱是「大漠」，W3CPlus創始人，目前就任於淘寶。對HTML五、CSS和CSS處理器等前端腳本語言有很是深刻的認識和豐富的實踐經驗，尤爲專一對CSS和動畫的研究。如今主要在探討學習JavaScript、React和Vue相關技術知識。他也是CSS、CSS處理器和Drupal中國佈道者，並在2014年出版《圖解CSS3：核心技術與案例實戰》。 大漠老師的演講大綱以下：

1. 動畫vs.動效
2. 動效的價值和體系
3. 開發動效的技術
4. 動效的開發模式
5. 微動效探索

演講開始，大漠老師就爲咱們展示了手淘豐富的動畫效果，併爲咱們分析了動畫和動效的區別，以及動效的價值。動效能夠知足用戶心理預期，讓用戶清晰地感覺到當前所處場景和層級關係，而且能引導用戶注意力，給用戶製造驚喜感，愉悅用戶。 在說完動效的價值以後，大漠老師以多年的經驗，爲咱們總結了動效的開發技術、開發模式以及響應的難點。最後爲咱們介紹了他對微動效的探索，收穫滿滿！

《Vue.js 高效開發之路》

第二場分享的嘉賓是來自Vue.js 團隊成員蔣豪羣，他的演講主題是：《Vue.js 高效開發之路》。 蔣豪羣是 Vue.js 團隊成員，全職開源開發者，曾就任於阿里巴巴和蘑菇街。 蔣豪羣老師的演講圍繞着當下最火的前端框架之一的Vue，他的演講從下面幾個方面切入： 一、vue的設計理念 二、代碼技巧 三、調試技巧 其中，蔣豪羣老師說到，模版DSL、響應式數據、漸進式框架是Vue 的核心設計理念。在講第二部分「代碼技巧」的時候，蔣豪羣老師給咱們講了幾個比較實用技巧，根據類型能夠分爲「錯誤處理」、「減小重複」兩個方面。最後，蔣豪羣老師根據本身多年的開發經驗，爲咱們總結了常見的debug方法，收穫頗豐！

《小程序.雲開發在貓眼電影小程序運營活動場景下的應用》

第三場分享是由來自貓眼娛樂資深前端工程師高英健給咱們帶來的《小程序.雲開發在貓眼電影小程序運營活動場景下的應用》。
高英健老師於15年3月加入原美團，參與貓眼小程序與新版觸屏版的從0到1開發，負責過貓眼小程序、觸屏版選座交易業務的開發。目前負責貓眼觸屏版、小程序運營相關業務的開發，對小程序相關生態有豐富的開發經驗。 高英健老師的演講內容大綱以下：

1. 背景
2. 現狀
3. 探索
4. 收益
5. 規劃
6. 總結

高英健老師的演講以一種幽默有趣的對話形式，爲咱們情景再現，生動、有代入感的說明了當時的貓眼電影小程序開發時遇到的困難，以及遇到困難時她是怎麼想怎麼處理的，一步一步完善解決方案，最終攻克了小程序複用的難題。

《使用 Nodejs 構建 Serverless 框架》

第四場的分享嘉賓來自美團點評高級前端工程師龍佳文。他的演講主題是《使用 Nodejs 構建 Serverless 框架》。 龍佳文老師目前主要負責 Serverless 雲函數平臺和工具鏈建設。致力於提高開發者效率和用戶體驗，曾參與前端工程化方案建設，推進了來自多個BG 的近兩百人的前端團隊的開發模式的升級，也參與日均千萬級前端離線化和增量更新方案的。熱愛開源，在 Github 有千級 Star 的開源項目。目前關注 Flutter 和 Nodejs以及 Serverless 方向。 龍佳文老師的演講大綱以下：

1. Node.js的應用場景和問題
2. Serverless是什麼
3. Node.js Serverless方案概況
4. 總結和展望

開場，龍佳文老師用了一個比較有表明性的例子說明了當下比較有表明性的問題，開發中先後端由於過分耦合而致使效率低。爲了解決這個問題，進一步思考，按部就班，最終引除了serverless的概念。並闡述了serverless在美團的開發中是怎麼實現的。

跨平臺技術專場

隨着技術的發展，前端應用已可以流暢的運行在多個平臺上。跨平臺開發是爲了增長代碼複用，減小開發者對多個平臺差別適配的工做量，下降開發成本，提升業務專一的同時，提供比Web更好的體驗。

《用 React Hooks 重構你的小程序》

第一場分享是由李偉濤老師爲咱們帶來的《用 React Hooks 重構你的小程序》。

李偉濤老師是來自京東的高級前端工程師，其致力於負責團隊前端框架與研發工具的開發，同時負責團隊開源生態的建設，主導過多個開源項目，例如多端統一開發框架 Taro。

本次分享的主要內容是：

1. 什麼是Hooks
2. Hooks在Taro的實現以及實戰

經過講解在 Taro 中對 Hooks 的探索，咱們可使用Hooks API來摒棄 ES6 Class 或其它框架例如高階組件、依賴注入、Behaviors、Traits 等等高大上的名詞和概念，將小程序開發的複雜業務邏輯化簡爲一個個可預測的、可測試的普通函數。

《多端一體方案 Hippy 的架構和實戰》

第二場分享是由曠旭卿老師爲咱們帶來的《多端一體方案 Hippy 的架構和實戰》。

曠旭卿老師是來自騰訊瀏覽平臺產品部的高級前端工程師，是騰訊自研的高性能前終端一體化框架 Hippy 的前端負責人。

本次分享的主要內容是：

1. Hippy的設計思想
2. Hippy-React/Hippy-Vue的設計架構

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

《Flutter桌面應用開發》

第三場分享是由郭力恆老師爲咱們帶來的《Flutter桌面應用開發》。

郭力恆老師是來自廣發證券的前端架構師，負責基於H5技術的股票交易終端的研發。其不只精進於前端，還對Rust等編程語言充滿極大的興趣。

本次分享的主要內容是：

1. Flutter桌面端的運行原理
2. Flutter與底層的通訊

郭力恆老師較爲詳細的介紹了Flutter在桌面端運行的優點和現狀，以及如何使用跨端開發語言rust來開發桌面Flutter運行環境。隨着Flutter技術的普及，社區生態的日益健壯，Flutter成爲多端開發方案只是時間問題。

《微保小程序的開發與架構實踐》

最後一場是由趙小溪老師爲咱們帶來的《微保小程序的開發與架構實踐》。

趙小溪老師是來自微保（騰訊旗下保險平臺）的前端架構師，其擅長小程序、WEB平臺的基礎架構搭建、工程化的規劃與實施。

本次分享的主要內容是：

1. 微保小程序的技術架構
2. 小程序開發及項目管理的優化

面對日益多元化的業務內容，日益巨大的小程序體積。微保小程序經過採用小程序子包方案，代碼分庫管理，推進小程序H5化、產品模板化，自動化發佈工具開發等手段，達成單週迭代，40+子倉庫管理，定時自動化發佈，極大的分治解耦了各項業務，提升了小程序的持續集成開發以及快速迭代。

信息流專場

信息流已經成爲互聯網行業內容領域的重要賽道，各個專業的信息流團隊不斷地在其中積累大量的優秀實踐，在社交，文娛，新聞信息等場景使用 WebAssembly, Node.js，Android Plugin 等技術構建高質量的產品應用。本次大會請到幾位信息流領域的技術大咖，給咱們帶來當前信息流領域的最新技術實踐的分享。

《如何打造高可用的Nodejs框架》

第一場分享是由張龍老師帶來的 《如何打造高可用的Nodejs框架》。 張龍老師2014年加入QQ瀏覽器，現任高級工程師，主要負責瀏覽器首頁卡片、Feeds後臺、Feeds Hippy等業務，致力於前端性能及nodejs方向研究。 本次分享，張龍老師首先提出構建高可用的 Node.js 框架面對高性能，穩定性，一致性，可信度等方面不一樣思惟的轉變，要求框架達到 TPS 高，柔性可用，最終一致性與對第三方調用有兜底方案等特色，並支持異構，快速構建與實現完整的服務治理。接下來張龍老師針對 RPC 調用，傳輸協議，編解碼等方面講解具體實現高可用的方案與須要注意的方面。最後，總結了三個方面的優化手段與技術方案以及對將來的展望。

《Tencent Shadow：咱們是如何在成熟的Android插件技術領域繼續創新的？》

第二場分享是由平安科技安卓技術專家郭琨老師帶來的《Tencent Shadow：咱們是如何在成熟的Android插件技術領域繼續創新的？》。

郭琨老師是前騰訊高級工程師，平安科技安卓技術專家。8年Android開發，前後參與了手機迅雷，手機QQ，NOW直播等大型項目的開發，具備豐富的項目經驗。在插件技術領域，創新的開發了零反射實現的Shadow插件框架，並在正式在github上對外開源。 郭琨老師以 NOW 直播 App 相關截圖和示例說明，讓現場的同窗瞭解什麼是 Android 插件化開發，以及 Tencent Shadow 框架的目標 —— Github 上第一個創新性地以零反射、無 Hack 的方式實現的插件框架。本次分享裏，郭坤老師以相關產品數據爲主線，以 Android 插件體系的歷史爲輔線，翔實清楚地向現場的同窗解明瞭產品裏插件業務的背景和必要性、實現插件框架的各類難點以及解決方案、以及零反射無 Hack 的 Shadow 插件是如何在衆多插件框架裏脫穎而出的。

會後，很多同窗提出了各類提問，好比討論了乾貨滿滿的 Shadow 底層實現、又好比跟郭坤老師討論了 Shadow 框架可能帶來的軟件倫理問題 —— 插件框架可能會讓 App 隨意下載 Apk 致使生態混亂，對此郭坤老師持中立樂觀態度：技術無罪，開發者沒法控制技術將會被用於作什麼，咱們只須要專一技術自己便可。

《基於WebAssembly的瀏覽器端視音頻處理》

第三場分享是由夏夢麗老師帶來的 《基於WebAssembly的瀏覽器端視音頻處理》。 夏夢麗老師2014年本科畢業於浙江大學數字媒體技術專業從事前端開發，2016年開始在淘寶直播開始前端瀏覽器端視頻播放相關技術，專一前端多媒體領域，對視音頻基礎、FFMpeg框架、瀏覽器多媒體內核、WebAssembly等跨端方案有深刻了解。

本次分享，夏夢麗老師首先介紹了視音頻領域在前端領域的發展概況，面對直播元年以後日益增加的視頻性能要求，在團隊實踐中使用 WebAssembly 做爲瀏覽器端視頻編解碼技術的基石。使用 WebAssembly 對於一線直播產品所在公司在帶寬上的資金耗費成本會帶來極大的下降幅度，並經過 demo 視音頻生動地講解使用 WebAssembly 的編解碼效果。而後夏夢麗老師講解了在團隊中 WebAssembly 的技術方案，經過 FFmpeg + WebAssembly 在 worker 進程中使用內存環進行解封裝與讀幀實現對音視頻的高性能解碼。 最後夏夢麗老師對將來進行展望，目前 WebAssembly 在解碼性能上相比 native 仍有不小差距，在移動端(安卓)存在兼容性問題，但將來在計算機視覺，3D圖形等領域基於 WebAssembly 開發高性能的 web 應用仍有很大的發展空間。

會後很多同窗向夏夢麗老師提問，好比提問其 Demo 實現裏環狀數據結構的具體實現方式又或者對於 WebAssembly 裏編譯優化參數的設置等等，現場火爆

《信息流視頻清晰度策略Nodejs服務架構分享》

第四場分享是由鄭國輝老師帶來的《信息流視頻清晰度策略Nodejs服務架構分享》。 鄭國輝現就任於騰訊PCG平臺與內容事業羣信息流平臺產品部，期間前後負責QQ看點、看點視頻、看點小程序、快報垂類頻道、手Q基礎功能等web前端和Nodejs後臺的開發工做，對web與客戶端結合的應用優化、Nodejs有深刻的研究。

鄭國輝老師首先提出在信息流視頻產品中視頻秒開與視頻清晰度優化是最爲關鍵的兩個點，針對 「快」 與 「清」 兩個方面，鄭國輝老師講解了所在團隊爲了打造極致的體驗，在 Native 端使用內容數據，url，dns 解析等方面進行預加載與緩存，優化效果顯著，視頻打開時間從 1690ms 優化到 214ms，秒開佔比 95%。在視頻清晰度面對的技術難點好比更高的碼率與各類不一樣網絡環境，使用優化轉碼策略，並經過對網絡環境與機型的數據分析，指定不一樣的下發策略下發對應的視頻地址，對此鄭國輝老師所在團隊搭建了基於 Node.js 的策略配置平臺，使用騰訊開源的 TSW 運維容器爲總體業務高可用保駕護航，並得到了公司級成本優化突破獎。

會後提問環節中，有同窗提問了 nodejs 的性能問題，鄭國輝老師說，在他的這個業務場景下，密集型計算的性能不在考慮範圍，更重要的是併發和 IO，這方面性能的話是足夠跑得起業務的，此外也有同窗提問了 TS 開發的相關問題。

IVWEB技術專場

IVWEB團隊做爲業界知名的web技術團隊，在性能優化、前端工程化、效率工具等領域積累了大量的一線實踐經驗，經過IVWEB團隊成功的分享，讓與會者瞭解到國內一線Web開發團隊的最佳實踐。

打造前端監控體系

第一場分享是由何方舟老師帶來的《打造前端監控體系》。

何方舟老師是騰訊IVWEB前端高級工程師，StuQ講師。2014年曾就任京東，主導前端工程化項目。2016年加入騰訊，騰訊直播，手Q附近業務，Now直播業務核心開發。目前負責團隊組件化建設與同構應用實踐。對網頁性能優化，前端工程化、Nodejs同構業務有豐富經驗。

本次分享，何方舟老師首先提出了問題：用戶反饋頁面打不開了怎麼辦？而後針對這個問題引出了前端異常監控並對目前所作的前端異常監控建設做了簡單總結，闡述了在異常監控中會遇到的問題。

接下來，何方舟老師對前端的資源監控和性能監控時間的測速原理進行了簡單的講解，並對監控中的痛點提出瞭解決方案。

最後，何方舟老師介紹了日誌的收集、離線日誌及如何根據日誌來分析錯誤。

node接入層應用與實踐

第二場分享是由魏天亮老師帶來的《node接入層應用與實踐》。

魏天亮老師是騰訊前端工程師，2016年起加入騰訊，曾參與開發QQ空間、情侶空間、空間小遊戲等線上H5業務，目前主要負責QQ小程序、QQ小遊戲等前端相關開發工做。 本次分享，魏天亮老師的主要內容是：

1. websocket多機多進程間是如何通訊的
2. 在TSW中是如何快速定位websocket使用中的問題
3. websocket vs http數據表現

基於Nodejs快速打造B類服務平臺

第三場分享是由石建文老師帶來的《基於Nodejs快速打造B類服務平臺》。

石建文老師是騰訊 IVWEB 前端工程師，曾就任於阿里巴巴CBU技術部，負責阿里巴巴中文站的導購業務和DPL平臺建設，2018年加入騰訊，主要負責B側直播監管業務和Now交友業務。

本次分享，石建文老師首先介紹了B類業務的業務特色及其迭代過程當中的痛點：監管範圍大、業務形態不固定、可用性要求、快速上線。

接下來，石建文老師介紹了針對上述痛點所提出的解決方案——Nest，一個快速配置頁面和服務的平臺，並介紹了Nest平臺的快速配置能力及定製化能力。

最後，石建文老師介紹了Nest的後端建設，以及配套的白名單上報、統一錯誤處理、日誌收集、質量監控等特性。

騰訊直播小程序開發實踐

最後一場分享是由邱承運老師帶來的《騰訊直播小程序開發實踐》。

邱承運老師是騰訊 IVWEB 前端工程師，曾參與手Q附近、NOW直播結合版開發，現爲騰訊直播技術負責人，主要負責騰訊直播業務。

本次分享，邱承運老師首先介紹了騰訊直播這款現象級產品，並講述了開發過程當中的技術選型，及在後續維護過程當中遇到的問題。

而後，針對上面遇到的問題講述瞭如何從mpvue一步步遷移到微信小程序體系下；接着對騰訊直播的直播+電商開發實踐進行了說明。

最後，總結了在開發過程所作的優化手段及對將來的展望。

組委會剪輯

本次大會參會人數較多，爲保證大會當天的參會體驗，大會前一天我們的工做人員早早來到會場佈置，並進行設備調試。每一個參會證、袋子都由咱們當心翼翼地整理好。爲了確保簽到的效率和體驗，小夥伴們也很是細緻地用禮賓帶對籤處處進行了區域隔離。

咱們可愛的工做人員們，大會成功舉辦的背後，離不開大家默默的付出。

大會結尾

大會於當天下午順利落幕，很多參會者在QA等環節收穫了主辦方精心準備的小禮物。會後調查結果顯示，絕大多數同窗此次大會收穫頗豐，並但願來年能繼續參與。也有同窗表示主辦方準備的茶歇精緻可口。

2019年TLC大會圓滿結束，期待明年更好的大會，更期待你的參與。

相關連接

2019TLC大會視頻回放 2019TLC大會官網 2019TLC大會PPT IVWEB社區官網