前端每週清單第 28 期：JS 運行原理與優化，高性能 CSS 引擎，Coursera GraphQL 實踐

時間 2019-11-16

標籤前端每週清單運行原理優化高性能 css 引擎 coursera graphql 實踐欄目 JavaScript 简体版

原文原文鏈接

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單。css

新聞熱點

國內國外，前端最新動態前端

Ayo.js: Node.js 內部的又一次分裂：Node.js 正逐步成爲主流的服務端語言之一，其驅動着 Microsoft 等許多公司的業務流程；與此同時，Node.js 社區也逐步在擴大。然而在上週一 TSC（技術指導委員會）上有關是否保留 Rod Vagg 職位的投票中，成員對於所謂的行爲準則遵循度發生了較大分歧，而且致使了數位 TSC 成員的退出、以及新的命名爲 Ayo.js 的 Node.js Fork 項目建立。這件事也反映了開源社區內部的自我調節能力，但願能有妥善的解決。vue
Polymer 3.0 預覽：在 2017 Polymer Summit 上，開發團隊發佈了有史以來最大的變革路線之一，其核心特性在於從 HTML Imports 切換到了 ES6 Modules，以及從 Bower 遷移到了 npm。這種變革保證了 Polymer 可以與大部分現代 JavaScript 開發者習慣的工做流相適應，除以以外，本文還詳細比較了 HTML Imports 與 ES6 Modules 各自的優劣，以及將來的詳細版本更新計劃。git

開發教程

步步爲營，掌握基礎技能程序員

React Native 中氣泡效果實踐：本文記述了做者在學習使用 Animated 與 PanResponder，構建頁面切換時動畫效果的實踐心得；本文首先介紹了 Animated 的基礎用法，而後討論瞭如何用 Animated.timing 添加變換，最後介紹瞭如何實現氣泡效果而且集成 PanResponder 實現頁面滑動切換的效果。更多 React Native 相關資料參考這裏。github
Angular 中組件間的三種通訊方式：本文是基於 Angular 2 編寫的討論 Angular 中組件間通訊方式的文章，其一樣適合於如今主流的 Angular 4 版本。本文依次介紹了在組件之間傳遞組件句柄以讀取數據、同級組件利用父組件做爲中轉完成數據傳遞、利用自動注入的單例 Service 來傳遞數據等。更多 Angular 相關資料參考這裏。npm
Node.js 應用的測試教程：JavaScript 是典型的弱類型解釋型語言，而添加合適的測試用例則是保證代碼的魯棒性與穩定性的有效方式。本文首先介紹了測試的概念以及基礎的單元測試用例的邏輯，而後介紹瞭如何使用 Mocha 與 Chai 編寫並運行測試用例；更多 Node.js 相關資料參考這裏。vim
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 後程序員的特色以及公司在技術選型上的考量、如何進行有效地我的轉型以及優秀程序的特質、如何和產品經理等小夥伴高效合做打造產品等內容。