2018年10月14日,第七屆IMWebConf前端大會在深圳科興國際會議中心成功舉辦。今年大會現場參會人員近500人,線上直播參與人數累積近千人。
IMWebConf 是由騰訊前端 IMWeb 團隊發起的國內頂級前端技術領域開發者大會。今年大會依舊匯聚了許多前端大咖,並且議題更加緊貼前端前沿熱點,深入探討一線前端技術。大會邀請了國內外講師19名,包括W3C Webapps 組聯合主席Chaals Nevile、英特爾高階工程師閆紹博、Adobe 資深 UED張文婷等技術專家,以及來自百度、阿里巴巴、美團、經典、小米、騰訊等國內一線科技公司的頂級開發者,總計探討了17個議題。
今年大會分為了Web前端領域的標準與前沿、小程式快應用、Native 跨端融合、Node 服務與效能、視覺化與動畫五大會場。各會場均座無虛席,講師們的分享內容詳實而有深度,引發了觀眾們踴躍討論。圓桌會議環節,觀眾更是與大咖們面對面交流,從業務場景的問題解決,到各大開源框架的深度探究,現場氛圍持續爆棚。會場貼心的茶歇也讓大家感受到了大會主辦方的用心。話不多說,接下來讓我們趕緊回顧下各大會場的精彩內容吧
標準與前沿
會議開場由騰訊技術總監王輝發表開幕詞,向大家分享了在前端前行道路上的經驗和感悟,為大會拋磚引玉。引用國學大師王國維《人間詞話》的“人生三境界”,王輝講述了從開始接觸前端的迷茫到掌握基礎的“立”,到遇到困難也堅持奮鬥執著追求的“專”,最後培養出自己創造性的獨特頓悟的“得”,此為“前端三境界”。
第一場分享是來自 W3C Webapps 組聯合主席 Chaals Nevile 帶來的《Web Standards》,Chaals 從 Web 和 W3C 的關係講起,介紹 W3C 近期工作亮點,包括可用性、國際化、隱私與安全、Web體系結構。緊接著通過 Appcache、Push API、AMP 講解了當前正在推動解決的問題以及 W3C 的標準化討論流程。最後介紹了 W3C 目前現有工作的優化、改進、創新、孵化和研究。
第二場分享是來自英特爾的高階工程師閆紹博帶來的《XR on the Web》,開始分享之前紹博大神從 spec 的角度,呼籲開發者更多參與 spec 的討論,把聲音傳播到世界上更多平臺和領域。緊接著從開始對 WebXR 相關技術的介紹,我們也能瞭解到 WebXR 裝置 API 在更新和演進程式以及 WebXR 如何與 GPU 渲染、AI 等技術進行結合。最後演示瞭如何使用 WebXR API 和 WebGl API 構建一個移動端 Web 上 AR 應用。
第三場分享是《Make Web Quic》,是由騰訊高階工程師羅成帶來的分享。首先通過講述當前 HTTP2 和 TCP 的問題,引出 QUIC(Quick Udp Internet Connect) 協議的解決方案,其包含很多先進特性例如 0RTT 建連、連結遷移、傳輸控制和隊頭阻塞優化等。接著羅成大神重點分享了騰訊安全閘道器是如何通過 Nginx + Chromium 實現的 Nginx-Quic 框架,以及 QUIC 在騰訊業務線上的應用。
早上的圓桌會議除了上面的三位大神,還邀請了 W3C web 標準技術專家,W3C 中國區經理吳小倩一起與現場觀眾交流,解答疑問:
1、如何看待移動支付安全問題?
Chaals: 表示自己不是這方面的專家,但是 W3C 有專門的成員來完成這方面相關的研究和推進,移動支付給使用者最重要的一個特性就是簡單與安全。
2、中國是以什麼的角色參與 W3C 標準的制定?
W3C 的所有標準流程都是免費公開參與的,放在 GitHub 上面的,大家可以找到自己感興趣的 Issue 進行討論。
3、W3C 的資金來源?
Chaals: 會員制和會員資助,如果不存在 W3C 組織,會員們需要花費更多資源來推進標準化工作,所以還是會產生 W3C 組織。
4、服務端不支援 quic 如何降級,應用層支援的成本是什麼情況?
羅成: quic 協議轉換成 http1,承擔的更多的是一個閘道器的職責。應用自己實現的成本很高,目前現有的開源解決方案都不是很完美,Nginx-Quic 框架目前沒有開源的計劃,還在持續的更新迭代。
小程式快應用
第一場分享是由騰訊高階工程師、WePY 負責人龔澄(Gcaufy)給大家帶來的議題《WePY - 小程式敏捷開發實踐》。Gcaufy 首先給大家介紹了 WePY 的開發背景、設計思想,然後結合各種有趣的例子解釋了 WePY 背後的一些原理,如模板編譯、資料繫結、髒檢測機制等。接著又提出了 WePY 目前的一些不足,存在不相容原生模板、髒檢測機制帶來的效能問題等,藉此引入了 WePY 下個版本的規劃。另外,Gcaufy 還為我們分享了 WePY 運營上的很多經驗,所以一個成功的開源專案不僅要在技術上做耕耘,運營上也不能落下。
第二場是由美團前端技術專家、小程式開發框架 mpvue 負責人胡成全給大家帶來《mpvue 的發展和動態化方案探索》。講師首先介紹了 mpvue 的特性和原理,然後介紹了 mpvue 基於 vue 通過嵌入 runtime 實現的動態化適配方案及其原理。同時,mpvue 還圍繞 vue 引入一系列開發規範和最佳實踐,給開發者帶來良好的開發體驗。最後,結合目前的生態和不足,提出了未來的一些計劃。
第三場是由小米資深前端工程師、小米快應用前端負責人董永清給大家帶來的議題《快應用設計思路漫談》。講師首先介紹了快應用的設計思路,以及快應用和PWA等在渲染方式等方面的區別和優勢。然後通過一個例子,從工程化實踐的方向上給大家演示了一個快應用從專案架構到開發再到除錯的整個過程。最後,還提出了快應用後續的展望。
第四場是由騰訊前端工程師、IMWeb團隊成員劉華(Eden)給大家帶來的《基於 PWA 的效能優化實踐》。Eden 首先介紹了 PWA 的基本原理以及 Service Worker 的一些能力。然後,從 Web 頁面載入的整個過程開始分析,結合 Web 載入效能瓶頸,分別從 HTML 快取、資源預載入、CGI 預載入等多個不同的方面,手把手演示如何把一個頁面的首屏載入速度優化到毫秒級別,真正做到 “頁面秒開”。整場演講圖文並茂、深入淺出,即接地氣又不乏亮點。
Native 跨端融合
“一次編寫,到處執行”(Write once, run anywhere, WORA),最早是Sun公司在跨平臺方面的宣傳口號,也代表著我們作為開發人員對於效率的極致追求。近幾年隨著移動網際網路的快速發展,移動終端裝置的軟硬體、作業系統、開發工具鏈和技術社群等日趨成熟完善,在前端也湧現出各種跨平臺的開發方案。
第一場分享是由阿里巴巴技術專家張翰、申遠帶來的《Weex核心的原理和演進方向》。在分享中,介紹了Weex的基本情況、內部結構、分析比較,申遠講述了 Weex in 2018 及相關特性。 Weex 目前已在“阿里系”應用以及社群內得到廣泛應用,WeexCore 也針對 Layout 效能和首屏等做了大量優化,優化後在速度效能、記憶體佔用方面的明顯效果。同時,Weex Render 基於 Skia,可以實現更為複雜的 CSS 效果。
第二場分享是由騰訊高階工程師趙巨集罡、盛波帶來的《Hippy 框架設計與優化》。講師從前端和終端的角度介紹了 Hippy 的誕生,相比 RN 的逐條改進優化策略,使用場景以及將來的規劃等等。Hippy 相比 RN 在諸多方面都有優化,手勢方面,Hippy 改善了終端向前端持續傳送手勢事件的行為,解決了前終端通道被大量佔用的問題;通訊方面,Hippy 去除了 RN LastFlush的快取;動畫方面,Hippy 使用 AnimateConfig 使得動畫一步到位,效能得到顯著提高。Hippy 介紹到,它不僅僅是一個框架,還提供一整套解決服務,包括打包管理系統、動態運營、隔離灰度、ABTest、差量釋出、強制更新、安全校驗、流控等等,幫助更好的管理髮布。
第三場分享是由京東李偉濤帶來的《多端開發統一框架 Taro 深度剖析》。講師介紹了 Taro 的歷史背景、設計思想、持續優化、開源探索以及未來規劃等。 Taro 致力於打造一個多端的統一框架,支援用 React 方式編寫一次程式碼,能夠生成在微信小程式、H5、React Native 等多端的應用,真正做到一處編寫,多端執行。在分享中,剖析了小程式當前開發的痛點和弊端,並闡述了用 React 來開發多端的設計思想,在Taro 中如何運用編譯原理將原始碼轉換為多端程式碼,並做到效能的持續優化。在開源方面,Taro 對 React 社群、小程式社群支援良好,UI完善,有著活躍的線上線下社群交流,在未來還會支援百度、支付寶小程式、快應用、更快捷的測試、同步除錯、視覺化頁面搭建平臺等等很不錯的新特性。
Node 服務與效能
第一場分享是由阿里螞蟻金服技術專家高曉晨帶來的《螞蟻 nodejs 微服務實踐》,首先高老師給我們介紹了微服務架構的優點和微服務對於 node.js 的意義,並且從 node.js 與 java 的對比資料中分析 node.js 在 io 效能、啟動速度、記憶體佔用方面都是更優於 java 的。最後給大家介紹 rpc 框架的實現原理,包括協議部分、服務定址、負載均衡、容災策略、動態配置和微服務化架構的運維經驗,乾貨滿滿。
接下來第二場是由騰訊高階工程師裴偉給大家分享《Tars.js 大規模商用實踐與應用》,在開始前裴老師先向大家瞭解了使用 node.js 做服務端的經驗,然後由淺入深地分享內容。裴老師非常詳細的介紹 Tars.js 是如何實現監控、RPC、日誌、配置和染色。其中對於服務的穩定性展開深入探討,在生產環境中如何做負載均衡、無損重啟、服務監控,這些內容都是前端工程師剛嘗試使用 node.js 需要關注和學習的。裴老師還給大家點撥從前端到寫服務端最重要的是思想上的轉變。
第三場是騰訊高階工程師、IMWeb團隊成員葉亮給大帶來的《騰訊課堂 node 效能優化實踐》,為了提高頁面的首屏渲染速度,相信很多小夥伴會給頁面做 node.js 服務端直出。葉老師給大家分享如何加速首屏渲染,從騰訊課堂使用的 java 端直出轉到 node.js 直出的過程,從模板選型、node server 框架選型有比較客觀的對比。最後進一步講解了如何使用 devtools 來分析 node server 的效能瓶頸,同時前端同學推動後端同學使用 protobuf 協議做通訊獲得驚人的效能效果。做好 node server 容災也是服務端很重要的一環,葉老師舉例了在極端情況下如何通過容災手段保證頁面是可用的。
第四場是來自阿里雲高階開發工程師黃一君帶來的《通過 Coredump 分析定位線上 Node.js 應用故障》。 Node.js 應用的記憶體洩漏和 CPU 佔用高問題是最常見也是最難排查的兩類問題,小編也經常遇到這些問題,排查起來非常棘手,黃老師給大家介紹了 core dump 和如何通過 LLDB 來分析 core 檔案,通過 core 檔案分析可以找到類死迴圈和堆記憶體雪崩的問題。遇到錯誤日誌資訊不足夠的 crash 可以通過 AsyncHook 插樁做鏈路路追蹤等方式令人大開眼界。
視覺化與動畫
第一場分享的是來自 Adobe 公司的張文婷,分享的話題是《動靜之間,數字之美》,開場介紹了動畫的幾種實現形式,CSS、SVG、JS,之間的優劣,講了一些基於上述技術的動畫解決方案如 GSAP、lottie 等。最後還首次公開一種黑科技,基於 font-varitation-setting 的動畫。整個分享乾貨滿滿,文婷最後也獲得全場最佳講師的榮譽。
第二場分享是螞蟻金服樑文森給我們帶來的《AntV-讓資料栩栩如生》,整個演講主要是講述了 AntV 生態下的 G2、F2、G6、L7 等各個庫的演化過程,可以看出 AntV 對於視覺化有很多深入的探討和解決方案,並且由於阿里濃厚的開源文化氛圍,這些元件都有完備的開源推進計劃,給整個社群帶來很大的貢獻。
短暫的茶歇後,最後一場分享是來自百度的宿爽給我們帶來的《大資料視覺化效能優化之道》,這個話題是以 ECharts 為基礎,給大家講述視覺化效能方面的議題,提出了不少效能優化的手段,有基於場景特點的、程式層面的、使用者感觀上的、資料載入上的,也有很多實用的手段如演算法、重用物件、Web Worker、TypeArray、二進位制載入等。可以看出 ECharts 在這上面做了很多效能方面的優化。最後,講師也坦承 Echarts 存在一些不足之處,如文件、未能及時實現的 feature 等,講師也希望大家以 PR 的形式為開源社群貢獻自己的一份力。
特別感謝
特別感謝本次大會合作夥伴的鼎力支援:
感謝各位講師的精彩分享與參會小夥伴的肯定,是大家一起鑄造了這場前端領域的技術盛宴。
感謝 IMWeb 團隊所有的小夥伴們,對於大會的每一項準備工作,大家都專注而細緻,盡職盡責。
ImwebConf 2018 圓滿落幕!
ImwebConf 2019,讓我們一起期待精彩繼續!