TWeb Conf 2019 精彩回顧

大會概述

2019年11月16日，首屆TWeb Conf前端大會在深圳科興國際會議中心成功舉辦。大會現場參會人員近500人，線上直播課程報名人數近200人。經過公衆號、知乎、掘金、KM等渠道推廣，累計曝光近10W 。

TWeb Conf是由騰訊Web前端技術委員會、騰訊各大Web前端團隊聯合推出全新的 < TWeb 騰訊前端技術大會 />，由騰訊公司主辦，IMWeb Team, Alloy Team, QQWeb 承辦。大會經過組織騰訊內各大前端團隊以及邀請業界知名的講師，將騰訊和業界上最前沿的前端技術、Web標準以及一線互聯網大廠的優秀實踐經驗分享給你們，力求帶給參會者一個高標準高品質的會議。

今年大會咱們邀請了來自騰訊，阿里，W3C等19位業界知名前端專家及一線工程師前來分享，精心設計了三個分會場、四個主題方向：小程序、工程化、Node、跨端綜合。各會場均座無虛席，講師們的分享內容詳實而有深度，從業務場景的問題解決，到各大開源框架的深度探究，引起了觀衆們踊躍討論。

在此，也特別感謝本屆TWeb大會的贊助商 騰訊開源，騰訊課堂Next學院 的鼎力支持。

感謝合做社區感謝合做社區騰訊云云＋社區、騰訊雲TVP計劃、騰訊文檔、掘金、圖靈社區、segmentfault、coding、編程獅。 話很少說，接下來讓咱們趕忙回顧下各大會場的精彩內容。

主會場

會議開場由騰訊社交平臺總經理，QQ技術委員會會長-黃俊洪發表開幕詞：近年來，大前端領域蓬勃發展。從小程序，研發工具鏈，研發效能，node以及Serverless， RN以後的Flutter，百花齊放，前端的職能也愈來愈重要。隨着騰訊的技術研發模式的變化，從煙囪式造輪子轉向開源協同、中臺化的技術體系，騰訊愈加註重擁抱開源的技術路線。所以咱們但願經過舉辦前端大會，將騰訊內乃至業界優秀的前端實踐跟你們分享，共同促建行業的發展。

同時大會也邀請了公司內外前端領域的專家做爲大會嘉賓一塊兒交流。

第一場分享是由W3C中國區總經理-吳小倩帶來的 《是時候瞭解一下 WebIDL》。在分享了 WebIDL，一門標準化、編程語言中立的瀏覽器接口描述語言。介紹了WebIDL的起源、基礎語法、輔助工具、和 WASM 等新技術的融合，從另外一個角度看看 Web 的成長，參與Web的設計，最後鼓勵你們一塊兒參與W3C標準的制定。

第二場分享由巧子科技創始人，前全民直播CTO-張雲龍分享的 《Headless CMS》,一套適用於小微項目的業務中臺解決方案。經過使用開源項目 strapi.io 來快速實現上線一個全新項目須要的RESTFul API接口。可經過可視化操做，配置數據結構，數據關係類型以及API字段類型。方便快捷，真乃中小企業開發者的一大福音。

第三場分享由騰訊在線教育Flutter技術負責人-塗金林帶來的 《Flutter在騰訊企鵝輔導上的實踐之路》。分享了騰訊在線教育團隊做爲Flutter技術的踐行者之一，在安卓, iOS 和 Pad 上的原生應用如何嵌入flutter、原生頁面與flutter頁面如何混合切換、深刻Flutter底層、內存首性能優化、嘗試Flutter For Web、動態更新的一系列實踐經驗，致力於將最好的體驗帶給用戶。

上午最後一場分享由騰訊AlloyTeam高級前端工程師-郭林爍，分享 《大型Web項目可用性提高優化方案》。該分享圍繞「腳本錯誤監控、優化、持續跟進」，「前端日誌系統搭建、優化與打通」，「騰訊文檔「白屏」監控體系與優化」這3方面來說述大型項目的可用性提高優化實踐思路。
其中經過腳本錯誤監控以及git提交記錄來自動建立工單分發給對應開發者，經過woker線程進行上報從而不阻塞用戶的交互；經過webpack插件-wait-external-webpack-plugin來確保js資源加載失敗重試後的加載順序以及結合Subresource Integrity、 CSP來作頁面內容防篡改劫持 都是不錯的實踐亮點。

