標籤：

參加 2017 年 8 月 26 日北京第三屆 FEDAY 是個什麼樣的體驗？

01-03

我也來發一張講師的合影！

前一天晚上的飛機，因為晚點，到北京住下來已經2點半。4點鐘又起床去天安門看升旗，之後去會場旁邊國家體育館看了鳥巢。所以真的開場時已經非常困了，所以我偶爾會聽著聽著就睡著了。。下面是我聽到的部分內容：

--上午

第一講：談項目中如何選擇框架和庫 - 張克軍

張克軍老師一開始便說，這次分享主要是針對多人協作的商業項目，然後分析這類項目的性質特點，並據此開始闡述，然而由於我真的實在太困了，張老師講到選擇的基本前提時，我睡著了，對此表示非常抱歉。 講話結束時，大家的掌聲終於把我弄醒了。

第二講：webpack打包機制及調試優化 - Alexey Lvanov

這位講師是postcss作者Andrey Sitnik力薦過來，與他一樣是俄羅斯籍的，我們大多數人英語口語便不是非常溜，碰上俄羅斯口音風味的英語，自然更難吃得消。幸得PPT非常細緻，邏輯清晰，而且內容很豐富，看著PPT也能明白講師的主要內容。

內容跟標題很貼切，就是先講了webpack的打包機制，並據此列舉了幾個常會遇到的問題及解決手段。然後闡述了如Tree shaking等優化手段，最後展示兩個webpack打包分析工具。

第三講：如何用JavaScript做好一個大型應用 - 雲際

我當時還是比較迷糊，大致就是分析了構建大型應用的主要問題跟解決方案。

問題1：介面數據模型複雜，層次深，嵌套多，不知道屬性類型、是否一定存在，會導致後續bug，不穩定。

解決方案 -&> TypeScript，並且前後端採用統一 .idl文件 生成統一的數據模型。

問題2：非同步邏輯複雜。解決方案-&> RxJS

--下午

第四講：從Cycle.js談函數式與響應式編程 - Jssin Yip

PPT上的題目其實是 React Programming Stream With Cycle.js。所以實際上並未多講函數式編程以及cycle.js的具體應用，主要是講響應式編程與事件流本身，生動形象的對他們進行了解釋闡述，個人感覺講的挺好的。

提問環節時，有人問到現有的vue、react如何更好的運用cycle.js（大致是這麼個意思吧），葉老師也回答了，如果要用cycle，就應該是全新的一個項目。他跟現有的一些框架模式混用其實是不合適的。說明大家雖然意識到這是個好東西，但還未掌握其根本思想。有種一兩年前在問如何在vue中引用jquery的味道。

第五講：鏈家工程化實踐 - 楊永林（教主）

說實話呢，這個工程化，我一開始是以為純前端項目構建的工程化。聽著聽著發現與我的理解有偏差。教主闡述了他們鏈家整體web項目的架構模式演變過程。從傳統的MVC到前後端分離，再到後台純粹提供微服務，前端來負責業務的一個過程。

個人理解，教主講的工程化，主要是講他們前端最終如何通過node做一個中間層，來實現業務層遷移到前端來handle。然後中間具體闡述了這個演變過程，遇到的問題，以及如何解決。

第六講：基於React Native的三端技術實踐 - 劉威（putaoshu）

其實我對這個議題並不是很感興趣，聽一半我也睡著了，但內容還是非常豐富的，講了很多用RN時的關鍵問題以及解決方案，對於使用RN或者對RN有興趣的同學來說，我覺得還是非常乾貨的。PPT我目前還沒拿到，等有了我放一個。

第七講：WebAssembly在白鷺引擎中的實踐 - 王澤

這個應該是大家最熱情的一場了，主要得益於王澤同學講話自帶熱情氣氛，以及內容的乾貨。（我很欽佩他，但他看著非常年輕，不想叫老師顯得他老了些）

王澤同學從如何提高JavaScript邏輯效率切入，闡述了js執行過程的原理，進而說明能優化的點及解決方案，最終推出WebAssembly，並說了這當中的坑以及他們是如何解決的。最良心的是，最後他建議我們先不要學WebAssembly。

第八講：Machines must sudder — Linters and tools for font-end development - Andrey Sitinik

最後壓軸的是postcss的作者。他的分享的主旨就是讓機器、工具幫我們做一些重複的、boring的工作。然後說了項目中引用Linter的各種好處，最後列舉了幾個工具。

