創心-第14屆D2參會總結

螞蟻保險體驗技術發表於2019-12-17

又是一年前端盛會D2，度過了非常充實的一天。感謝各位分享嘉賓和組織者辛勤的準備~還收了很多好看的貼紙hhh，曬下參會證和電腦背面~

IMG_9983.JPG

接下來就是會議的具體內容啦，內容比較多，如有疏漏請各位看官批評指正~

大會的全部PPT官方已經放到GitHub上了，可以自行取用~ github.com/d2forum/14t…

圓心致辭

前端這些年來，充滿著變革和重塑，從應用上層逐漸深入到語言框架底層，對前端的要求也在不斷變化，始終有著巨大的挑戰和機遇。

IMG_9976.PNG

五個挑戰（去年也講了五個挑戰，不過內容有所不同~）

  1. 端側渲染體系的重塑， 從PC時代到無線時代，再到未來的IOT時代，在渲染方面誕生了很多優秀的技術，RN, Weex, Flutter，小程式體系等。基於底層的渲染思路，Native的渲染，2D、3D效能體系，包括WASM整合到無線端來渲染， 都帶來了很多可能性。
  2. 2B中後臺場景垂直領域的深度沉澱。 從2C場景到2B場景，以前由大量外包全棧支撐的中後臺體系也在變為專業前端的主戰場。中後臺領域有框架、佈局、元件、資料交換，龐大體系的運作（跨團隊協作）等各種挑戰，在技術上也有視覺化，Web Excel, 編輯器，搭建，智慧化等各種方向值得深入。不同域的體系下如何和後端體系打通，領域模型的貫穿等，都是需要探索與沉澱的。
  3. 從傳統開發模式到雲+端開發模式，雲使業務體系平臺化，介面化，在端側效率化，業務化。前端關注到從頁面到業務。Serverless一定是未來趨勢，前端能力必須匹配未來技術要求。
  4. 前端智慧化， 頁面的構成，結構，標準化。這一塊淘系的 imgcook 已經做得很不錯了，在今年的雙十一也有智慧程式碼生成的大規模落地，可以瞭解一下~
  5. 語言底層的深入。 國內的語言與國際接軌，需要從底層做起，參與標準化的制定，促進JS語言的發展。最近賀老也加入了TC39（去年一直吐槽的class field可以當面跟TC39成員吐槽了?），希望以後在標準化的制定上，能看到越來越多國人的聲影。

上午- 語言框架專場

Let's work together on the future of JavaScript through TC39

講師：Daniel Ehrenberg

終於見到了一直以來感覺很神祕的TC39成員。Daniel 還是很可愛的，分享精彩而流暢，經常引用《論語》來總結，看來還是對中國文化有一些瞭解的~

IMG_9894.JPG

Daniel 給大家講解了TC39的工作機制，一個新特性從提出到成為標準需要經歷以下階段，總體來看還是非常嚴謹的

  • Stage 0: strawman - 腦暴階段，有什麼想法都可以提出~
  • Stage 1: proposal - 討論階段，由TC39的成員發起一個正式的新特性提案，並與其他成員和社群進行討論
  • Stage 2: draft - 草案階段，需要包含兩個實驗性的具體實現
  • Stage 3: candidate - 候選階段，基本已經準備實施，需要包含兩個符合規範的具體實現
  • Stage 4: finished - 通過test262（新特性的測試倉庫）的驗收，釋出到年度規範

然後介紹了目前幾個推進到各個階段的的特性，其中Stage4的應該馬上就會出現在ECMAScript 2020的規範中，比如BigInt, Dynamic import, 還有呼籲已久的Optional Chaining（TS 3.7已經支援了~），其他的就不細講，可以在這裡看到TC39的工作進展，也可以提issue發表觀點並與他們交流~

github.com/tc39/ecma26…

JS語言在引擎級別的執行過程

講師：周愛民

