前端每周清單第11期：Angular 4.1支持TypeScript 2.3，Vue 2.3優化服務端渲染，優秀 React 界面框架合集

作者：王下邀月熊

編輯：尾尾

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

新聞熱點

國內國外，前端最新動態

• 《Angular 4.1.0 發布》：近日 Angular 4.1.0 版本發布，該版本中添加了對於 TypeScript 2.2 以及 2.3 的完整支持；除此之外，本版本還添加了一系列的新特性，並且修復了許多的錯誤。與此同時，TypeScript 2.3 也發布了。

• 《Airbnb 設計團隊發布 React SketchAPP》：Airbnb 設計團隊近日發布能夠將 React 組件渲染到 Sketch 文檔中的開源工具，它為開發工程師與設計師之間提供了便捷的溝通橋樑。

• 《Vue.js 2.3.0 JoJo"s Bizarre Adventure 發布》：近日，Vue.js 發布其 2.3.0 版本，帶來了一系列性能的提升與 Bug 修復。該版本對於服務端渲染、非同步組件等多個重要的部分進行了優化，值得一提的是，官方還創建了新的基於 Vue 的服務端渲染實現指南。

• 《斯坦福宣布使用 JavaScript 作為計算機課程的首選語言》：近日，某位有 15 年 Java 教學經驗的斯坦福教授決定放棄 Java，而使用 JavaScript 作為計算機入門課程的教學語言。斯坦福官方站點將它們新的 106J 課程描述為：JavaScript 是最流行的構建互動式 Web 的開發語言，本課程會用 JavaScript 講解 CS106A 中的實例。

• 《Flow 0.45.0 版本發布》：近日 Flow 0.45.0 版本發布，其引入了一系列的新特徵，譬如對於 Unicode 字元的支持、import 表達式的支持等；同時，Flow 還進行了部分錯誤的修復，並且優化了代碼運行效率。

開發教程

步步為營，掌握基礎技能

• 《在 Node.js 應用中如何使用 ESLint》：ESLint 是開源的 JavaScript Linting 工具，它能夠幫助開發者解決 JavaScript 無類型語言本身帶來的一些錯誤。ESLint 遵循組件化的設計思想，它允許開發者動態地設置使用的規則，而本文即是介紹基礎的 ESLint 環境搭建與使用方法的文章。

• 《8 小時內學習 Node.js》：Node.js 是基於 Google Chrome V8 引擎的 JavaScript 框架，其能夠用於開發類似於視頻直播、單頁應用等 IO 密集型的 Web 項目。而本文則是提供了完整的從零到一的 Node.js 學習路線圖，包含了基礎的環境構建、Console 使用、核心模塊使用、基本的 Web 伺服器搭建等等內容。

• 《SSH 背後的故事》：SSH 是最常用的協議之一，而本文則是記錄了 SSH 獲得其默認埠號 22 的背後的故事。除此之外，本文還記錄了 SSH 的基本搭建與使用，以及如何與 iptables 協同使用等內容。

• 《CSS-in-JavaScript：基於組件的樣式組織》：通過使用內聯樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠為我們提供類似於 CSS 預處理器、命名空間等多方面的輔助。本文則是介紹了幾個常見的適用於 CSS-in-JS 技術的場景，譬如排版、空格等。

• 《你應該掌握的關於調試 Angular 應用的知識》：調試是 Web 開發中不可或缺的部分，特別是對於那些接管已存在代碼庫的開發者，他們往往需要經過大量的調試才能了解代碼的架構與邏輯。不過貌似 Angular 官方文檔中尚缺專門對於 Angular 中調試的講解，本文則是深度淺出地講解 Angular 應用開發過程中的調試技巧。本文首先介紹了作者調試源代碼的技巧，然後介紹了如何使用框架內置的調試 API 來進行應用調試。

• 《CSS Grid 布局初體驗》：最近 CSS Grid 布局大紅大紫，吸引了很多開發者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了對於 CSS Grid 的支持。本文則是聚焦於何謂 CSS Grid 布局、它可以做些什麼以及如何投放到生產環境等內容。

工程實踐

立足實踐，提示實際水平

• 《一系列優秀的 React 界面框架》：本文列舉了多個優秀的 React 界面框架，分析了其特性、適用場景以及潛在的缺陷。本文涉及的框架包括 Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric 等等。

• 《使用 gRPC-Web 從 Restful JSON API 遷移到類型安全的 Web API》：目前 Web 開發中，REST + JSON 是標準的 Web 應用於 API 伺服器之間的交互方式。不過這種缺少強類型限制的、更多傾向於約定的通信方式往往會使得網路調試相對複雜。本文即介紹了如何擴展 gRPC 以及使用 TypeScript 設計新的系統中多個微服務之間的交互協議。

• 《實測 Vue SSR 的渲染性能：避開 20 倍耗時》：Vue SSR 是 Vue.js 2.0 引入的直出渲染方案，本文將全面解析 virtual-dom-based 及 string-based 的原理並對其進行對比。Vue SSR 的模板是 virtual-dom-based，所以 QQ 空間 Hybrid 業務做 Vue 2.0 的改造的同時，模板類型也從之前的 a 類轉換成 b 類。 本文是在實際業務場景中對 Vue SSR 的渲染性能做測試，並解析渲染步驟，給出嘗試優化的方案和最終結論。

