Tweb2019年騰訊前端技術大會不完全總結 _Tweb2019年騰訊前端技術大會不

文章插圖
上周末，我有幸去深圳參加了2019年騰訊前端大會。本文是對本次分享的不完全總結。
是時候了解一下WebIDLby 吳小倩 - W3C中國總經理
吳小倩老師，為我們介紹了WebID —— 制定web規范的標準語言。Web IDL的關鍵在于定義了如何把DOM和相關的Web API映射到語言里，尤其是ECMAScript 。之前的標準都使用OMG IDL，沒有正式的對這些映射關系作出定義，實現者需要從字里行間猜測。一個統一的、規范的、標準的語言，可以避免各個瀏覽器廠商在實現同一個web api時出現差異，帶來兼容性問題。吳老師介紹了最新的關于網頁端支付的web api標準：
[SecureContext, Exposed=Window]interface PaymentRequest : EventTarget { constructor( sequence methodData, PaymentDetailsInit details, optional PaymentOptions options = {} ); [NewObject] Promise show(optional Promise detailsPromise); readonly attribute DOMString? shippingOption;}作為一名開發者，了解WebIDL，可以幫助我們更好的讀懂DOM API的定義，更好地認識瀏覽器和web，同時，有助于我們更好地書寫對web的想法提案，為web的發展貢獻自己的思考。
Headless CMS - 小微項目的業務中臺解決方案by 張云龍 - 巧子科技創始人
張云龍老師給介紹了strapi：一個數據到API的自動生成系統，為產品運營人員提供數據管理后臺。對于企業中的小微項目來說，strapi是一個很不錯的解決方案，對于個人開發者來說， strapi就是一個外包神器。
Flutter在騰訊企鵝輔導上的實踐之路by 涂金林 - 騰訊教育flutter負責人
涂金林老師首先介紹了flutter，并且從實踐框架及頁面棧管理、性能優化這兩個方面，介紹了flutter在騰訊企鵝輔導上的實踐之路。最后，介紹了對項目中某個模塊進行flutter for web改造的過程。整個演講還是有不少干貨的，對其他flutter的使用者有一定的借鑒意義。
大型Web項目可用性提升優化by 郭林爍 - 騰訊AlloyTeam高級前端工程師
郭林爍老師介紹了騰訊文檔在可用性提升上的實踐。
1、腳本錯誤監控、優化和持續跟進。從最基本的腳本錯誤監控開始，使用CORS避免Script Error，結合sourcemap定位錯誤代碼。發現問題后，通過代碼歷史提交記錄，找到開發者，作為問題的處理人。接著生成bug單，推送報警給問題處理人，并跟蹤問題的解決過程。同時，將監控前移，上線前使用自動化測試等流程減少Bug數量。
2、前端日志系統的搭建、優化和打通。在關鍵點上報日志，且上報是可以采用worker等方式避免日志上報對主線程的影響。使用特定的id，打通全鏈路日志，并且時刻關注用戶的反饋，通過反饋不斷更新、優化測試用例，避免問題再次出現。
3、騰訊文檔白屏監控體系和優化。優化資源的加載，加載失敗時，進行重試，并且及時給用戶反饋。可以使用SRI來保證資源加載的完整性，使用CSP保證加載正確的資源。在頁面卡死時，可以結合上面兩點的日志定位問題，然后進行修復。
騰訊文檔搭建了一整套完善的可用性監控體系，其流程和經驗是值得學習的。所有的這些工作，都是為了給用戶提供更好的體驗。
微信小程序同構方案新思路by June - 騰訊web前端高級工程師
June老師為我們介紹了微信小程序同構方案的新思路 —— kbone.
目前市面上有許多的小程序同構方案，如mpVue等。這些同構方案讓我們可以直接使用vue、react等進行小程序開發，一套代碼，多端運行。這些同構方案都是同一個思路：將Vue模板靜態轉換為WXML模板，再交由小程序渲染。但是這個方案有一定的問題：對于一些復雜的模板語法無法轉化，比如富文本渲染、過濾器、圖片預覽等等。這是因為vue的模板語法畢竟和wxml語法不對等。