周愛民老師功力深厚，對JS的底層執行過程非常熟悉，而且已經有段時間沒聽過這種不夾雜產品介紹，純粹探討技術的分享了~迴歸語言本身，感覺很親切。（雖然產品介紹的分享也很有收穫，但是這類分享很難有時間詳細講解具體實現，只能是發個架構圖，後面自己研究，這種純技術的分享，可以著重於某塊細節講的很深入，聽完就會立即學到一些以前可能不知道的內容，在技術上還是很有收穫的~）

整體內容很偏底層，包括作用域，環境，執行上下文等一些基礎概念，以及詞法環境規範，屬性描述規範，屬性識別符號規範等標準中的細節，平時工作場景中很難有機會深入瞭解這些內容，所以還是非常有收穫的，PPT應該很快就會放出來，就不全部展開來講了~講個印象最深刻的地方吧

這段程式碼是老師PPT中的，當面試題應該能考倒絕大多數人~

const obj = {
  foo() {
  	return this;
	}
}

(obj.foo)() === obj // true
eval('obj.foo')() === obj // false
複製程式碼

為什麼 obj.foo 和 eval('obj.foo') 都返回了一個函式，但是執行結果不一樣呢？

這就JS引擎搞的事情了~在執行時分為語句執行和表示式執行兩種情況，參照下面這張圖

IMG_9909.JPG

  • 語句執行，即 eval('obj.foo') 這樣的，對於這種型別，返回結果中如果包含引用，會用GetValue把引用取出來然後去除，所以返回值中看不到引用
  • 表示式執行，即 obj.foo這樣的，返回結果中可以正常包含引用

所以 eval('obj.foo') 返回的結果中丟失了對obj的引用，this就只能指向全域性作用域了~在瀏覽器中跑了一下果然如此

Jietu20191215-160943@2x.png

巢狀多級也是一樣的，只要有引用，都會去除~下面的程式碼也印證了這個結論

Jietu20191215-162248@2x.png

這種細節還是很有意思的，雖然不是專門搞這個方向的話，對平時工作可能沒有什麼幫助，但是作為一個前端，如果能夠掌握JS在引擎層執行細節，還是很鍛鍊內功的~

fibjs 模組重構 - 從回撥到協程

講師：陳壘

fibjs 與node一樣，也是一套JavaSscript執行時，底層都用的V8引擎，區別是其內部用邏輯鎖來替代回撥來控制非同步，這個思路還是很新穎的~

IMG_9910.JPG

根據講師貼出的效能對照，將FIBJS ORM模組用此方法重構後，效能上還是有很大提升的

IMG_9911.JPG

不過其設計上不能與現有的node生態相容，感覺對於外部使用者來說還是缺乏些落地的動力
在知乎上看到了響馬老師的回答，很多內容本次分享也都有提到，想對fibjs有更多瞭解的可以參考一下~

www.zhihu.com/question/26…

下午-工程化專場

前端工程下一站：IDE

講師：上坡，吭頭

IDE是今年阿里前端委員會定下的重要方向之一，經過大半年的建設，也取得了不少進展。整個IDE核心的技術實現是極其複雜的，看下下面這張架構圖就明白了，每一塊拎出來都是可以做很久的。

IMG_9923.JPG

所以一小時的分享，在技術實現上就是點到為止了，如果對整體IDE的技術細節比較感興趣的話，可以等會後講師的PPT，下面也有幾篇不錯的文章可以參考~

下面主要想談下我個人對Web IDE的看法，最開始發起IDE共建的時候，我以為是直接搞個線上IDE來替代現有的開發環境，以後開發所有專案就都用這個了，個人觀點還是不太支援這種做法的，原因主要有以下兩點

  • 實現技術難度極高，底層都是基於一些開源專案（monaco editor, xterm.js等）做一些二次封裝，但是將其整合起來，中間要踩的坑還是非常多，需要耗費大量時間精力
  • 不能有效解決痛點，甚至增加痛點：Cloud IDE最主要的就是遠端編碼，構建，部署，省去了配置環境的複雜。但是在綜合開發體驗上，目前沒有人會覺得開發大專案時使用Cloud IDE會比本地開發體驗好，不僅重度依賴網路，而且效能也是個很大的問題。

