前端每週清單：Vue 2.2發佈，React在GitHub突破6萬star

前端每週清單：Vue 2.2發佈，React在GitHub突破6萬star 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐。

新聞熱點

前端領域最新動態

• 《Chrome開始集成圖形識別 API》：最近，Chrome團隊嘗試在Chrome中集成了一套與圖形識別相關的API，使得圖形識別這種之前只在原生應用中存在，或者在瀏覽器上，要藉助其餘難用的外部庫才能實現的功能，如今只要少許代碼便可實現。這些API包括人臉識別，條形碼/二維碼識別和文本識別，基本上覆蓋了當前互聯網應用的大部分場景。

• 《Yarn 發佈其中文網站》：近日， Yarn 中文站正式發佈。Yarn 是Facebook開源的，針對存儲在npm或Bower註冊表中的JavaScript模塊的一個代理包管理器，旨在提供更快，更可靠，更安全的包管理。參考資料：《Facebook開源JavaScript包管理器Yarn》

• 《React 在 Github 上突破 60 000 Star》：近日，React 在 Github 上突破 60000 Star，做爲專一於界面層的小而美的前端庫，相信 React 將來會更加輝煌。

• 《Node.js v7.6.0 發佈》：Node.js 7.6.0 版本正式發佈，可使用 nvm 等工具進行安裝。此版本最大的亮點在於其默認支持 async/await 語法，而不須要 --harmony-async-await 等命令行參數。Reddit 討論區中你們對於 Koa2 的進一步流行充滿了期待。不過 Twitter 上也有人提醒到，過分使用 await 反而可能帶來性能問題，應該適時地使用 Promise.all()。

• 《TypeScript 2.2 發佈》: TypeScript 基於 ECMAScript 標準構建，而且添加了額外的類型檢測的支持。TypeScript 2.2 能更好地與 VSCode 相結合，提供更加友好的語法提示。除此以外，TypeScript 2.2 還引入了不少新特性，能夠查看原文獲取更多信息。

• 《Meteor 1.4.3 發佈》: Meteor 1.4.3 帶來了一系列的性能提高，特別是對於大型應用的重構建耗時的優化；同時核心包體的版本也都進行了更新，npm 更新到了 4.x 版本。

• 《Vue 2.2.0 發佈》：該版本包含了 22 個開發者提交的 31 個 PR，除了更新vue核心包體以外，還須要更新vue-template-compiler以及vue-loader。該版本並未進行公共 API 的更新，不過有部份內部的文檔未說起的 API 發生了變化，詳情能夠參考官方文檔。

開發教程

步步爲營，掌握基礎技能

• 《Learn Angular 2 with Me》：本系列視頻介紹 Angular 2 的環境搭建與部分工程實例。本教程介紹了 Angular CLI 的使用、Angular 模塊基礎、構建註冊表單、動態表單，等等。

• 《3 步學習 D3 與 Canvas》：此係列教程介紹了 D3.js 與 Canvas 的基本使用，包含了數據綁定、元素繪製以及容許用戶交互這幾個部分。

• 《全棧開發者學習指南》：全棧開發者便是那些可以同時負責後端開發、前端開發以及服務器部署的開發人員，而本系列文章即着眼於介紹成爲全棧開發者所必備的那些技能知識。

• 《基於 React 與 Redux Sagas 的權限驗證應用開發教程》：此文中做者深刻地介紹瞭如何利用 Redux、Redux Saga、Redux Form、React Router 這些工具開發常見的權限驗證應用。單獨地使用某個工具彷佛沒啥難度，可是在工程應用中將它們較好地組合在一塊兒卻不是件容易事。而本文則是做者從自身工程實踐的角度進行了介紹。

• 《基於 ReactNative 與 MobX 的 Imgur 應用開發教程》：此文中做者結合 ReactNative 與 MobX 開發一個展現 Imgur 中圖片的應用，涉及到了如何使用 MobX 進行狀態管理、如何與 RESTful API 進行交互、如何在 ListView 中渲染全屏圖片以及如何監聽設備狀態等。

工程實踐

立足實踐，提示實際水平

• 《2017 Web 發展的 5 個趨勢》：此文討論了 2017 年 Web 發展的 5 個趨勢，包括 Progressive Web App 的崛起、Web 技術棧的日趨穩定與選擇更加靈活、函數式編程繼續風行、以 GraphQL 爲表明的數據查詢方式以及面向人工智能的設計等等。

• 《在 React 中構建微交互動畫》：微交互可以更好地引導用戶，提高用戶體驗，而文本則是基於 CSS Transitions、react-motion、react-animations 構建可交互的搜索框。

• 《理解 JavaScript 中的做用域》：JavaScript 中的做用域、閉包以及上下文綁定一直是使人凌亂的知識，此文做者詳細地從函數做用域、塊做用域、詞法做用域、閉包等進行詳細闡述，值得一讀作個梳理。

• 《實際項目中 HTTP/2 性能測試與分析》HTTP/2 – A Real-World Performance Test and Analysis：HTTP/2 相較於 HTTP/1 提供了不少的新特性，包括二進制流、多路複用、服務端推送以及消息頭壓縮，從而帶來了顯著的性能提高。此文做者則是基於真實項目對於 HTTP/1 與 HTTP/2 性能表現進行了測試與分析，給出了 HTTP/2 實踐中應該注意的要點建議。

