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

新聞熱點

前端領域最新動態

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

• 《Yarn 發布其中文網站》 ：近日， Yarn 中文站 正式發布。Yarn 是非死book開源的，針對存儲在npm或Bower注冊表中的JavaScript模塊的一個代理包管理器，旨在提供更快，更可靠，更安全的包管理。參考資料： 《非死book開源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 的進一步流行充滿了期待。不過 推ter 上也有人提醒到，過度使用 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 社區對于他們發布版本、變更流程以及自動化測試、性能測試等多方面的介紹。

• 《推ter Redux Store 探秘》 ：復雜應用的 Store 設計一直是開發中的難點，而作為大型內容社交軟件 推ter 之前宣布 Web 移動端逐步遷移到 Node.js、Express、React PWA 架構，本文就是對于 推ter 的 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 編譯之后的資源。可以查看 這篇博客獲取詳細使用詳解 或者參考 這個示范項目 。

來自：https://segmentfault.com/a/1190000008503355