後面發現其實共建的是IDE的核心，也就是 KAITIAN Framework（名字起的真的炫酷~)，然後各業務基於這套核心來封裝自己的編輯器甚至整套IDE，比如支付寶小程式的IDE，淘寶開發者工具，imgcook的線上編輯器，阿里雲的函式計算編輯器等，把底層編輯預覽除錯能力等抽出來統一維護，業務在上面定製專有邏輯，對於特定的業務場景來說還是很有價值的。

Jietu20191217-112508.png

總之，作為一個技術人，能夠參與這樣複雜有挑戰的專案，並最終實現出來，肯定是很有成就感的，希望日後自己也有機會參與這樣的建設中~

Babel: Under the Hood

講師： Nicolò Ribaudo

這位小哥還是個學生，年輕有為，講的也非常棒~

Babel轉化的核心鏈路：原始程式碼-原始AST -轉化後的AST-轉化後的程式碼

主要功能由以下幾個包來實現：
@babel/parser 將原始碼解析生成 AST，會經歷以下三個步驟

  • 詞法分析（Lexical analysis）：code to token，並進行token合法性校驗，比如註釋如果沒有用// 或 /**/來寫就會報錯
  • 語法分析（Syntax analysis)：token to AST，並進行基本的語法校驗，比如分號問題等
  • 語義分析（Semantic analysis)：會進行上下文相關的分析，如果有

@babel/traverse 以深度優先的形式遍歷AST，並進行修改和轉化
@babel/generator 根據AST生成新的程式碼
@babel/core Babel核心庫，被很多babel配套設施依賴，用於載入 preset 和 plugin

IMG_9936.JPG

@babel/template 採用 template 的形式，簡化修改 AST 的過程
@babel/types 包含所有 AST 中使用的型別

然後還簡單的講解了一個babel-plugin的實現，內容是進行如下轉化

// 轉化前
const x = throw new Error("Err!") 
// 轉化後
const x = (() => {throw new Error("Err!");})();
複製程式碼

外掛的寫法也很簡單，就直接貼程式碼了~

export default function Plugin() {
  return {
    // 外掛名稱
    name: 'throw-expressions',
    // 外掛選項
    manipulateOptions(opts) {
      opts.parserOpts.plugins.push('throwExpressions')
    },
    // 遍歷 AST 並進行操作的方法
    visitor: {
      UnaryExpression(path) {
        const {node} = path;
        // 不是拋異常的表示式就不處理
        if(node.operator !== 'throw') return;
        // 基於模板生成新的 AST 結構
        const iife = template.expression.ast(`(() => {throw ${node.argument}})()`);
        // 替換原有 AST
        path.replaceWith(iife);
      }
    }
  }
}
複製程式碼

最後推薦一個線上程式碼生成AST的網站，學習AST時很有用：astexplorer.net/

基於瀏覽器的實時構建探索之路

講師：玄寂（玄字輩，一聽就是大師的名號~）

玄寂老師讀完這兩篇文章，受到了些觸動，開始了瀏覽器構建的探索之路~

現在某些專案的依賴包實在太大，尤其是一些中後臺專案，專案剛搭起來，還沒寫頁面呢，就先下個幾百MB依賴，想起來這張廣為流傳的圖

IMG_9629.JPG

所以瀏覽器端的構建，概念上非常新穎，但確實是有場景和訴求的，玄寂老師將瀏覽器的實時構建實現的核心歸納以下幾點並分別進行講解~

  • 設計資源⽂件的載入器
  • 設計資源⽂件的編譯體系
  • 設計瀏覽器端的⽂件系統 - 藉助了 BrowserFS
  • 設計瀏覽器端的包管理：即瀏覽器端npm，實現了動態下發，依賴快取，資料結構與瀏覽器檔案系統橋接等