小程序 & 工程化 會場

小程序開發橫空出世，轉眼就成了目前最熱的前端方向之一，小程序有哪些鮮爲人知的祕密？又有哪些最佳實踐？隨着 Web 業務日益複雜化和多元化，工程化是提升編碼、測試、維護階段效率的重要法寶，如何提升性能和可用性等也是永恆的話題。本專題將邀請小程序內部一線工程師以及在工程化方面的優秀實踐者，爲你們一一道來。

第一場分享由騰訊web前端高級工程師-june帶來的 《kbone：微信小程序同構方案新思路》。kbone是微信官方出品的一個基於vue/react同構小程序的框架，旨在讓開發者能夠用最熟悉的方式來完成一個多端應用的開發，讓代碼能夠更好地被複用，後續維護工做也更方便。june分享了該框架誕生的背景、框架實現方案、應用場景以及實踐優化，乾貨滿滿。

第二場分享由微信遊戲高級工程師，小遊戲可視化工具項目負責人-廖澤愷帶來 《小遊戲可視化工具架構設計》 這一議題。介紹了基於Scratch-locks實現可視化配置小遊戲的一套解決方案，以及經過PWA離線能力提升可用性的優化實踐。

第三場分享由微信遊戲B端前端負責人-彭自強帶來的 《基於CLS的B端提效實踐》。微信遊戲團隊面對各種運營需求，作了些探索，基於統一的組件語言規範來實現系統的快速搭建，藉助可視化優化流程，加速多人協做的效率，試圖將開發變得更簡單。

第四場分享由騰訊Web前端高級工程師-苗兆豐 帶來的《從 Jenkins 到 GitHub Actions —— CI 現代史》。介紹了近10年來CI 行業到底是如何風起雲涌，又是如何借雲原生之力煥發新生。重點對比了Jenkins跟GitHub Actions的2種不一樣的方案。

最後一場分享由騰訊ISUX高級UI開發工程師-陳挺 帶來的 《如何讓機器讀懂設計》。介紹了ISUX用戶體驗設計部深藍研發組的一套UI自動化技術。經過計算機技術理解設計師的意圖，經過OpenCV視覺庫及AI技術獲取設計稿中的參數，快速實現UI還原。

Node & 架構 會場

大前端時代已然到來，而Nodejs爲前端帶來了更多可能，SSR、性能等相關話題也是經久不衰，近期Serverless等方向也是如火如荼。本專題將專一於Nodejs傳統實踐以及更多前沿技術探索，爲你們帶來最佳實踐和更多思考。

第一場分享由騰訊web前端高級工程師，omi開源框架做者-張磊帶來的 《騰訊OMI 框架前端生態賦能與創新實踐》。OMI 是騰訊2018 年正式開源的前端跨框架框架(Cross-Frameworks Framework)，本次分享做者介紹了OMI的設計思路以及OMI + Web Components、OMI + Preact、OMI + React、OMI + Vue、OMI + 小程序、OMI + Kbone等相關等內容。

第二場分享由Vue語法編譯引擎aga做者-段隆賢帶來的 《極致SSR：高效率構建高性能Web同構頁面》 這一議題。本次分享主要介紹SSR編譯時的優化方案， 該方案經過源碼的上下文相關分析， 從AST推導不一樣的分塊間、分塊與數據間的依賴，實現自動化分塊傳輸;在模板層面, 把Vue語法編譯成字符串的拼接，經測試在服務端經過aga編譯後的代碼比Vue官方的VDOM快20+倍, 總體提高SSR開發效率和性能。

第三場分享由阿里巴巴前端技術專家-水瀾帶來的 《Serverless SSR 實踐》。介紹了利用Rax如何簡單高效地開發 SSR 應用，整套的 SSR 應用開發方案。經過 Rax 的 CLI 工具能夠快速建立、調試、構建 SSR 應用，並能夠以 FaaS 形式的發佈到阿里雲等函數託管平臺。同時，經過不斷優化 Rax 內核與框架，Rax 在 Server 端的渲染性能是行業內其餘主流框架的數倍，領先的自適應 Hydration 渲染模式，即便在兩端版本不匹配的狀況下也能夠最大程度地複用 SSR 直出的內容。

第四場分享由騰訊IMWeb前端工程師-帶來的《騰訊教育 Serverless 實踐及探索》。介紹了騰訊在線教育Serverless的實踐和探索方案，如何利用Serverless提升產品迭代開發的效率，以及將來的Serverless的展望