感覺一般吧，PPT上很多表情包，倒是挺有意思的。但更讓我感觸的是，提問環節時，多個人問 這個postcss怎麼跟less、sass結合這種問題，我感覺作者他都要崩潰了。感覺他們都還未明白postcss到底是做什麼的。

最後就是合影留念，然而我趕飛機，先跑路了。

會場上TypeScript、RxJS出現的頻率很高，我自己這半年也一直在關注，另外個人也感覺響應式函數編程，會在以後的前端推進中，顯得越來越出眾。

總體來說，不虛此行~

最後的最後，我想說個事，鄉下人第一次來北京很激動，想找個 北京 字眼，來張紀念性的照片，可是為什麼作為我大天朝的帝都，機場連個醒目的 北京 這兩個字都沒有？？我找了半天才勉強找一個湊數的。

不過北京的夜色還是可以的。

  1. 堵車遲到了華麗麗地錯過了克軍T_T，彷彿錯過了一個億。
  2. 進場的時候剛好是 Alexey 剛開始講，瞬間聽懵了，我上個月還在吐槽 JSconf 不夠i18n，這 FEDAY 也太 i18n 了完全聽不出來是哪國語言，這樣的小語種在大會上居然沒有配翻譯……兩分鐘後隱約意識到他是在講英語（扶額……十分鐘後終於能聽懂一部分了（扶額……我等弱雞給Alexey的俄式英語跪！下！了！不過話說回來，Alexey 講的是 webpack 的原理和打包機制還是乾貨誠意滿滿的，因為 webpack 本身沒有什麼完整通俗的教程，非常適合我這種時不時被 webpack 這門玄學虐的死去活來的萌新，感覺 get 到了好多東西，ppt 可以有，強烈推薦英語聽力666的同學去看一遍現場視頻。※
  3. 不想聽釘釘的廣告和安利，所以11點我就中途離場了。出去看場電影聚個餐再回來。
  4. 教主的 talk 被提前了20分鐘，所以我返場時只趕上了教主的一個 ending……又華麗麗錯過了一個億T_T。個人認為教主講的是關於一個團隊和項目的工作流程上的問題解決辦法，比較適合對團隊和流程有話語權的老油條們來聽聽。
  5. 《基於 React Native 的跨三端技術實踐》……講真現在讓我回想起來已經沒什麼印象了，也沒什麼乾貨，聽起來感覺也只是一個普通的 RN 安利，所以 QA 環節大家也問不出什麼有技術含量的問題。
  6. 白鷺引擎帶來的關於 WebAssembly 的東西在本次大會上異常亮眼，給王澤五星好評，演講思路清晰充滿乾貨沒有硬廣，不安利技術不安利產品（看他的題目正常人都會覺得是硬廣和安利），就是好好坐下來和你聊他們在開發性能上要解決和解決了哪些問題，我覺得是國內講師裡面講得最好的一個。也是讓我覺得 get 到了好多有價值的東西，雖然我沒打算入 wasm 的坑2333333，觀望吧。※
  7. ai 雖然頂著 postCSS 和 autoprefixer 的頭銜，但是在本次大會上講的是關於 ESlint 自動化解決的問題相關的東西，無論是演講思路、還是英文發音、還是充滿兔斯基和皮卡丘的 slides、還是幽默的語言，也都要給五星好評，大神看問題的全局觀是需要我們這種弱雞不斷努力看齊和學習的。※

---------------------

啊，為什麼我總是來知乎回答這種問題……其實我不常用知乎的。

這是我第一次參加 FEDAY 的活動，相比於其它的技術大會 FEDAY 的規模可能屬於較小的類型，整場活動只有1個會場8個主題，但是給我的總體體驗還是小而精的。除了一些我可能沒太接觸過的主題以外，大部分主題都讓我覺得還挺有趣，或者了解到了一些新的東西。

本次大會的8個主題裡面關於前端工程化的有3個：

  • 《Webpack打包機制及調試優化》- Alexey Ivanov
  • 《鏈家工程化實踐》- 教主（鏈家）
  • 《讓機器解放生產力 —前端開發必備工具》- Andrey Sitnik（PostCSS 作者）

