國內(nèi)國外，前端最新動(dòng)態(tài)

• Webpack 3.0 正式發(fā)布：Webpack 團(tuán)隊(duì)近日宣布正式發(fā)布 Webpack 3.0 版本。在 2.0 版本發(fā)布之后，Webpack 團(tuán)隊(duì)與社區(qū)聯(lián)系更為緊密，在優(yōu)先實(shí)現(xiàn)社區(qū)希冀的功能需求的同時(shí)，提供了更快且更穩(wěn)定的發(fā)布流程。對(duì)于本次發(fā)布的 Webpack 3.0 版本，用戶可以便捷地平滑升級(jí)，享受新版本中帶來的性能提升與 Magic Comment 等新特征。( https:///by0 )

• Expo SDK v18.0.0 發(fā)布：近日發(fā)布的 Expo SDK 18.0.0 版本基于 React Native 0.45，引入了一系列的新特性與性能提升。在該版本中 exp.json 被合并到了 app.json 中，從而簡化了 React Native 生態(tài)系統(tǒng)與 Expo 使用者之間的差異；并且新的項(xiàng)目不再使用 Expo.registerRootComponent，ExNavigation 也被替換為了 React Navigation。除此之外，Expo 響應(yīng)的開發(fā)工具 XDE、exp、Snack 等也都得到了優(yōu)化。( https:///byA )

• Mikeal Rogers: Node.js 會(huì)在一年內(nèi)超越 Java：在近日的某個(gè)采訪中，Node.js 的核心創(chuàng)建者與社區(qū)管理者之一 Mikeal Rogers， 對(duì) Node.js 在未來的發(fā)展表達(dá)了樂觀的態(tài)度。他表示目前全世界范圍內(nèi)已經(jīng)有了大約八百萬開發(fā)者在使用 Node.js，并且每年以倍數(shù)增長；盡管目前 Java 仍然保持領(lǐng)先，但是如果 Node.js 能保證其發(fā)展勢(shì)頭，有望在明年超越 Java。作者在本文中還分享了 Node.js 的現(xiàn)狀以及一些發(fā)展趣聞和本人的經(jīng)歷，感興趣者可以閱讀原文。( https:///byE )

• ESLint 4.1.0 發(fā)布：ESLint 4.1.0 是對(duì)于 ESLint 的小版本更新，包含了部分的新特性引入與此前版本中的異常修復(fù)。新版本中的特性包括了細(xì)粒度配置，即允許針對(duì)同一目錄下的不同文件開啟不同的配置、允許從 package.json 文件中設(shè)置忽略的文件、優(yōu)化了 autofixes 的用法等等。

步步為營，掌握基礎(chǔ)技能

• 三分鐘交互式介紹 Vue.js：Vue.js 是近年來逐步流行的輕量級(jí)構(gòu)建前端界面的組件庫，其相對(duì)平滑的學(xué)習(xí)曲線確保了開發(fā)者能夠快速入門使用。而本文作者則循序漸進(jìn)地介紹了 Vue.js 基礎(chǔ)使用知識(shí)，并且在每一段中都包含了 交互式代碼演示；作者依次介紹了 Vue.js 中模板語法與數(shù)據(jù)綁定、常見指令以及響應(yīng)用戶輸入等內(nèi)容。( https:///byU )

• 16 行代碼構(gòu)建基于 Node.js 的天氣應(yīng)用：本文是一篇淺顯易懂的 Node.js 入門實(shí)踐介紹，作者利用  Node.js 抓取來自 OpenWeatherMap 的開放數(shù)據(jù)并且打印在控制臺(tái)中。本文依次介紹了如何注冊(cè)并且獲得 OpenWeatherMap 的 ApiKey、如何使用 npm 初始化項(xiàng)目、如何利用 request 抓取數(shù)據(jù)、如何優(yōu)化命令行交互顯示等等。( https:///byY  )

• TDD 與 Vue.js：在真實(shí)的項(xiàng)目中我們免不了需要進(jìn)行代碼測試，而本文即分享如何在 Vue.js 中遵循測試驅(qū)動(dòng)開發(fā)的基礎(chǔ)知識(shí)。本文首先利用 Vue CLI 的默認(rèn)模板創(chuàng)建了一個(gè)簡單的組件，然后為其添加部分基礎(chǔ)功能，同時(shí)會(huì)為每個(gè)元素添加單元測試。( https:///byQ )

• React 服務(wù)端渲染：本文循序漸進(jìn)地介紹了 React 中服務(wù)端渲染的相關(guān)知識(shí)，首先討論了服務(wù)端渲染相較于客戶端渲染帶來的優(yōu)勢(shì)、然后介紹了如何在 React 中添加服務(wù)端渲染的支持，最后還討論了如何通過同構(gòu)的高階函數(shù)在服務(wù)端抓取數(shù)據(jù)然后顯示在客戶端。( https:///server-side-react-rendering/  )

• Rust、WebAssembly 與 Webpack：WebAssembly 是新的運(yùn)行于 Web 平臺(tái)的二進(jìn)制格式，我們能夠?qū)?C、C++、Rust 這些語言編譯到 .wasm 文件格式中然后在瀏覽器環(huán)境下運(yùn)行他們；通常這些編譯后的代碼在包體體積與運(yùn)行速度上都會(huì)比 JavaScript 有明顯提升。而本文則著眼于介紹如何在瀏覽器中執(zhí)行底層的 Rust 代碼，也可以參考 這篇文章( https:///by4 ) 來了解更多的關(guān)于 WebAssembly 快速實(shí)踐的知識(shí)。( https:///byh )

立足實(shí)踐，提示實(shí)際水平

• 構(gòu)建生產(chǎn)環(huán)境下的 CSS Grid 布局：CSS Grid 為我們帶來了真正的網(wǎng)格布局解決方案，會(huì)為現(xiàn)有的 Web 布局方式注入新的活力。本文則介紹了 CSS Grid 的基礎(chǔ)概念和它帶來的機(jī)會(huì)與挑戰(zhàn)，應(yīng)該如何在實(shí)踐中利用 CSS Grid 進(jìn)行應(yīng)用布局；作者還以 WordPress 主題為例，介紹了真實(shí)應(yīng)用開發(fā)中存在的問題、對(duì)比了老的解決方法與基于 CSS Grid 的布局方式。本文首先介紹了 CSS Grid 的基礎(chǔ)語法與設(shè)計(jì)模式，然后討論了在生產(chǎn)環(huán)境中應(yīng)該如何一步步地引入 CSS Grid，包括如何從草稿設(shè)計(jì)開始進(jìn)行語義化布局以及對(duì)于瀏覽器兼容性的保證等。( https:///byc )

• Vue.js 框架的優(yōu)勢(shì)與缺陷：Vue.js 已經(jīng)在國內(nèi)的很多公司得到了廣泛應(yīng)用，與 Google 的 Angular 以及 Facebook 的 React 鼎足而立，本文作者則是從自己的角度闡述了 Vue.js 目前的優(yōu)勢(shì)與潛在缺陷所在。首先 Vue.js 的優(yōu)勢(shì)在于其包體較小，良好的文檔方便開發(fā)者理解與使用，并且能很快地集成到現(xiàn)有項(xiàng)目中，其靈活性與數(shù)據(jù)通信機(jī)制也保證了項(xiàng)目的可擴(kuò)展性。而目前來看 Vue.js 的缺陷則在于其開發(fā)者社區(qū)可能不如 React 等成熟，并且主要使用者以國人為主，與英語社區(qū)的交流存在一定語言障礙，同時(shí)其靈活性本身也是一種雙刃劍，對(duì)于某些開發(fā)者而言反而會(huì)造成困難。( https:///byl )

• JavaScript 在嵌入式設(shè)備與物聯(lián)網(wǎng)中的應(yīng)用現(xiàn)狀：隨著近年來 Web 的發(fā)展與 JavaScript 的崛起，JavaScript 被應(yīng)用到了許多原本不曾想象到的場景中，從服務(wù)端、工作站、數(shù)據(jù)庫、桌面環(huán)境到物聯(lián)網(wǎng)設(shè)備中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微型設(shè)備中的應(yīng)用現(xiàn)狀，并且選擇了具有代表性的設(shè)備介紹了具體的使用場景與實(shí)踐方法。( https:///byr )

• 利用 Webpack 加速 Vue.js 應(yīng)用的四種姿勢(shì)：Webpack 是開發(fā) Vue.js 單頁應(yīng)用的必須工具之一，它能夠幫你處理復(fù)雜的編譯步驟從而簡化開發(fā)流程，并且能夠幫助你優(yōu)化應(yīng)用體積與性能表現(xiàn)。而本文中作者即從單文件組件、優(yōu)化 Vue 構(gòu)建配置、瀏覽器緩存管理、代碼分割這四個(gè)角度討論了如何利用 Webpack 提供的特性來加速 Vue.js 應(yīng)用。( https:///byC )

• 基于 JavaScript 的機(jī)器學(xué)習(xí)：深入監(jiān)督學(xué)習(xí)算法：本文是基于 JavaScript 的機(jī)器學(xué)習(xí)系列的第二部分，主要介紹監(jiān)督學(xué)習(xí)算法 kNN。kNN 算法通常被用于分類或者回歸問題，本文首先介紹了 kNN 算法的基礎(chǔ)原理，然后介紹了如何利用 ml-knn、csvyojson、prompt 等庫對(duì) Iris 數(shù)據(jù)集中的數(shù)據(jù)進(jìn)行訓(xùn)練與預(yù)測。( https:///byR )

深度思考，升華開發(fā)智慧

• 大前端公共知識(shí)梳理：這些知識(shí)你都掌握了嗎？：近年來，隨著移動(dòng)化聯(lián)網(wǎng)浪潮的洶涌而來與瀏覽器性能的提升，iOS、Android、Web 等前端開發(fā)技術(shù)各領(lǐng)風(fēng)騷，大前端的概念也日漸成為某種共識(shí)。 其中特別是 Web 開發(fā)的領(lǐng)域，以單頁應(yīng)用為代表的富客戶端應(yīng)用迅速流行，各種框架理念爭妍斗艷，百花競放。Web 技術(shù)的蓬勃發(fā)展也催生了一系列跨端混合開發(fā)技術(shù)，希望能夠結(jié)合 Web 的開發(fā)便捷性與原生應(yīng)用的高性能性；其中以 Cordova、PWA 為代表的方向致力于為 Web 應(yīng)用盡可能添加原生體驗(yàn)，而以 NativeScript、ReactNative、Weex 為代表的利用 Web 技術(shù)或者理念開發(fā)原生應(yīng)用。 平心而論，無論哪一種開發(fā)領(lǐng)域或者技術(shù)，他們本質(zhì)上都是進(jìn)行圖形用戶界面（GUI）應(yīng)用程序的開發(fā)，面對(duì)的問題、思考的方式、架構(gòu)的設(shè)計(jì)很大程度上仍然可以回溯到當(dāng)年以 MFC、Swing、WPF 為主導(dǎo)的桌面應(yīng)用程序開發(fā)時(shí)代，其術(shù)不同而道相似。( https:///byS )

• React Express：針對(duì)目前 React 及其生態(tài)圈學(xué)習(xí)曲線過于陡峭的囧境，作者希望創(chuàng)建一個(gè)多合一的面向初學(xué)者的 React 技術(shù)棧學(xué)習(xí)教程，從最簡單的 create-react-app、npm、webpack、babel 等工具的使用，到 ES2015、ES2016、JSX 等基礎(chǔ)語法，最后還包括 React、Redux、CSS-in-JS 等工程實(shí)踐。( https://github.com/dabbott/react-express )

• JavaScript 中存在純函數(shù)嗎？：隨著函數(shù)式編程在前端界面開發(fā)中的流行，純函數(shù)的概念相信很多人都很熟悉，不過文本作者認(rèn)為 JavaScript 中是否存在真正意義上的純函數(shù)還值得商榷。本文首先介紹了純函數(shù)的基本定義，然后給出了我們熟知的 JavaScript 中常見的純函數(shù)定義范式。不過作者認(rèn)為函數(shù)是 JavaScript 中的一等公民，函數(shù)變量或者某個(gè) Object 的屬性方法都有可能被重新賦值，因此 JavaScript 中無法構(gòu)建真正嚴(yán)格的純函數(shù)。( https:///by6 )

• 面向前端開發(fā)者的軟件開發(fā)基本原則：毫無疑問，前端開發(fā)者也是軟件工程師，作者在本文中介紹了自己歸納的軟件工程師應(yīng)該遵循的基本原則與規(guī)范。作者在本文中討論了避免重復(fù)代碼（DRY）、單一職責(zé)（SRP）、依賴注入（DI）、單元測試等原則，同時(shí)給出了一些重構(gòu)代碼與編寫 Clean Code 的實(shí)踐指導(dǎo)書。( https:///byf )

• HTTP/2 推送技術(shù)之難，真的遠(yuǎn)超我們想象：你深入了解過 HTTP/2 推送技術(shù)嗎？它遠(yuǎn)比作者最初想象中更復(fù)雜，也更底層。但它在不同瀏覽器上的表現(xiàn)有非常大差別，讓作者感到驚訝。不過，本文并不是吐槽文。作者認(rèn)為 HTTP/2 推送真的很強(qiáng)大，但并不算能解決所有問題的萬靈藥。（https:///byt）

樂于分享，共推前端發(fā)展

• React Flight: React Flight 能夠幫我們輕松地構(gòu)建組件之間的過渡動(dòng)畫，它允許開發(fā)者定義初始狀態(tài)的組件與結(jié)束狀態(tài)的組件，React Flight 會(huì)自動(dòng)地完成組件之間的切換并且添加動(dòng)畫效果。

• react-native-offline-utils：react-native-offline-utils 允許我們?cè)?React Native 應(yīng)用中優(yōu)雅地處理離線情況，能夠根據(jù)連接情況動(dòng)態(tài)判斷需要使用的組件渲染或者數(shù)據(jù)抓取邏輯。同時(shí) react-native-offline-utils 還能夠平滑地集成 Redux，能夠自動(dòng)轉(zhuǎn)發(fā)特殊的離線 Action。( https://github.com/rauliyohmc/react-native-offline-utils )

• decaffeinate：CoffeeScript 在很長一段時(shí)間內(nèi)幫我們解決了傳統(tǒng) JavaScript 中存在的痛點(diǎn)，不過隨著 ES6&ES7 的逐步流行，我們還是要從 CoffeeScript 中回歸到 JavaScript；decaffeinate 正是能夠方便地將 CoffeeScript 代碼轉(zhuǎn)化為現(xiàn)代的 JavaScript 代碼。( https://github.com/decaffeinate/decaffeinate )

• golden-layout：golden-layout 是非常強(qiáng)大的基于 JavaScript 的 Web 布局工具，它支持窗口的拖拽、縮放以及原生式的彈窗，同時(shí) golden-layout 還提供了豐富的接口以方便動(dòng)態(tài)增刪元素、修改布局或者自定義主題。golden-layout 官網(wǎng)還提供了與 RequireJS、React、Angular 等多種其他流行框架協(xié)同使用的示例。( http:///  )