前端每週清單第 32 期：React 開源協議更新、JS 完整編年史、Vue 組件通訊

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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，註明「前端之巔投稿」。