有5個主題是關於框架和庫的：

  • 《談項目中如何選擇框架和庫》- 張克軍（豆瓣）
  • 《如何用JavaScript做好一個大型應用》- 孟紅倫（阿里）
  • 《從Cycle.js談函數式與響應式編程》- 葉俊星（美團）
  • 《基於React Native的跨三端技術實踐》- 劉威（京東）
  • 《WebAssembly 在白鷺引擎中的實踐》- 王澤（白鷺引擎）

說幾個給我印象較深的主題。

1.《Webpack打包機制及調試優化》

來這次 FEDAY 主要想聽的一場，是由一名俄羅斯的工程師帶來的。因為我的英語聽力本來就比較捉急，對於這場帶有俄式口音的英文分享很多部分就只能意會了 。後半部分講 Webpack 的優化是重點，提到了已經被討論了很久的 tree-shaking、scope hoisting ，唯一新的點是還在實驗中的特性 pure module。

pure module 其實是對於 ES Module 的複合導出（re-exported）做了進一步的優化，這個優化主要會對於一些使用了複合導出的大型庫效果比較明顯。比如現在有一個叫 big-module 的庫通過 index.js 導出了它的一些模塊：

export { a } from "./a";
export { b } from "./b";
export { c } from "./c";

業務在使用這個庫的時候，假如用到了其中的模塊 a 和 b：

import { a, b } from "big-module";

實際打包時候雖然只用到了 big-module 中的模塊 a 和 b，但是 index.js 和模塊 c 由於有可能有副作用也都會打包進去。而在 pure module 模式下，上面的 import 可以理解為變成下面的形式：

import { a } from "big-module-pure/a";
import { b } from "big-module-pure/b";

這相當於繞過了複合導出而直接獲取實際的模塊，index.js 和模塊 c 不會被打包。具體的使用可以看這個官方給出的例子。

演講中通過 tree-shaking、scope hoisting、pure module 等優化演講者將一個 case 的 bundle size 縮小了幾十倍，但是我覺得他給出 case 未免過於理想化，對於實際的工程而言優化效果應該並沒有這麼高。

2.《如何用JavaScript做好一個大型應用》

開始我以為這個主題會是關於工程化相關的，最後發現其實主要是講 TS 的 。雖然平時基本沒怎麼接觸過 TS ，但是整場聽下來發現它在一些大型應用的場景下確實可以發揮很大的作用。

進行分享是來自釘釘的前端負責人，從一個業務中很常見的問題入手解釋了 TS 在業務中發揮的作用。在一些大型業務場景下，一個數據模型有可能非常複雜。比如一個獲取用戶信息的介面可能包含幾十個欄位，而且有些欄位不是必有的（比如說同樣是用戶，對於企業用戶和個人用戶而言，有些欄位是一方有而另一方沒有的），在代碼中如果有個地方少了個驗證就有可能出錯，很難保證數據的完整性。而通過 TS 將這些數據模型確定下來就可以由它在代碼中開啟類型檢查，假如哪裡對一個不是必有的欄位少了判斷它就會進行提示。

在此基礎上，前端和後端還可以通過一個統一的介面類型描述文件生成相同的數據約定（在前端由介面描述文件自動生成 TS），這就可以防止掉很多在前後端約定上不統一帶來的問題。

3.《WebAssembly 在白鷺引擎中的實踐》

帶來這場演講的是白鷺引擎的首席架構師，可能是今天分享裡面說話最有意思的，總帶兒化音（代碼兒、安卓兒）。由於遊戲引擎和 WebAssembly 我都沒接觸過，所以這可能也是我聽得心態最輕鬆的一場。

演講主要介紹了 WebAssembly，以及白鷺引擎在使用 WebAssembly 過程中遇到的坑，講了很久最後結論是大家日常前端開發中最好還是不要用它……

其實 WebAssembly 的賣點主要是兩個，一個是它的性能好堪比 Native，另外一個是理論上可以將 C++，JAVA 等語言編譯為 WebAssembly 來運行。白鷺引擎目前提供了基於 WebAssembly 的 2D 遊戲開發環境，並且經過驗證也確實帶來了一定的性能提升。

在這場演講中我印象比較深的是白鷺引擎在基於 JavaScript 開發時候關於性能的一些問題。一個是基於 JavaScript 是一門動態類型的語言的特點，下面的代碼會影響 V8 的性能。因為 add 函數不是單態的（monomorphic）,其參數類型在不同的調用中是不同的，需要在運行時不斷判斷參數類型。