目前的探索產物是 Gravity，一套實現瀏覽器實時構建的事件流集合，可以跑通瀏覽器端構建 React 專案的 Demo，還是很牛逼的，如果能夠在生產環境穩定使用，應該能夠節省不少伺服器資源。

不過個人覺得與現有的webpack工具鏈不相容是個比較大的問題，比如css-loader, ts-loader這些很常用的，得重新建設一遍自己的工具鏈生態。在現場也進行了提問，玄寂老師的回答是，由於事件流機制的設計都是一樣的，這些loader遷移起來也會很方便。

玄寂老師的blog上也有很多其他的優質內容，可以關注一波
github.com/pigcan/blog

Distributed Front-End Architecture

講師 Ahmad  Amireh

這場質量比較一般，講師講的時候有些緊張，可能準備不是特別充分，場面氣氛有點尷尬~而且內容上其實就是在講微前端，可能放在微前端專場會更合適一些。整個過程中沒做太多記錄，就不細講了。

不過講師本身還是很有才華的，寫了個 happyPack的專案，用於優化webpack的構建速度的，star數也不少，有興趣的可以參考一波~
github.com/amireh/happ…

夜場部分

和去年一樣，今年D2也有著夜場環節，非常精彩~先來波圓桌會四巨頭的照片

IMG_9970.JPG

從左至右依次為

  • Hax賀老
  • 西祠衚衕創始人，fibjs作者響馬老師
  • 螞蟻體驗技術部大老闆玉伯大佬
  • TC39核心成員 Daniel Ehrenberg
  • 以及可愛的翻譯小姐姐

在圓桌會之前還有三個很精彩的lightning talk, 依次為

  • 海量節點樹的高效能渲染，使用各種騷操作將海量資料下節點樹的渲染效能提升了18倍，這套方案預計明年2月開源，可以期待一波~
  • 阿里巴巴營銷研究和體驗中心的凌徵大佬分享前端工程對營銷業務的賦能。包括創意生成，圖片實時渲染，字型渲染，視訊創意生成及編輯等。最近也在參與營銷相關工作，深知這其中每個模組對前端技術都非常有挑戰，能夠實現並在業務中順利落地，為業務帶來效果，是非常不容易的~
  • 阿里南京研發中心的亨睿大佬分享黑科技錄屏技術XReplay，可以7*24不間斷錄屏，清晰度極高，且大小隻有MP4檔案的1/200，節省了大量伺服器儲存資源。具體的技術實現涉及到各種演算法專利，在內網上看到了一些相關文件，在這裡不便於公開，後面會放在內網的語雀上供阿里的小夥伴們參考。

接下來講講圓桌會的內容~以QA的形式總結一下各位大佬在前端路上的各種思考及看法

Q：優秀前端都有什麼特質？
A：畫素思維（追求極致的還原度），充滿好奇心，能與他人良好合作。善於讀書，善於思考，實現自己的認知升級。關注基礎知識及API的底層實現，不要做單純的API Caller~

Q：入行時和現在對前端的認知和思考，有沒有發生什麼變化？
A：前端始終跟人機互動息息相關，隨著終端運算能力的提升，終端裝置使用場景越來越複雜，前端對即時性，好玩性以及使用者體驗要求越來越高。

Q：帶團隊以來對個人有什麼改變？
玉伯：帶團隊以來個人的改變其實不是很多，主要是從開源社群中汲取到很多經驗。開源天然不是一個人在幹活，通過社群運營的大型開源專案，本身就涉及到多人之間的協同。所以就以開源專案的方式運作實體團隊，團隊成員有問題可以通過類似提issue的方式來溝通解決，同時也像管理大型開源專案一樣，非常注重內部交流及高效協同。

Q：如何始終保持對技術的熱愛？
玉伯：技術的力量，是整個社會創新最大的動力之一。始終覺得行業很有意思，每隔一陣又會有很多想不到的驚喜
響馬：覺得跟人打交道比較費勁。寫程式本身就是放鬆的~
Danel：學習新事物，給出問題的解決方案，對事情保持好奇心。

