前端每週清單第 7 期：Next 2.0 發佈，Safari 10.1 新增系列重要特性，Vue.js 2.2 完整API 手冊

前端每週清單第 7 期：Next 2.0 發佈，Safari 10.1 新增系列重要特性，Vue.js 2.2 完整API 手冊 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐的前端每週清單系列系列。

前端每週清單第 7 期：Next 2.0 發佈，Safari 10.1 新增系列重要特性，Vue.js 2.2 完整API 手冊

前端 前端每週清單

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

新聞熱點

國內國外，前端最新動態

• 《Safari 10.1 發佈，新增衆多重要 Web 特性》：近日隨着 iOS 10.3 與 macOS Sierra 10.12.4 的版本發佈，系統內置的Safari 10.1 增長了許多重要的 Web 特性支持與性能提高，包括 CSS Grid 佈局、fetch、IndexDB 2.0、Custom Elements、Form Validation、Media Capture 等等。( https://parg.co/bC2 )

• 《Next.js 2.0 發佈》：近日 Next 2.0 正式發佈，它爲咱們提供了便捷的快速開發 React 服務端渲染的工具，使得開發者可以專一於業務開發。在 2.0 版本中它提供了自定義路由、自定義服務端渲染代碼、組件內 CSS、Prefetching 等等多個新特性。（ https://zeit.co/blog/next2 ）

• 《echarts v3.5 發佈：新增日曆座標系、座標軸指示器；同時統計擴展 v1.0 發佈》：在 echarts 新發布的 3.5 版本中，新增了日曆座標系，加強了座標軸指示器。同時，echarts 統計擴展 1.0 版本發佈了。日曆座標系用於在日曆中繪製圖表，座標軸指示器方便用戶觀察數據內容，統計擴展是一個專門用來進行數據分析的工具。（ https://parg.co/bhh ）

• 《Relay 1.0.0 發佈》：近日 Relay 1.0.0-alpha 發佈，提供了許多新的特性。做爲 Facebook 發佈的全特性 GraphQL 客戶端，其可以在低配的移動設備上構建高性能、複雜可擴展的應用。( https://twitter.com/leeb/stat... )

開發教程

步步爲營，掌握基礎技能

• 《使用 Vue.js 與 Electron 構建桌面問卷應用》：本文介紹瞭如何利用 Vue.js 與 Electron 來構建簡單的桌面問卷應用，做者首先介紹瞭如何使用 vue-cli 建立簡單的 Web 項目，而後討論瞭如何將項目運行在 Electron 中，最後闡述瞭如何將應用總體打包發佈。( https://parg.co/bQ3 )

• 《Progressive Web Apps：響應式 Web 設計的延伸》：本文是對於 Progressive Web Apps 概念、設計理念與簡單實踐的介紹，做者介紹了 PWA 應用應該具有的基本特性、性能與體驗上的要求以及如何將現有站點轉化爲 PWA 的簡單實踐。( https://julian.is/article/pro... )

• 《2017 簡明 React 入門指南》：本文是針對那些熟悉 jQuery 與傳統 JavaScript 開發的前端工程師準備的現代 React 開發入門指南，其包括了環境配置、create-react-app 使用、學習資料、應用編寫與發佈等等章節。( https://parg.co/bCx )

• 《8 個可能你沒考慮過關於 CSS 的知識》：不一樣的技術學習曲線可能相差甚遠，而 CSS 的初學者則會以爲至關容易入手，可是深刻以後可能發現連居中都不甚容易。本文做者是個深度 CSS 熱愛者，他從本身多年的經驗介紹了 CSS 中的垂直居中、100% 屬性、float、z-index 等等多個細節知識點。（ https://parg.co/bhl ）

• 《React Bits》：一本關於 React 設計模式、技術與技巧的書，涵蓋了常見的 React 應用開發中的設計模式、須要規避的反模式、處理 UX 變種、性能調試與樣式處理等等。（ https://github.com/vasanthk/r... ）

• 《實例講解 CSS 盒模型》：有經驗的前端開發者都知道 HTML 中的佈局就是盒套盒，而本文則是以某個街區的例子深刻淺出地講解 CSS 中的盒模型。（ https://parg.co/bhN ）

工程實踐

立足實踐，提示實際水平

• 《12 個精妙的 JavaScript 代碼片》：本文做者分享了十二個很是不錯的 JavaScript代碼片，這些代碼片可以幫你優化現有代碼，讓代碼更加地賞心悅目。（ https://parg.co/bhH ）

• 《Node.js 應用監控實踐指南》：本文介紹生產環境下 Node.js 應用監控實踐指南，包括了監控的意義、監控的對象、目前開源的監控解決方案以及一些 SaaS 解決方案等。( https://parg.co/bhb )

• 《使用 Faker.js 爲 Node.js 應用建立模擬數據》：在應用開發中咱們每每會頭疼於如何構建大量的隨機數據，特別是那些符合某些固定模式的數據，咱們可能會要用這些數據仿製 RESTful 接口、進行單元測試等等。而 Faker.js 則爲咱們提供了這樣的隨機數據生成器。( https://parg.co/bhU )

• 《Vue.js 2.2 完整 API 清單》：本文是 Vue.js 2.2 中完整的 API 介紹，能夠做爲手冊隨時查閱 。（ https://parg.co/bhC ）

• 《JavaScript 中構建響應式引擎》：本系列文章介紹瞭如何在 JavaScript 中構建高性能的響應式引擎，對於有興趣瞭解 MobX 底層原理的同窗來講也是個不錯的教程，目前包含了對於可觀測對象的構造解釋、屬性推導與依賴追蹤等內容（ https://parg.co/bhR ）

深度閱讀

深度思考，昇華開發智慧

• 《深刻淺出構建簡單的 Chess AI》：本文做者介紹瞭如何基於 JavaScript 構建一個國際象棋的 AI，雖然不屬於前端開發範疇，不過仍是蠻有意思的一篇文章。本文主要包括移動生成、棋盤可視化、位置評估、基於 Minimax 算法的搜索樹、Alpha-beta 修剪等等。( https://parg.co/bCw )

• 《構建高性能擴展與摺疊動畫》：本文以菜單伸縮動畫爲例，介紹如何構建高性能擴展與摺疊動畫。較簡單可是性能有缺陷的方式譬如修改元素寬高或者使用 clip 變換屬性；而本文主要是由 CSS3 的 scale 變換來實現菜單的擴展與摺疊，其爲了保證菜單按鈕的視覺效果與總體的平滑縮放還使用了所謂的對衝縮放技巧。( https://parg.co/bCz )

• 《基於 ReactNaive 與 Uber 工程基礎構建 UberEATS》：本文是 UberEATS 的工程師團隊介紹的他們基於 Uber 原工程架構與 ReactNative 實現應用的工程實踐；包括了構建遷移路徑、應用架構定義、自動更新、測試與靜態類型檢測等等。（ https://eng.uber.com/ubereats... )

• 《利用機器學習優化網站性能》：本文是從淺顯機器學習的角度來考慮如何優化網站性能，可能從專業服務端機器學習的角度來看並不複雜，可是從前端網站構建的角度來看也是蠻有意思的。本文包括了記錄網站點擊與提交信息、利用 AWS S3 進行模型訓練、利用 UI 進行可視化展現等等。（ https://parg.co/bhQ ）

• 《Chrome 中 Preload、Prefetch 以及 優先級介紹》：本文是 Google Chrome 團隊的 Addy Osmani 對 Chrome 中的 Preload、Prefetch 以及抓取優先級的介紹，而且介紹了在網站性能優化中對於 Preload 與 Prefetch 的使用技巧和 HTTP/2 帶來的服務端推送如何協同使用等內容。( https://parg.co/bhM )

開源項目

樂於分享，共推前端發展

• 《jsinspect》：jsinspect 提供了方便的命令行工具或者構建插件來檢測代碼庫中的複製粘貼或者結構類似的代碼片，以方便開發者在優化過程當中完成代碼的重構。( https://github.com/danielstju... )

• 《Reactide》：Reactide 是首個面向 React Web 應用開發 IDE，其基於 Electron 提供了跨平臺的特性。Reactide 容許咱們像傳統開發那樣打開單個文件就能夠完成預覽，而且提供了便捷的組件導入、格式化等功能。該項目仍處於積極的開發中，能夠拭目以待。 ( https://github.com/reactide/r... )

• 《marky》：marky 是基於 performance.mark/measure 封裝的高性能 JavaScript 計時器，其相較於console.time()以及console.timeEnd()具備更好地性能表現，相較於簡單的Date.now()具備更好地準確度。( https://github.com/nolanlawso... )

• 《Service Worker Mock》：在 PWA 應用的開發中對於 Service Worker 的測試一直比較麻煩，每一個文件均可能經過self.addEventListener產生反作用，而且 Service Worker 的運行環境也迥異於正常的 Web 或者 Node 環境。而本包則是經過注入僞造的 Service Worker 環境來方便測試。( https://parg.co/bCD )

• 《Public JSON APIs》：本倉庫列舉了許多 Web 開發中用到的公開的 JSON 接口，包括信息檢索、機器學習、工具使用等等多個方面。( https://github.com/toddmotto/... )

• 《generator-ngx-app》：Angular 4 商業級應用項目生成器，其包括了 angular-cli 提供的現代工具與工做流，以及來自於社區的最佳實踐、可擴展的基礎模板以及較好地學習曲線。（ https://github.com/angular-st... ）

巔峯人生

• 《WWW之父Tim Berners-Lee獲圖靈獎》：美國計算機學會（ACM）宣佈將2016年的圖靈獎授予萬維網（WWW）的發明者Tim Berners-Lee。他將得到由Google贊助的一百萬美圓獎金。ACM提到他的獲獎理由是，「inventing the World Wide Web, the first web browser, and the fundamental protocols and algorithms allowing the web to scale.」 。( https://parg.co/bhv)

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到editors@cn.infoq.com，註明「前端之巔投稿」。