126
JSConf2017 第一天會議分享
2017年JSConf在柏林舉行，為期2天，5月7日-8日。JSConf在前端領域是相當有影響力的，可以通過JSconf的分享內容了解前端技術驅勢及發展方向。今年重點在以下幾個方麵：移動端的性能、各種NodeJS編寫的提高前端工程化效率的工具、ReactJS的周邊工具，AngularJS已不被提起。ES6已大麵積興起，ES6+Babel是最佳拍檔。
會議舉辦還是相當專業的，分為主會場和一個分會場，以一段音樂party開場，主持人也用唱的方式表述了JSConf的開場宣詞。每個topic的時間是30分鍾，絕不拖堂，每個topic的演講嘉賓都會控製在25-27分鍾左右，整個會場嚴格按照議程進行，方便聽眾聽取提前規劃的參會議程。今年的特點是女性演講嘉賓偏多，而且都特別漂亮。在演講嘉賓分享後聽眾都會給予持續半分鍾的熱烈掌聲（可能與文化有關，在國內很少聽到有如此熱烈和長時間的掌聲）。
下麵詳細講解下其中比較有意思的topic：
一、如何提高web端的加載速度仍然是值得深究的課題，所以第一個議題也是圍繞著速度展開的。
根據最新的2017年的數據顯示，移動端的webpage平均需要16秒可以交互，19秒全部加載完成，JS大小為420KB左右。之所以這麼慢的原因是處理過程需要三大步：
1)、初始化請求-->返回html
2)、根據返回的html請求css、js、images--->返回css、js、images
3)、解析css、js、images再顯示。
在web端解析時間占12.4%，編譯時間占8.3%；移動端解析占13.2%，編譯時間占10.2%。
如果要縮短可交互的等待時間，以下建議可以采納：
1)、webpack：將js分成一個個的小文件，使用webpack做加載/打包。 webpack更多資料可參考 https://doc.webpack-china.org/
2)、使用babel-preset-env明確指明要轉換js的瀏覽器。注：BABEL是自帶了一組 ES2015 (ES6)語法轉化器，這些轉化器能讓你現在就使用最新的 JavaScript 語法（ES6的語法），而不用等待瀏覽器提供支持。更多BABEL介紹請參見：https://babeljs.cn/
3)、使用babel-plugin-lodash加載需要的最小化的module。
4)、PRPL模式或HTTP/2：PRPL即推送、渲染、預緩存、延遲加載。PRPL詳細介紹可參見：https://developers.google.com/web/fundamentals/performance/prpl-pattern/#http2_http2。PRPL模式中可以使用Preload標簽。Preload是提前加載資源，HTML 解析器在創建 DOM 時如果碰上同步腳本，解析器會停止創建 DOM，轉而去執行腳本。而preload標簽是告訴瀏覽器加載此資源但不執行。可以預加載js、css、字體。preload 的 onload 事件可以在資源加載完成後修改 rel 屬性，從而實現非常酷的異步資源加載。例：
<link rel="preload" href="late_discovered_thing.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="style" href="asyncstyle.css" >
HTTP/2（或稱http2.0）：上麵說的處理過程需要三大步，主要是源於http1.x的通訊協決定，http1.x建立一個TCP連接需要三次握手，也就是三次往返於服務器和客戶端之間。現在的網頁一般都內容豐富，在 HTTP/1.x 下載完整個網頁一般需要很多很多個 TCP 連接。如果用開發者工具查看網絡加載流，可以看到阻塞時間，尤其是小資源的阻塞時間占比非常大。此外，每次 TCP 連接都需要傳遞 HTTP Header 信息，也是一筆帶寬開銷。HTTP/1.x 由於基本是無腦按順序加載資源，需要瀏覽器和前端工程師對預加載、加載優先級等做很多額外的工作。HTTP/2 一方麵複用同一IP且同一證書下的一個 TCP 連接，另一方麵壓縮了 HTTP Header，還提供了 Server Push 特性。Google 、Twitter 和 Facebook 這三個著名的網站已經啟用了 HTTP/2 支持。這裏有一篇文章介紹了Nginx如何開啟HTTP/2（https://www.nginx.com/blog/nginx-1-9-5/），另外讓服務器支持 https 是必須的先決條件。目前除IE8/9/10外，其他瀏覽器均已支持HTTP/2。
5)、requestIdleCallback：requestIdleCallback是2017年1月31日W3C定義的標準，使用requestIdleCallback函數實現延遲圖片的加載。
二、JS函數式編程之不可變的數據結構
函數式編程的三大特點：
1)：“immutable data 不可變數據”：默認上變量是不可變的，如果你要改變變量，你需要把變量copy出去修改，可以讓你的程序少很多Bug。
2)：“first class functions(讓你的函數就像變量一樣來使用)”：你的函數可以像變量一樣被創建，修改，並當成變量一樣傳遞，返回或是在函數中嵌套函數。如Javascript的Prototype。
3)：“尾遞歸優化”：即是遞歸調用放在方法末尾的遞歸方式。
本topic講解了“不可變的數據結構”在JS中的應用。使用mori工具，他的優勢是共享此變量，而不是copy，性通上會比較有優勢。下麵看下具體代碼示例：
//例1
var v1 = mori.vector(1,2,3);
var v2 = mori.conj(v1, 4);
v1.toString(); // => '[1 2 3]'
v2.toString(); // => '[1 2 3 4]'
//例2
var sum = function(a, b) {
return a + b;
};
mori.reduce(sum, mori.vector(1, 2, 3, 4)); // => 10
詳細的mori源碼及示例參見 https://github.com/swannodette/mori。另外facebook的immutable-js也能起到相同的作用，詳見https://facebook.github.io/immutable-js/
三、來自facebook的工程師分享工程化之自動化測試工具Jest，Jest is a complete and easy to set up JavaScript testing solution. In fact, Jest works out of the box for any React project. 從性能、功能方麵介紹了Jest的優勢，其中Jest有更詳細的輸出，可以watch某個指定路徑的文件，snapshot測試比較有亮點，可以將執行結果存為snapshot，之後的testcase與此snapshot做對比，並且通過watch可以看到具體哪裏有錯誤，snapshot支持array、object、webcomponent。Jest的詳細文檔參見 https://facebook.github.io/jest/docs/getting-started.html#content。包管理工具使用的是yarn，yarn的詳細介紹參見 https://yarn.bootcss.com/docs/ .最後唿籲更多的人來翻譯此工具 https://crowdin.com/project/jest .
四、一個安全密碼存儲的小工具 https://github.com/emilbayes/secure-password，有興趣的可以試試。
五、開源社區主張的價值觀、做法在各大生態係統中有很大不同，分享者以Eclipse、R、NodeJS做了比較。開源社區的工具或係統組成了軟件生態係統，而被依賴的軟件如果代碼變更結果可能是破壞性的，例如：刪除、重命名 可能會在整個生態係統中產生波動，從而導致許多軟件包維護者和用戶的返工。變更的原因主要是：新功能，消除技術債務，提高效率和修複錯誤。不同的開發商和不同的社區對於誰應該支付變更的成本和時間有不同的態度。
1) eclipse：向後兼容降低維護人員的成本，平台穩定，開發者門檻較高。自2001年以來超過1600個擴展。代碼中的方法使用棄用製，而不是刪除，已棄用的方法保留>10年。
2) R/CRAN(https://www.r-project.org/): 每個包的最新版本應與存儲庫中每個其他包的最新版本兼容，小版本迭代，CRAN團隊審核提交給CRAN的每個包的變更。自1997年以來超過8000個包。
3) nodejs: 一個比喻“上個星期的教程今天已經不適應”，門檻較低，社區沒有審查或測試要求，自2009年以來超過25萬個npm包，並且仍在快速增長。npm平台有一些不尋常的特征，即一個包的多個修訂版本可以在同一個項目中共存。開發人員可以輕鬆快速地發布和使用包，社區對於快速變化而言是開放的，並且具有實驗API的文化，直到它們是正確的。草根推動，重點強調工具建設和社區。
所以各個開源社區采用什麼樣的行動與其“價值觀”高度穩合。eclise與nodejs形成了鮮明對比，一個是以穩定向後兼容為價值觀，一個是以草根、使開發者輕鬆快速發布和使用包為價值觀，你的社區主張什麼價值觀呢？
最後更新：2017-05-08 04:30:53