function add(x, y) {
return x + y;
}

add(1, 2);
add("a", "b");

另外一點就是 JavaScript 中的 GC 是自動的，或者說是不可控的。這個的好處是開發者完全不用去關心什麼時候進行 GC，都在語言層面自動幫你完成了。缺點是你無法保證一個可持續的高性能狀態。因為在 GC 的過程中會使得整個 JavaScript 的執行暫停，在遊戲中的體驗就是過一陣就會突然有個掉幀。這也是為什麼白鷺引擎想使用 WebAssembly 的原因之一。類似於 C 語言，在 WebAssembly 中是不支持 GC 的，需要開發者手動的操作內存。這對於開發者的要求更高，但是有助於保證穩定的高性能狀態。

在目前的普通前端工程中其實並沒有太多可以使用到 WebAssembly 的場景，唯一一個演講者提到的是圖像識別，因為需要進行大量密集計算。也許在幾年後的未來，當 WebAssembly 逐漸成熟起來之後才會得到更多的關注和應用。

4.《讓機器解放生產力?—?前端開發必備工具》

這一場是由 PostCSS 的作者 Andrey Sitnik 帶來，講的東西其實就是 lint 工具。包括 eslint、stylelint 以及一些其它方面可以使用 lint 工具的場景（ 比如 English lint 幫助檢查文檔中的單詞拼寫）。

總體內容其實還蠻輕鬆的，主要給我帶來的其實是一種思路上的轉變。在 Andrey Sitnik 的演講內容里所包含的不僅僅是說 lint 工具可以解決代碼質量層面的問題，還有在實際工作層面的。

比如說演講中提到 lint 工具對於新員工的意義以及對團隊關係的幫助。新人在剛進入團隊的時候往往寫出的代碼在 code review 時候要被打回去，說你哪裡哪裡寫的有問題，可能寫了10行代碼9行都要改，這對於新人來說體驗還挺不友好的。假如是 lint 工具來跟他提示說你哪裡得改一下這就友好得多。

在老員工看到新人代碼時候可能就覺得，哎這個新人怎麼寫的代碼怎麼這麼爛，其實可能只是因為新人的代碼和團隊的代碼風格不太一致而已，但是可能會導致對新人的評價降低。如果老員工看到的代碼已經被 lint 工具修正了風格上的問題，可能實際再看到的問題就很少了。

總結

這次 FEDAY 雖然在組織上有些小插曲（中午的盒飯、遲來的 T 恤、略顯匆忙的送書環節），但是內容上總體來說還是質量比較高的。另外時間和選址都不錯（中午吃完飯去旁邊的奧體溜達了一圈，空氣真的好），期待明年再見啦 。

@Jasin Yip 的分享很好。而且 slide 是英文的，圖文兼備。完全不用給 andrey 他們翻譯。省了好多力氣。

其他有時間再補充2333

feday 每次都有乾貨，不管怎麼說，波大幸苦了～估計沒去的朋友到時候有啪啪踢看(?￣▽￣)?

由於這幾天老婆預產期，沒有能到現場，但是依然逃不過朋友圈和微信群。

觀察到了各位大佬的合影。

（為了保護名人隱私，賀老的就不放出了）

不過我看到的好像不是這張圖啊。

。

。

。

。

。

。

第二次參見分享大會，感覺還是這種小而精的分享會適合我。

分享的內容就不講了。

其他感受:

  1. 還是要好好學英語啊，兩場英文分享結合ppt只能聽懂七成吧。
  2. 聽有人叫了聲「yùbó」，我以為是玉伯，還感覺欸？？我記得不長這樣啊？？ 咋還來組織大會了呢？？看了微信群才知道聽錯了，是裕波大大（＞﹏＜）
  3. 遠觀到賀老，聲音還挺好聽的哈。
  4. Andrey回答第一個（或者是第二個）問題的時候，都已經說了PostCSS跟那些預編譯器是互補、不衝突的（大概是這個意思），結果後面又問了兩個幾乎一樣的問題。
  5. 大佬們都很年輕嘛。

推薦閱讀：

※Weebly 官網是怎麼把 2560x1400 的圖片壓縮到如此之小的？
※React 有哪些優秀實用的組件？
※HTML5 能不能完全取代 Flash ?
※為什麼有那麼多編輯器插件？
※沒有後端語言基礎的前端工程師如何正確的學習nodejs？

TAG:前端開發 |