Q：成長的關鍵點？
Hax：多年前發現Firefox中有個JS行為與標準不一致，就給Firefox提了個issue，竟然得到Javascript之父回覆，非常驚訝。加入TC39也是很重要的事情（順帶又吐槽了class field?)
玉伯：從上學談起，到加入淘寶及支付寶，在all in 無線時代的堅守，到最終實現破局，中間有非常多的心路歷程，強烈推薦看下這篇文章~詳細講述了玉伯的成長之路，個人覺得值得每一位前端同學閱讀學習。
我的前端成長之路-玉伯

關於夜場的內容有位網友總結了一份隻字不差版的，內容更加詳細，也非常推薦閱讀~
www.yuque.com/zhaishenkin…

最後來一波夜場大合照，歡聲笑語中圓滿結束本次D2~

IMG_9981.JPG

總結

D2從創辦至今，已經走過14個年頭了，雖然只參加過去年今年兩屆，以及在網上零散地看過前幾年的部分內容，但也從中真實感受到前端這幾年來的高速發展，不斷突破自我，拓寬邊界，挑戰未知的可能性。D2也辦的越來越好，基本可以說是國內質量最高的前端會議了（當然我們螞蟻的SEE Conf也很不錯，不過有很多設計師的內容，不算是純前端的大會），雖然票價比較貴（今年還比去年又漲了…），但就質量而言，還是輕鬆值回票價的~（這麼硬的廣告，還不快送我明年門票！）

從去年到今年，個人的最大變化就是結束了學生時代，正式成為一名阿里的前端工程師。”優秀的前端不是在阿里，就是在去阿里的路上“，這句話雖有調侃之意，但目前阿里在前端技術上的引領和突破確實明顯優於其他公司。每年D2都能拿出各種新鮮的東西，並且並不是空造輪子，很多產品已經經過了千萬乃至億級UV的考驗，是真正能夠賦能業務，為其帶來顯著價值的。

個人而言，看到這些新鮮玩意，從去年的高呼臥槽，到今年的比較淡定，抽出更多時間精力去聽聽外部的分享，主要是部分內容都在內部宣傳已久，已經有過相關輸入了?比如今天的微前端 ，IDE核心KAITIAN，XReplay等議題，在內部，這些專案的開發者們已經撰寫了很多文件資料供大家參考了，甚至還可以直接看原始碼，一窺內部細節。只要肯付出時間研究，收穫肯定是遠遠多於今天會上這一小時的~

說了這麼多，核心觀點就是：想提前瞭解，甚至親身參與和打造這麼多牛逼的產品，還不快加入我們！

下面是招聘時間~

關於我們：
我們是螞蟻保險體驗技術團隊，來自螞蟻金服保險事業群。我們是一個年輕的團隊（沒有歷史技術棧包袱），目前平均年齡92年（去除一個最高分8x年-團隊leader，去除一個最低分97年?）。我們支援了阿里集團幾乎所有的保險業務。去年我們產出的相互寶轟動保險界，成為螞蟻乃至整個阿里集團的明星產品，今年隨著相互寶的使用者總數破億，螞蟻保險的全線業務都在繼續蓬勃發展。團隊人才濟濟，清華、浙大、哈工大，博士碩士都有。還有社群活躍份子相學長，easymock作者chuangker。基本每週都有技術分享，技術氛圍極好，技術交流多，業餘生活也很豐富，來波團隊各位帥哥美女的照片~

IMG_9980.PNG

伴隨著事業群的高速發展，團隊也在迅速擴張，歡迎各位前端高手加入我們~我們希望你是：技術上基礎紮實、某領域深入（Node/互動營銷/資料視覺化等）；學習上善於沉澱、持續學習；性格上樂觀開朗、活潑外向。
如有興趣加入我們，歡迎私信勾搭，或傳送簡歷至郵箱：xingyan.hyx@antfin.com

相關文章