前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
Ayo.js: Node.js 內部的又一次分裂：Node.js 正逐步成為主流的服務端語言之一，其驅動著 Microsoft 等許多公司的業務流程；與此同時，Node.js 社群也逐步在擴大。 然而在上週一 TSC（技術指導委員會）上有關是否保留 Rod Vagg 職位的投票中，成員對於所謂的行為準則遵循度發生了較大分歧，並且導致了數位 TSC 成員的退出、以及新的命名為 Ayo.js 的 Node.js Fork 專案建立。這件事也反映了開源社群內部的自我調節能力，希望能有妥善的解決。
Polymer 3.0 預覽：在 2017 Polymer Summit 上，開發團隊釋出了有史以來最大的變革路線之一，其核心特性在於從 HTML Imports 切換到了 ES6 Modules，以及從 Bower 遷移到了 npm。這種變革保證了 Polymer 能夠與大部分現代 JavaScript 開發者習慣的工作流相適應，除以之外，本文還詳細比較了 HTML Imports 與 ES6 Modules 各自的優劣，以及未來的詳細版本更新計劃。
開發教程
步步為營，掌握基礎技能
React Native 中氣泡效果實踐：本文記述了作者在學習使用 Animated 與 PanResponder，構建頁面切換時動畫效果的實踐心得；本文首先介紹了 Animated 的基礎用法，然後討論瞭如何用 Animated.timing 新增變換，最後介紹瞭如何實現氣泡效果並且整合 PanResponder 實現頁面滑動切換的效果。更多 React Native 相關資料參考 這裡。
Angular 中元件間的三種通訊方式：本文是基於 Angular 2 編寫的討論 Angular 中元件間通訊方式的文章，其同樣適合於現在主流的 Angular 4 版本。本文依次介紹了在元件之間傳遞元件控制程式碼以讀取資料、同級元件利用父元件作為中轉完成資料傳遞、利用自動注入的單例 Service 來傳遞資料等。更多 Angular 相關資料參考這裡。
Node.js 應用的測試教程：JavaScript 是典型的弱型別解釋型語言，而新增合適的測試用例則是保證程式碼的魯棒性與穩定性的有效方式。本文首先介紹了測試的概念以及基礎的單元測試用例的邏輯，然後介紹瞭如何使用 Mocha 與 Chai 編寫並執行測試用例；更多 Node.js 相關資料參考這裡。
Angular 中 CSS 樣式使用：為應用新增合適的樣式是提升整體使用者體驗與感染力的重要手段，而 CSS 則是通用的 Web 樣式定義標準。本文主要討論如何在 Angular 應用中使用 CSS 來為元件新增樣式，首先介紹了全域性 CSS 與元件隔離的 CSS 這兩種不同的定義正規化，然後介紹了三種元件封裝的方式；更多 Angular 相關資料參考這裡。
使用 Flow 為 React 應用新增型別檢測：與 Flow 相比，TypeScript 是更為流行的 JavaScript 靜態型別檢測工具；不過近年來 Flow 社群也一直在不斷增長，特別是其在 React 方面的天生優勢為其增添了不少優勢。本文首先對比了 Flow 與 TypeScript 各自的優劣，然後細緻介紹瞭如何使用 Flow 為 React 與 Redux 等新增型別檢測；更多 Flow 相關資料參考這裡。
工程實踐
立足實踐，提示實際水平
為什麼在 React Render 函式中使用箭頭函式或者 bind 繫結是有問題的？：我們常常會在 Render 函式中使用 bind 或者 Arrow Function 來繫結回撥函式的 this 指標，本文則以實際的案例分析了這種方式存在怎樣的問題。更多 React 相關資料參考這裡。
Coursera 應用 GraphQL 實踐：在過去的數年中，Coursera 通過編寫動態工具以逐步將它們的所有 REST API 遷移到了 GraphQL 介面；這種方式即允許服務端開發者在以他們熟悉的方式編寫 RESTful 介面，也允許客戶端開發者通過 GraphQL 靈活地訪問資料。本文則是 Coursera 開發者分享的他們應用 GraphQL 的實踐經驗，包括在這個過程中感受到的優勢與碰到的坑。更多 GraphQL 相關資料參考這裡。
Font-size: 比想象中還要複雜點的屬性: Font-size 算是最常用而又複雜的屬性之一，本文則是從構建樣式系統的角度出發，討論 Font-size 屬性處理的複雜性。本文首先討論了 Font-size 常用的單位，尺寸、百分比、計算值、絕對關鍵字、相對關鍵字等；然後介紹了樣式系統的工作原理以及對於不同的屬性值的工作原理與預設設定。更多 CSS/SCSS 相關資料參考這裡。
深入淺出 Angular.js 動畫：合理的變換動畫是構建現代 Web 應用的重要元素，能夠方便使用者更好地理解產品的設計理念，提升使用者體驗。本文則是著眼於討論基於 Angular.js 構建現代 Web 應用中的動畫的不同方式，從 CSS 與 JavaScript 動畫基礎開始討論，到複雜的 Angular 應用動畫組成。本文依次介紹了狀態轉化基礎、如何新增 UI 變換動畫、使用 GreenSock 編寫命令式動畫、使用 Angular Animations 新增宣告式動畫等內容；更多 Angular 相關資料參考這裡。
深度閱讀
深度思考，昇華開發智慧
使用 JavaScript 擴充套件低延遲記憶體中鍵值儲存：RAMCloud 是典型的整合了 DRAM 與 RDMA 的超低延遲鍵值儲存，本文則是討論了使用 SQL、C++/Native Code 以及 JavaScript 這三種不同的方式實現服務端邏輯計算的效能與可用性對比。原論文是使用了 asm.js 來加速 JavaScript 運算，本文作者還擴充套件討論了 WebAssembly 在高效能運算方面的應用；更多 JavaScript 相關參考這裡。
十個可編譯為 JavaScript 的語言對比：隨著現代 Web 應用複雜度的增加，其相較於簡單的網站有了更多的特殊需求；然而瀏覽器本身只是提供了固定的統一的功能介面，並且目前瀏覽器僅支援 JavaScript 這一門指令碼語言。在這種背景下，出現了很多的 JavaScript 的方言或者超集，這些能夠編譯為 JavaScript 的語義以其各自的語言特性吸引了很多的關注；本文則對比討論了 Dart、TypeScript、Elm、PureScript、CoffeeScript、ClojureScript、Scala.js、Reason、Haxe、Nim 等常見的可編譯為 JavaScript 的語言。更多 JavaScript 相關參考這裡。
深入解析高效能 CSS 引擎：Quantum CSS（Stylo）：Qutantum 專案旨在利用 Rust 重寫 Firefox 核心來提升其執行效能，該專案將會替換現存的 Jet 引擎，主要由 Flow、CSS、Render、DOM、Compositor 這幾個部分組成。本文則是對於 Quantum CSS（又名 Stylo）進行深度解析，其能有效利用現代計算機上搭配的硬體裝置，利用所有的計算單元來並行化所有的操作。本文依次介紹了 CSS 引擎的工作原理、Stylo 的優化之道等內容；更多瀏覽器相關資料參考這裡。
JavaScript 工作原理與優化建議：本系列文章著眼於深入討論 JavaScript 及其內部工作原理，從而幫助開發者編寫出更加穩定高效能的 JavaScript 程式碼。首篇文章會對於 JavaScript 引擎、執行時與呼叫棧進行簡要的介紹，第二篇會專注於 Google V8 引擎的內部原理介紹，與此同時文中還會給出數個 JavaScript 程式碼優化的建議；更多 JavaScript 相關參考這裡。
開源專案
樂於分享，共推前端發展
Oni：Oni 是基於 Neovim、React 與 Electro 的 IDE，其受到了 VSCode、Atom 以及 LightTable 的啟發。Oni 提供了語法提示、自動補全、錯誤提示、模糊搜尋、狀態列等功能，希望為開發者提供跨平臺、豐富外掛、優良介面、高效能、易用易上手的編輯器。
generate-vue-file-components: generate-vue-file-components 是基於 Visual Studio Code 的自動生成 Vue.js 單檔案元件的外掛，它支援多種靈活地建立方式，允許指定元件模板或者預設的檔案路徑。
Rendertron: Rendertron 是可使用 Docker 進行容器化打包的，基於 Headless Chrome 的渲染解決方案；Rendertron 可用於渲染動態網頁，也可以用於增強 PWA 對於不同的 Bot 的響應內容。Rendertron 能夠以獨立的 HTTP 伺服器的方式執行，也可以以中介軟體形式嵌入到現有的 Web 服務端應用中。
Rocket.Chat：Rocket.Chat 是基於 Meteor 開發的，類 Slack 功能豐富的開源 Web 聊天通訊平臺。Rocket.Chat 為我們提供了服務端、桌面應用、移動應用、Web 應用等涵蓋全流程的模組，同時支援 Docker、Ansible、Heroku 等多種不同的部署方式。
巔峰人生
- 在 CTO 眼裡，什麼樣的程式設計師是更值得信賴的？：本文是輕鬆籌 CTO，EGO 會員李汐在大咖說上的分享，主要從公司的層面來聊聊程式設計師的發展之路。本文依次討論瞭如何平衡個人成長與公司效率、90 後程式設計師的特點以及公司在技術選型上的考量、如何進行有效地個人轉型以及優秀程式的特質、如何和產品經理等小夥伴高效合作打造產品等內容。
前端之巔
「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn.infoq.com，註明“前端之巔投稿”；或者可以閱讀往期文章：