• 《基於 Webpack 2 的渲染代碼分割》：Webpack 2 對其文檔與使用規範帶來了極大的提高，而 Webpack 2 中對於代碼分割相較於 Webpack 1 也有所變化。此文做者則是從自身項目中的實踐出發介紹代碼分割、包體體積審視與控制以及壓縮等等內容。

• 《掌握 CSS Animation》: 利用 Keyframes 以及各類各樣的動畫屬性：timing、delay、play state、animation-count、iteration count、direction、fill mode、will change 來構建交互動畫。

• 《2017 年 React 與 Redux 學習建議》: 此文是做者數年來學習與使用 React 以及 Redux 的感悟，不必定適合純初學者，不過對於有必定基礎概念的很推薦一看。

深度閱讀

深度思考，昇華開發智慧

• 《ECMAScript 2017 and beyond》：這是 Axel Rauschmayer 的演講總結，討論了自從 ECMAScript 2016 以來添加的各類新特性，以及 ES2017 的最終發佈版會包含的特性，最後還討論了 ES2017 以後會被加入到標準中的特性。

• 《async/await 並不是萬能，適時使用 Promise》：ES2017 中正式加入了 async/await 特性，這讓咱們能夠寫出更加優美的異步代碼。然而，過分地使用 async/await ，特別是在使用 Babel 將其編譯爲舊版本瀏覽器支持代碼的狀況下，反而會帶來性能損耗。咱們應該適時地使用 Promise.all() 等相似方法來提高性能。

• 《Google宣佈攻破SHA-1，今後SHA-1再也不安全！》&version=12010310&nettype=WIFI&fontScale=100&pass_ticket=Dd1f6urCQNues19c%2FliavMKGxQcvbcH%2BL8BjDnN3fug%3D)：SHA-1等加密散列函數可謂加密學家手中的瑞士軍刀，距離SHA-1的最初發布已通過去了十年，Google 以及 CWI 正式公佈第一套可實現碰撞的實用性技術方案。Linus Torvalds 也對這件事情發表了見解，他表示不須要過度擔憂目前 Linux 的安全機制收到影響，畢竟 SHA1 更多的只是校驗而非加密，不過這件事也有助於促進 Linux 代碼的更迭。

• 《Node.js 社區的發展之道：質量與速度並重》: Node.js 社區的核心目標之一就是在快速迭代的同時保證代碼質量，新發布的版本務必與以前的版本保持相同的穩定性，避免形成生產環境下應用的崩潰。Node.js 社區並無一味的尋求妥協，而是不斷突破本身，從而在保證變動速度的同時達成較高的質量要求。文本則是 Node.js 社區對於他們發佈版本、變動流程以及自動化測試、性能測試等多方面的介紹。

• 《Twitter Redux Store 探祕》：複雜應用的 Store 設計一直是開發中的難點，而做爲大型內容社交軟件 Twitter 以前宣佈 Web 移動端逐步遷移到 Node.js、Express、React PWA 架構，本文就是對於 Twitter 的 Redux Store 設計分析與探祕。

開源項目

樂於分享，共推前端發展

• 《開源在線代碼演示網站 Dwitter 發佈 》：Dwitter 是相似於 CodePen 這樣的，不過專一於 JavaScript 代碼片演示的網站，已經有不少開發者在上面貢獻了奇妙的基於 JavaScript 的動畫或者小程序。

• 《基於 div 與 純 CSS 實現的加載動畫》：Web 開發中，當咱們須要用戶等待某個異步操做完成，譬如網路請求或者表單提交時，咱們應當給予用戶友好的提示。而 CSS Loader 就是僅基於 div 與 CSS3 動畫的加載提示庫，其並不像 GIF 這樣須要額外的圖片請求，而且具備至關好的可維護性與自定義性。

• 《僅有 500 bytes 的 fetch polyfill》：unfetch 支持 IE8 及以上瀏覽器，提供了完整的 fetch API 的子集，其最大優點在於壓縮以後的尺寸很是的小。

• 《AR.js》: AR.js 是高性能的面向 Web 的加強現實的工具庫，它在移動端能達到 60fps。感興趣的能夠在手機瀏覽器中打開這裏，而後掃描這個標誌，你會發現一些奇妙的東西。

• 《Webpack offline 插件》：該插件能夠爲基於 Webpack 構建的項目添加離線體驗支持，它底層依賴於 ServiceWorker 以及 AppCache 。咱們只須要簡單地將插件添加到webpack.config中，而後在客戶端腳本中動態地執行runtime.install()就能夠自動緩存全部 Webpack 編譯以後的資源。能夠查看這篇博客獲取詳細使用詳解或者參考這個示範項目。

巔峯人生

一覽衆山，聆聽巔峯故事

• 《關於技術選型的那些事兒》：杜歡是滴滴出行的技術總監，負責滴滴小巴業務的技術管理工做。在互聯網領域已經有十年工做經驗，曾就任於微軟、百度，也曾自主創業兩次，來到滴滴以後也經歷過不少項目和業務的變化，是一個「什麼都懂」工程師，對前端、客戶端、服務端、運維等方面都有很多實戰經驗。此文是他在大咖說中的分享整理而成。

• 回顧大牛成長：2011年杜歡在QCon上的主題演講(《HTML5遊戲探索之路》；2016年接受採訪《滴滴杜歡：高歌猛進中的滴滴如何解決架構上的陣痛？》，爲《架構師》撰寫的卷首語《重構的時機》。