前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
Facebook 宣佈重置 React，Jest，Flow 與 Immutable.js 的開源證照：自宣佈保留 React 等開源專案附帶專利要求的開源協議之後，社群反饋了極大的不滿與懷疑，包括 WordPress 在內的許多開源專案也宣佈即將切換技術棧；鑑於此，Facebook 宣佈將在下週統一地重置 React，Jest，Flow，Immutable.js 為 MIT 開源協議。亡羊補牢，為時未晚，希望 React 整個社群能夠繼續蓬勃發展。
CoffeeScript 2 釋出：新版本的 CoffeeScript 能夠直接編譯為現代 JavaScript 語法，從而彌合了與 JavaScript 之間的隔閡；新版本中會將
=>輸出為=>，將class關鍵字也是直接輸出為class。此外，CoffeeScript 2 還新增了對於 async 函式的支援，未來同樣會加入物件解耦與 JSX 等特性；而在帶來許多新特性的同時，CoffeeScript 2 同樣儘可能地保證了後向相容性，以保證現有專案地平滑升級。Chrome 將會預設為 .dev 域名預置 HSTS 以強制 HTTPS 連線：在 Chromium 的這次提交之後，Chrome 將會通過 HSTS 強制所有的域名啟用 HTTPS。對於普通開發者而言，如果我們在本地的域名對映中設定了 .dev 結尾的域名，那麼需要將其修改為 .test 等其他域名，避免在 Chrome 中無法開啟。
Expo SDK 21.0.0 釋出：近日 Expo SDK 釋出了 21.0.0 版本，其基於 React Native 0.48，提供了更加豐富的功能與更優秀的效能表現；新版本中優化了 AppLoading 的使用與容錯機制，引入了新的 Splash 使用方式，提升了地理位置編碼、Camera、SecureStore 等介面的效能與使用。
開發教程
步步為營，掌握基礎技能
從零構建 Angular 專案：本文旨在不使用 Angular CLI 等輔助工具，從零開始構建全特性的 Angular 專案；初學者經過這樣的過程能夠了解到完整的 Angular 應用組成，包括如何引入需要的 Angular 釋出包，搭建 TypeScript，配置自定義的模組載入器，啟動應用的主入口模組等。更多 Angular 相關資料參考這裡。
現代 JavaScript 語法清單：本文涉及到了現代專案開發中常用的 JavaScript 語法使用以及示例程式碼的清單 ；本指南並不打算從零介紹 JavaScript，而是對於那些有一定基礎知識的開發者提供便捷的工具手冊。本文依次介紹了變數宣告與使用、箭頭函式、預設引數、物件解耦、陣列使用、擴充套件操作符、物件屬性、Promise、字串、模組、類、非同步程式設計等內容；更多 JavaScript 相關資料參考這裡。
編寫無障礙網頁的 CSS：本文是作者在多年提高網頁的無障礙性方面的實踐分享，側重於如何編寫合適的 CSS 以提高網頁的無障礙性與可用性。本文依次介紹了從清晰的文字到高可讀性文字、慎用偽元素內容、螢幕並非唯一的媒介、屬性值相容、多種內容隱藏方式等內容；更多 JavaScript 相關資料參考這裡。
Vue.js 元件通訊：Vue.js 開發學習中常見的問題之一就是如何進行元件間通訊，本系列文章則依次介紹了單元件、父子元件、跨級元件之間的通訊技巧。第一篇文章著眼於單元件中的通訊技巧，包括了事件中的引數傳遞、指令中的資料傳遞等內容；第二篇則介紹了父子元件間的通訊，首先討論了常見的反模式，然後介紹了 Props、Refs、Events、v-model 等資料傳遞的方式。更多 Vue.js 相關資料參考這裡。
工程實踐
立足實踐，提示實際水平
如何優雅的編寫 JavaScript 程式碼：對於工程師而言，提高自身的編碼能力和編寫易於閱讀和維護的程式碼，是提高開發效率和職業生涯中必做的事情；另一方面，制定良好的編碼規範並落到實地，是保障產品質量的基石，每個人都應該有自己的或者團隊的編碼規範。本文即是作者根據自身的經驗總結分享的 JavaScript 程式設計規範。更多 JavaScript 相關資料參考這裡。
基於 Webpack 的自動化關鍵 CSS 提取：Google 效能指南中重要的一條建議就是，儘可能減少會阻塞渲染的 JavaScript 與 CSS 程式碼；我們網頁優化中重要的手段也是進行首屏載入需要的關鍵 CSS 程式碼提取。本文則著眼於介紹如何利用 Webpack 進行自動化的關鍵 CSS 提取，依次探討了阻塞渲染的含義以及 Critical CSS 的定義，然後討論瞭如何通過程式碼程式設計來識別 Critical CSS，最後介紹瞭如何將抽取這一步整合到 Webpack 的工作流中。更多 Webpack 相關資料參考這裡。
一次前後端分離的實踐: 前後端分離的問題，不僅僅是技術上的選型問題，還涉及到整個團隊在認知、職責、流程上面重新定義的問題，這也是為什麼前後端分離概念看起來簡單易懂，但真正團隊在落地的時候，一不小心，往往雞飛狗跳，甚至最終放棄"治療"。本文是作者基於自己之前的對一個團隊前後端分離改造的實踐經歷，介紹一下如何打造一個前後端分離的技術團隊。更多 Web 專案架構相關資料參考這裡。
深度閱讀
深度思考，昇華開發智慧
JavaScript 完整編年史：JavaScript 在近幾年取得了長足的發展，其語法特性與實踐技巧都在不斷地迭代更新；本文則是對於自面世以來的 JavaScript 發展歷史進行了盤點 ，對於每個時代面臨的問題、創新與發展以及主流的瀏覽器技術進行了介紹。本文將 JavaScript 的發展歷史分為了解決基礎 DOM 操作與使用者互動的原始時代、解決跨瀏覽器支援度的 jQuery 時代、SPA 時代與現代這幾個區間；更多 JavaScript 相關資料參考這裡。
型別與否：量化 JavaScript 中可檢測的錯誤：在團隊的技術選型時我們常常會考慮是否需要引入靜態型別檢測，是否應該使用 Flow 或者 TypeScript 這樣的工具，是否能夠有效地輔助發現問題。本文則是以問答的形式給出了作者的答案，本文首先討論了靜態型別與動態型別各自的優劣，給出了常見的 JavaScript 動態型別導致的問題示例，然後通過自身所在團隊的實踐分享了引入靜態型別之後捕獲的錯誤數量。 更多 JavaScript 型別系統相關資料參考這裡。
構建簡單的類 React 框架：本文中作者會循序漸進地介紹如何自己構建簡單的類 React 框架。作者首先討論了 React 與 Angular 各自設計思想理念的對比，然後介紹了 DOM 樹的表示以及 JSX 解析函式的實現，接下來討論了元件類的實現與 Props、State 屬性的支援，最後還簡述了 React Stack 與 Fiber 調和演算法。更多 React 相關資料參考這裡。
freeCodeCamp 程式設計指南：著名的免費線上程式設計教學與練習網站 freeCodeCamp 近日釋出了 freeCodeCamp Guide，涵蓋了從程式語言基礎、Web 程式設計、資料結構與演算法、機器學習等多領域的經驗知識分享。freeCodeCamp Guide 提供了便捷的搜尋功能，希望能夠為那些繁忙的開發者提供最快速的知識檢索與問題解決服務。
開源專案
樂於分享，共推前端發展
- Franchise：提供了類似於 Notebook 操作介面的 SQL 工具，其內建整合了 js-xlsx、sql.js，支援連線 PostgreSQL、MySQL、BigQuery 等多種型別的資料庫。使用者克隆專案後直接使用 yarn start 即可以啟動開發伺服器。
Flutter: Flutter 是新一代的移動應用開發 SDK，其能夠幫助開發者快速構建 iOS 與 Android 應用。Flutter 提供了熱載入等開發特性，加速開發除錯的效率、內建了眾多 Material Design 與 Cupertino 風格的控制元件、允許開發者使用函式響應式框架來進行狀態管理、允許呼叫原生介面或者整合第三方 SDK。
luma.gl: luma.gl 是 Uber 開源的高效能 WebGL2 元件，其能夠利用 GPU 進行資料視覺化呈現與計算操作。luma.gl 能夠充分利用 GPU 的即時渲染、變換反饋等特性，同時能夠模組化地渲染著色，相較於傳統的框架效能有著極大提升。
ngraph.path：ngraph.path 是面向任意圖結構的任意兩點之間最快路徑搜尋演算法與實現， 與傳統的貪婪演算法、Dijkstra 等演算法相比，ngraph.path 能夠在準確率與效能之間達成較好的平衡。作者使用了面向於路徑查詢的專用堆優先佇列，並且重構了雙向搜搜演算法，以提高演算法的效能。
前端之巔
「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn.infoq.com，註明“前端之巔投稿”。