最後一場分享由阿里前端技術專家-潕量帶來的 《阿里控制檯系統提效之路》。本次演講從阿里巴巴內部遇到的問題出發，經過抽象組件能力解決阿里內部各BU主題定製的訴求，經過工做流的優化解決設計前端協同效率問題，經過業務能力的沉澱解決開發效率問題

跨端 & 綜合 會場

跨端應用是爲了在增長代碼複用，減小多個平臺差別性適配，提高開發效率的同時，帶來比 Web 更好的體驗、性能，更多的可能。迴歸Web自己，又有哪些新技術，新玩法，會帶給人怎樣的啓迪呢？本專題經過業內以及騰訊的前端技術實踐分享，爲你們在研發效率和性能優化以及Web創新等其餘方面提供借鑑和幫助。

首場分享由淘系無線架構團隊負責人-元彥帶來的 《使用React 構建Flutter應用》。介紹了經過 Kraken 框架，使用React開發 Flutter 應用的方案。在 Flutter 高性能渲染的基礎上，使之具有動態性和開發效率的提高。同時如何利用Kraken基於 Chrome Debugging Protocol 的真機調試方法（支持斷點、打印、異常、查看對象結構、堆棧等），讓開發者能夠像調試 Web 同樣調試 Flutter 應用。

第二場分享由騰訊IVWEB PWA 項目負責人-王涵冰帶來的 《企業級項目基於 PWA 緩存的最佳實踐》。介紹了 NOW 直播業務在 PWA 的優化過程當中，在不一樣的業務場景中一步步進行的優化實踐。重點介紹了針對一級、二級頁面的性能優化方案，應對緩存出錯的緊急狀況處理，並最終沉澱出一套完整的 PWA+ 優化方案。

第三場分享由QQWeb團隊核心開發-齊霽帶來的 《手機 QQ 勳章牆技術內幕——移動端流暢 3D 渲染指南》。介紹了手機 QQ 3D 勳章牆業務開發中的四大難題：如何渲染帶用戶暱稱的 3D 模型、如何實現流暢的可交互動畫、如何打破次元壁、如何渲染半透明過渡動畫。以及移動端使用 WebGL 實現業務中可能遇到的問題，流暢可交互動畫背後的祕密。

第四場分享由微雲前端負責人，AlloyTeam成員-程海斌帶來的 《基於WASM的文件上傳加速實踐》。介紹騰訊微雲、騰訊文檔、騰訊企點業務中文件上傳的前端方案，如何經過秒傳，多通道上傳，斷點續傳和WASM應用實現web端上傳速度的極致提高，帶來更好更穩定的用戶側上傳體驗，經過結合在上傳計算場景的應用實踐給你們講解WASM內部的運行機制，JS與WASM數據傳遞的內部實現及WASM是如何提高性能。

最後一場分享由騰訊文檔Word負責人，TIM Android負責人-張祥給你們帶來的 《Web編輯器的實現，從簡單編輯到專業排版》。介紹了一個最簡單的編輯器如何實現。以及常見編輯器框架的選型，而且深刻分享了精確排版編輯器是怎麼設計、實現以及使用。

感謝

通過一天的精彩分享後，講師以及嘉賓，工做人員一塊兒在簽名牆進行了合影留念以及聚餐活動。

感謝各位講師的精彩分享與參會小夥伴的確定，是你們一塊兒鑄造了這場前端領域的技術盛宴。

感謝 TWeb Conf 全部的工做人員小夥伴們，對於大會的每一項準備工做，你們都專一而細緻，盡職盡責。

感謝TWeb大會出品人：Joltwang，Jetyu，Youkunhuang，Bleanycao，Svenzeng，Zishunchen，Vicyao，Superzheng，Herbertliu對議題的收集以及篩選。

感謝TWeb成員團隊：IMWebTeam、AlloyTeam、QQWebTeam、瀏覽平臺部(SuperTEAM)、騰訊視頻、微信小程序、微信小遊戲、支付基礎平臺與金融應用線、騰訊IVWEB Team、騰訊新聞前端團隊(TNFE)、騰訊看點Web團隊的鼎力支持。

本屆TWeb Conf 2019 圓滿落幕！

TWeb線上回放視頻課程（購買線下票的郵件已周知觀看連接，線上票的可直接觀看）：ke.qq.com/course/pack…