本屆TLC大會的主題是「大前端,信息流」,由騰訊NOW直播IVWEB團隊出品。講師陣容堪稱豪華,有Microsoft Edge研發經理&webpack維護者Sean Larkin、前手機淘寶前端負責人程劭非(winter)、 騰訊雲實時音視頻技術負責人蔣磊、阿里巴巴前端技術專家大漠、Vue.js 團隊成員蔣豪群等國內外知名技術專家。
會議持續一天,上午在主會場舉辦,下午分為4個技術分會場,分別為大前端專場、信息流專場、跨平臺技術專場、IVWEB技術專場。議題共19個,涵蓋了Webpack5、Vue、WebAssembly、小程序、Flutter、Node.js、TRTC 等熱門技術在音視頻、大前端、信息流等領域的實踐與經驗,同時還有技術管理領域的一些心得與分享。
本次大會場面火爆,現場座無虛席,且延續了過往兩屆積累的優良口碑,現場參會者,不管是與觀眾、講師還是嘉賓,都一致給予了高度評價。相比第二屆TLC大會,本次大會議題更為聚焦,參與的開發者更多,在業內具有更高的影響力。隨著本次大會的成功舉辦,希望IVWEB團隊可以繼續助力並引領大前端、音視頻、信息流技術領域的發展,為廣大開發者提供更為廣闊的技術交流平臺。
附:
https://2019.tlc.ivweb.io/https://github.com/iv-web/ppts/tree/master/2019_TLC_ppts為TLC開幕致辭的是NOW直播總經理吳奇勝。奇勝用謙虛幽默的方式,向在座的小夥伴分享了他從業以來的一些經歷和感悟。從PC時代的Q+應用,再到移動網際網路時代的H5和小程序,技術、理念在不斷更新,如何用更好的性能、更便捷的體驗服務我們的用戶是C側成功的關鍵。
同時關於直播業務和信息流業務奇勝還給出了自己的思考。直播作為信息流的一部分,跟信息流的無縫疊加,能豐富信息流並且帶給用戶更好的交互和體驗。
對於本屆TLC大會奇勝希望,大會能幫助參會的小夥伴們更好地理解技術趨勢,大家一起分享、交流、成長,都能夠有所收穫。
第二位開幕致辭的嘉賓是TLC大會發起人兼出品人、騰訊技術專家、IVWEB團隊負責人劉恆兵(河伯)。河伯首先對到場的嘉賓、講師、參會同學表達了感謝,並對IVWEB團隊團隊近一年來在基礎建設、社區分享、開源共建方面所取得的成績進行了簡要匯報。
同時,河伯結合歷史背景和技術趨勢,回顧了歷屆TLC大會的概況,以及本次TLC大會的主要議題簡要。
在社區方面,河伯回顧了IVWEB團隊近期著力做的幾個事情,包括高校技術沙龍、社區影響力建設、圍繞性能&效率而開展的技術項目(Feflow/Aegis等)等。
《Breaking [not so] Bad: What’s new in webpack 5and how you can prepare!!》第一場是Microsoft Edge 研發經理、webpack 維護者Sean Larkin為我們帶來的演講《Breaking [not so] Bad: What’s new in webpack 5 and how you canprepare!!》。
目前webpack 5 還處於 alpha 階段,webpack團隊正準備發布新的 Beta 版本。Sean Larkin為參會者講述了webpack 5 中新加入的一些令人振奮的功能,之所以做出這些突破性變化的原因,以及開發者如何從 webpack 4 升級到 5。此外,Sean Larkin 還對 webpack 的下一步規划進行了展望,同時鼓勵並希望在場的開發者同學能夠更多地參與到webpack的共建當中。
《聊聊技術管理成長中的對與錯》第二場是由前手機淘寶前端負責人程劭非(winter)老師為我們帶來的演講《聊聊技術管理成長中的對與錯》。
winter老師首先簡單介紹了下他畢業以來,從微軟亞洲研究院,到盛大創新院,再到淘寶的從業經驗。接著,winter老師跟參會者分享了他自走上管理崗位以來所犯過的 「三個錯誤」,包括:1、試圖給設計師定規範 2、讓前端工程師學服務端技術做全棧 3、試圖用JSON配置應對業務變化。
通過戲謔幽默的口吻,winter老師分享了這些年他在技術、管理上一些深入的思考以及寶貴的經驗,現場參會者獲益頗多。
《實時音視頻客戶端技術實踐》第三場是騰訊雲實時音視頻技術負責人蔣磊老師為我們帶來的演講《實時音視頻客戶端技術實踐》。
對直播行業來說,實時音視頻技術是平臺依賴生存和發展的技術根基,蔣磊老師通過40分鐘的分享,給我們帶來了一線的寶貴實踐經驗。
蔣磊老師首先簡要介紹了實時音視頻技術的應用場景,以及過程中可能遇到的各種技術挑戰,如網絡時延、丟包、卡頓等。接下來,蔣磊老師分享了騰訊雲TRTC低延時互動音視頻方案,針對上述挑戰所做出的應對和優化,如根據網絡狀態自適應調整傳輸策略、通過帶寬換延時、通過RPS/PLC降低丟包的影響等。此外,蔣磊老師還分享了對產品質量的監控與維護,以及線上實踐過程的心得等。
大前端就是所有前端的統稱,大前端的出現讓我們開發一個新產品的時候服務只需要寫一次,但是可以面向更多的產品,例如網站、Android客戶端、iOS客戶端和微信小程序等。有了跨平臺技術,各個平臺的差異性就抹平了,開發者只需要一套技術棧就可以開發出適用於多個平臺的客戶端。大前端不僅會成為移動開發與Web前端的發展趨勢,也將會是未來的顯示設備終端的開發技術趨勢。
第一場分享的嘉賓是來阿里巴巴前端技術專家大漠老師,他分享的主題是《探索動效開發模式》。
大漠老師的常用暱稱是「大漠」,W3CPlus創始人,目前就職於淘寶。對HTML5、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,他的演講從下面幾個方面切入:
其中,蔣豪群老師說到,模版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平臺的基礎架構搭建、工程化的規劃與實施。
本次分享的主要內容是:
微保小程序的技術架構
小程序開發及項目管理的優化
面對日益多元化的業務內容,日益巨大的小程序體積。微保小程序通過採用小程序子包方案,代碼分庫管理,推動小程序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團隊作為業界知名的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大會圓滿結束,期待明年更好的大會,更期待你的參與。