• 《從零開始基於 JavaScript 構建簡單神經網路》：本文不是純粹的前端開發文章，對於聽說過人工智慧與神經網路並且有興趣的開發者不妨一讀。而本文則是漸進地介紹神經網路與深度學習理論基礎、如何使用 JavaScript 實現簡單的數學公式、如何實現簡單的神經網路等內容。

• 《來自 Vixlet 的 React 優化建議》：近年來 Vixlet 的 Web 團隊逐步將其 Web 框架遷移到了 React + Redux 技術架構，本文是來自於 Vixlet 的 React 優化實踐總結與建議。

深度閱讀

深度思考，升華開發智慧

• 《在 Web 開發中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多項目在選擇使用 CSS-in-JavaScript 來組織樣式的時候，卻是對於 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決命名空間衝突、保證樣式的可擴展性、帶來了性能提升與樣式文件的可組織性等等。

• 《d3.express：集成互動式編碼環境》：本文介紹了尚在開發中的 d3.express，一個類似於 Python Juypter Notebook 的互動式編碼環境。d3.express 允許開發者使用大量 d3 內置的功能函數，譬如載入遠程的 CSV 文件；並且允許開發者交互地實時預覽 SVG、Canvas 等繪製結果，有人認為 d3.express 會是一種基於 JavaScript 的更好的數據可視化解決方案。

• 《V8 不再使用基準測試引擎 Octane》：JavaScript 基準測試引擎是一段不斷進化的歷史。隨著網頁從原始靜態頁面到現在富客戶端應用，都需要基準測試引擎能夠與時俱進。SunSpider 是其中比較早的基準測試引擎，它為快速優化 JavaScript 提供了基礎。但是，隨著虛擬機開發者意識到微基準測試的局限性，基準測試引擎隨之更新，針對 SunSpider 的短板進行優化，同時瀏覽器社區也將 SunSpider 從推薦基準測試引擎中剔除。Octane 基準測試套件最早發佈於 2012 年，旨在減輕早期微基準測試引擎的一些缺陷。它源於 V8 的早期簡單測試用例，最終成為通用網頁性能的基準測試。Octane 包含 17 個不同的測試集，以覆蓋各種不同的工作場景。Octane 的內容代表它創建時度量 JavaScript 性能的主流方式。

• 《探秘 Google SEO 演算法背後的秘密》：SEO 是網站推廣過程中不可忽視的一個部分，其全稱為搜索引擎優化。本文則是面向 SEO 新手或者老鳥的有關 Google 推薦演算法的解構闡述，詳細分析了 Google 推薦演算法的考量因素，並且給出了如何對網站進行 SEO 優化的實踐建議。

• 《從實用主義視角來看現代前端應用開發》：現代 Web 開發技術變革迅速，而我也經歷了從純 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的變遷。本文則首先思考何謂現代 Web 應用，然後考慮現代 Web 應用常用的項目架構與構建方式，譬如 TypeScript、Webpack、Linting 等內容，然後討論現代常用的技術架構，譬如 React.j、MobX、依賴注入等相關知識。

開源項目

樂於分享，共推前端發展

• 《Sizzy》：Sizzy 是輔助開發者預覽網頁在不同屏幕解析度下顯示效果的工具，它能夠在同一頁上列舉出目標網頁在多個設備上的顯示效果，從而加速響應式開發的速度。

• 《create-next-app》：基於 Next.js 的類似於 create-react-app 的快速創建支持服務端渲染的 React 應用的命令行輔助工具。

• 《Fathom》：Fathom 是 Firefox 開源的用於提取網頁中有意義內容的 JavaScript 框架，其能夠有效識別頁面中的前進 / 後退按鈕、地址表單以及主文本內容等等。

• 《tamperchrome》：Tamper Chrome 是一個允許你實時截獲與修改 HTTP 請求的 Chrome 擴展，其能夠用於 Web 安全測試等多個方面，並且它能夠運行在包括 Chrome OS 在內的多種操作系統中。

• 《pkg》：pkg 能夠將 Node.js 項目打包為單個可執行文件，其允許開發者發布商業級應用而不用擔心源代碼泄露的風險。pkg 會自動掃描你的 node_modules，然後將需要用到的本地內容打包到可執行文件中。

巔峰人生

《技術人如何走出舒適區獲得快速成長？》：於晶純（Diane），FreeWheel 聯合創始人兼首席技術官，擁有約 20 年的廣告行業技術管理經驗。她組建並發展了一支規模約 500 人、分布在中國、美國和歐洲三地的全球研發團隊，全面負責產品的研發和運維，並帶領團隊不斷進行產品架構的改進和技術創新。在做客大咖說的過程中，於晶純分享了她對技術人成長的一些看法。

視野拓展

InfoQ 主辦的移動和前端開發領域的精品大會【GMTC 2017】將於 6 月 9～10 日在北京舉行，作為首屆以「大前端」為主題的大會，GMTC 涉及移動、前端、跨平台、AI 應用等多個技術領域，幫助你方方面面提高技術水平。前往官網了解詳細信息！

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回復「加群」。推薦分享或投稿請發郵件到 editors@cn.infoq.com，註明「前端之巔投稿」。