前端每周清單第15期：Node.js v8.0發布；從React遷移到 Vue；前端開發的未來

01-25

本文首發地址：前端每周清單：Node.js v8.0發布，從React遷移到 Vue，前端開發的未來

作者：王下邀月熊

編輯：尾尾

前端每周清單專註前端領域內容，分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

新聞熱點

國內國外，前端最新動態

《Node.js LTS v8.0 發布》：Node.js 於 5 月 30 日在其官方博客上宣布發布代號為 Carbon 的 Node.js v8.0.0 版本，其帶來了很多重要的特性改進和一些全新的特性。其典型改變包括了引入 async_hooks 以監控非同步操作、引入 N-API 以開發原生插件、改進了 Buffer 的安全性以及將 NPM 升級到了 5.0.0 版本等( 前端每周清單：Node.js v8.0發布，從React遷移到 Vue，前端開發的未來 )
《Chrome 60 中 DevTools 新特性介紹》：Google IO 2017 中， Paul Irish 在題為 DevTools: State of the Union 的演講中，介紹了 Chrome DevTools 即將包含的新特性。新特性包括了基於 Lighthouse 的全新 Audits 面板、第三方請求標識、非同步代碼的單步調試支持等等。( https://parg.co/bJR )
《Github 宣布將 V4 版本的 API 完全遷移到 GraphQL 架構》：近日，Github 在其博客宣布將會在 V4 版本的 API 中僅使用 GraphQL 架構，而不再提供 REST 風格的介面。Github 認為 GraphQL 提供了顯著的靈活性與便捷性，能夠有助於使用者更為方便、多變地構建查詢與獲取數據。( GitHub API | GitHub Developer Guide )
《styled-components v2 發布》：在經過 6 個月的迭代與 300 多次提交之後，styled-components 宣布發布其 V2 版本。新版本中包體體積進一步減少，並且提供了關鍵路徑 CSS 抽取以及很多的新 API。( https://parg.co/bJM )

開發教程

步步為營，掌握基礎技能

《需要掌握的 Node.js Streams 相關知識》：Node.js steams 一直以來都被詬病難以理解與使用，近年來也有不少的開發者創建了封裝庫以便於使用 Node.js streams；不過本文追本溯源，著重於介紹 Node.js Streams 的基本語法並且理清常見的誤解。本文首先以簡單的利用 Stream 讀取文件的例子來介紹 Stream 的概念，然後介紹了 Node.js 中四個流以及其具體實現方式。( https://parg.co/bJN )
《8 個常用的 NPM 技巧》：NPM 是前端開發中不可避免的腳本工具，而本文則介紹了數個常見的 NPM 小技巧；包括了初始化包、運行測試、可用腳本命令枚舉、查看已安裝包等等。( https://parg.co/bJO )
《REST API 基礎》：作為目前主流的介面風格定義之一，REST 在數據交互中佔據了重要的地位。本文則是從 REST 風格的基礎開始介紹 REST 的由來、設計理念以及在真實應用中設計 RESTful API 應該考慮的方面與遵循的原則。( https://restful.io/rest-api-back-to-basics-c64f282d972 )
《從 React 遷移到 Vue.js》：React 與 Vue.js 都是非常優秀的前端框架，不同的團隊在不同的應用場景下可能有不同的偏好。而本文則記錄了作者從 React 遷移到 Vue.js 中的思考過程；本文首先介紹了 React 與 Vue.js 之間的異同，對比了二者常用的語法特點以及生態圈，並且討論了為何從 React 遷移到 Vue.js 的理由。( Switching From React To Vue.js )
《基於 Vuex 的 Vue 應用狀態管理》：就如同其他基於組件的框架，對於基於 Vue 開發的應用隨著其體量與功能的增加，對於狀態的追蹤會變得日漸麻煩。而本文則分析了狀態管理的痛點以及深入淺出地介紹了如何利用 Vuex 進行 Vue 應用狀態管理。( State Management in Vue: Getting Started with Vuex )

工程實踐

立足實踐，提示實際水平

《Redux 狀態管理之痛點、分析與改良》：如何設計 Redux 的 store？這幾乎是 Redux 在實踐中被問到最多的問題，或許你有自己的方式，卻總覺得哪裡不太對勁。這篇文章希望從狀態是什麼，到 Elm 中的狀態管理，最後與 Redux 分析和對比，試圖找到問題，並推導可行的改良方式。( Redux狀態管理之痛點、分析與改良 )
《JavaScript 單元測試框架大亂斗：Jasmine、Mocha、AVA、Tape 以及 Jest》：在開始新的前端項目時，我們常常會考慮應該使用哪一個單元測試框架，或者考慮應該為哪些代碼添加單元測試。而本文則對於常用的 Web 開發中的單元測試框架 Jasmie、Mocha、AVA、Tape 以及 Jest 進行了橫向對比，並且基於自己的經驗給出了不同應用場景與需求下不同的單元測試框架選項建議。( JavaScript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape and Jest )
《React Europe 2017 見聞實錄》：本文記錄了作者在第三屆 React Europe 大會上的見聞，也是不錯的窺見 React 生態圈現狀與未來發展方向的方式。本文首先介紹了即將到來的 React 16 以及新的調和演算法 Fiber，然後介紹了一些輔助構建高質量 JavaScript 代碼的工具，最後還討論了基於流的按幀渲染方式。( https://parg.co/bJt )
《常用的 Recompose HOCs》：由 Andrew Clark 發布的 Recompose 是便捷的構建高階組件的輔助庫，本文則介紹了 branch、mapProps、withState、lifeCycle、nest 這些常用的 HOCs 的實際用法。( https://parg.co/bJV )
《閱讀 Flexbox Spec 之後的感悟》：Flexbox 是 Web 前端開發中常用的布局方式之一，其便於使用並且相當靈活；不過本文作者在閱讀完了 Flexbox 的 Spec 之後卻有了很多基礎用法之外的發現。本文就介紹了 margin、min-width 以及各個屬性在 Flex 布局中的隱藏特點。( https://parg.co/bJJ )

深度閱讀

深度思考，升華開發智慧

《Vue 2017 現狀與展望》：5 月 20 日，在全球首屆 VueConf 上，Vue.js 作者尤雨溪介紹了 Vue.js 2017 的現狀，並對 Vue 的未來做了展望。本文是對此次演講的回顧。獲取更多Vue相關內容，請關注前端之巔公眾號並回復「Vue」。( Vue 2017 現狀與展望 | 視頻+PPT+速記快速回顧 )
《軟體開發中的合成之道》：本文是 Eric Elliott 為其 Composing Software 系列文章所著的序章，著眼於軟體開發中常用的函數合成與對象合成相關的概念解析與介紹。我們軟體開發的過程就是不斷地將小的模塊逐步組合為完整的系統，我們不可避免地需要去組合調度多個函數，或者利用繼承等方式將簡單的類慢慢組合為複雜的業務類。( https://parg.co/bJ4)
《Web 前端開發的未來》：本文作者從自己的實踐出發暢想了未來 Web 前端開發的可能方向；主要包括 JavaScript 新特性的增強以及對於狀態管理的深入、從簡單界面逐漸過渡到完整系統、原生與 Web 之間的邊界逐步消失、CSS 會逐步模塊化並且預處理器會逐步退出歷史舞台、性能仍然是關鍵瓶頸以及 URL 會變得愈發重要等多個方面。( What is the Future of Front End Web Development? | CSS-Tricks )
《統一樣式語言》：近幾年 CSS-in-JS 迅猛發展，各種實現庫也是層出不窮。而本文作者，也是 CSS Modules 的作者之一，則是高屋建瓴地介紹了CSS-in-JS 的特點與解決的問題，梳理了人們之前對於 CSS-in-JS 存在的誤解。並且橫向比較了多個 CSS-in-JS 的優缺點與適用場景，最後還暢想了下 CSS-in-JS 的未來。( https://parg.co/bJi )

開源項目

樂於分享，共推前端發展

《chromatism》：chromatism 是一系列用於進行常見顏色轉換操作的函數的集合，提供了色彩轉換、色差色溫計算以及其他功能函數。( toish/chromatism )
《Workbox》：Workbox 是來自 Google Chrome 團隊的快速將現有應用轉化為 Progressive Web Apps 的 JavaScript 庫；Workbox 允許我們通過 Webpack 插件、Gulp 插件以及 npm 腳本的方式快速地為當前應用的資源創建對應載入 ServiceWorker。( Welcome to Workbox )
《Hyperloop》：Hyperloop 是服務於美團點評客戶端的組件發版、持續集成、App 打包構建、資源調度等各個環節的發布調度系統。接入 Hyperloop 系統後，開發同學可以通過 Hyperloop 來管理自己的項目，配置發版和打包所需要的步驟和檢查項。開發完成時，用戶只需要登錄 Hyperloop 進行相關操作，Hyperloop 就會根據項目的配置去調用不同的步驟，上報每個步驟的狀態，給出錯誤日誌、狀態通知等。( Hyperloop，讓發布簡潔高效 - )
《pix2code》：pix2code 依賴於深度學習技術將來自於設計師的界面圖片轉化為 iOS 等客戶端中的代碼。( https://github.com/tonybeltramelli/pix2code )
《Birdview.js》：Birdview.js 是個非常有趣的 JavaScript 插件，它能將整個頁面以鳥瞰圖的方式呈現給用戶，並且允許用戶直接進入選中的點。( http://achrafkassioui.com/birdview/ )

巔峰人生

一覽眾山，聆聽巔峰故事

《從大公司到創業公司，技術人轉型怎樣轉變思路與處事之道？》：本文為雲極星創聯合創始人兼 CTO 劉世民在 QCon 北京 2017 上的演講，他從自己的工作經歷出發，從工程師擇業的角度，與觀眾產生共鳴，從大公司到創業公司，需要轉變的思路與做事情的方法，有原則性的東西，也有真實案例與身邊的故事，還穿插了一些工程師的軟技能。（從大公司到創業公司，技術人轉型怎樣轉變思路與處事之道？）