創心-第14屆D2參會總結

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

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

大會的所有PPT官方已經放到GitHub上了，能夠自行取用~ github.com/d2forum/14t…

圓心致辭

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

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

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 仍是很可愛的，分享精彩而流暢，常常引用《論語》來總結，看來仍是對中國文化有一些瞭解的~

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引擎搞的事情了~在執行時分爲語句執行和表達式執行兩種狀況，參照下面這張圖

• 語句執行，即 eval('obj.foo') 這樣的，對於這種類型，返回結果中若是包含引用，會用GetValue把引用取出來而後去除，因此返回值中看不到引用
• 表達式執行，即 obj.foo這樣的，返回結果中能夠正常包含引用

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

嵌套多級也是同樣的，只要有引用，都會去除~下面的代碼也印證了這個結論

這種細節仍是頗有意思的，雖然不是專門搞這個方向的話，對平時工做可能沒有什麼幫助，可是做爲一個前端，若是可以掌握JS在引擎層執行細節，仍是很鍛鍊內功的~

fibjs 模塊重構 - 從回調到協程

講師：陳壘

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

根據講師貼出的性能對照，將FIBJS ORM模塊用此方法重構後，性能上仍是有很大提高的

不過其設計上不能與現有的node生態兼容，感受對於外部用戶來講仍是缺少些落地的動力
在知乎上看到了響馬老師的回答，不少內容本次分享也都有提到，想對fibjs有更多瞭解的能夠參考一下~

www.zhihu.com/question/26…

下午-工程化專場

前端工程下一站：IDE

講師：上坡，吭頭

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

因此一小時的分享，在技術實現上就是點到爲止了，若是對總體IDE的技術細節比較感興趣的話，能夠等會後講師的PPT，下面也有幾篇不錯的文章能夠參考~

• 從VSCode看大型IDE技術架構
• 帶你開發和調整VSCode源碼
• 解密VSCode斷點調試原理

下面主要想談下我我的對Web IDE的見解，最開始發起IDE共建的時候，我覺得是直接搞個在線IDE來替代現有的開發環境，之後開發全部項目就都用這個了，我的觀點仍是不太支持這種作法的，緣由主要有如下兩點

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

後面發現其實共建的是IDE的內核，也就是 KAITIAN Framework（名字起的真的炫酷~)，而後各業務基於這套內核來封裝本身的編輯器甚至整套IDE，好比支付寶小程序的IDE，淘寶開發者工具，imgcook的在線編輯器，阿里雲的函數計算編輯器等，把底層編輯預覽調試能力等抽出來統一維護，業務在上面定製專有邏輯，對於特定的業務場景來講仍是頗有價值的。

總之，做爲一個技術人，可以參與這樣複雜有挑戰的項目，並最終實現出來，確定是頗有成就感的，但願往後本身也有機會參與這樣的建設中~

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

@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/

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

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

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

• formidable.com/blog/2019/n…
• dev.to/pika/a-futu…

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

因此瀏覽器端的構建，概念上很是新穎，但確實是有場景和訴求的，玄寂老師將瀏覽器的實時構建實現的核心概括如下幾點並分別進行講解~

• 設計資源⽂件的加載器
• 設計資源⽂件的編譯體系
• 設計瀏覽器端的⽂件系統 - 藉助了 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也有着夜場環節，很是精彩~先來波圓桌會四巨頭的照片

從左至右依次爲

• 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~

總結

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

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

我的而言，看到這些新鮮玩意，從去年的高呼臥槽，到今年的比較淡定，抽出更多時間精力去聽聽外部的分享，主要是部份內容都在內部宣傳已久，已經有過相關輸入了😂好比今天的微前端 ，IDE內核KAITIAN，XReplay等議題，在內部，這些項目的開發者們已經撰寫了不少文檔資料供你們參考了，甚至還能夠直接看源碼，一窺內部細節。只要肯付出時間研究，收穫確定是遠遠多於今天會上這一小時的~

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

下面是招聘時間~

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

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