前端每周清單第18期：Firefox、Chrome、React、Angular發布新版本；提升RN應用性能的方法

本文首發地址前端每周清單：Firefox、Chrome、React、Angular發布新版本；提升RN應用性能的方法

作者：王下邀月熊

編輯：尾尾

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

新聞熱點

國內國外，前端最新動態

• 《Firefox 54 發布》：在近日發布的 Firefox 54 版本中完成了對於 Firefox 的多進程版本升級，大大提升了穩定性，在未來會保證即使某個頁卡崩潰了也不會影響其他頁卡。此外，Firefox 54 中還引入了新的 WebExtension API，允許使用 WebExtension 來創建自定義的開發者面板；Firefox 54 中還加入了 CSS 的 clip-path 屬性支持等新特性。( Firefox 54: E10S-Multi, WebExtension APIs, CSS clip-path )

n

• 《Chrome 60 Beta 發布，新增 Patint Timing API》：近日發布的 Chrome 60 Beta 版本中添加了 Paint Timing API、CSS font-display 等新特性，同時優化了證書管理、支付請求介面等功能。我們可以方便地使用 Paint Timing API 來對網頁的載入指標中的，首屏繪製與首屏內容繪製進行計算，具體可以參考 Leveraging the Performance Metrics that Most Affect User Experience 這篇文章。( https://parg.co/b9q )

n

• 《React 15.6.0 發布》：React 15.6.0 中主要帶來了輸入域的提升以及對於 Deprecation 提示的優化。該版本中 onChange 事件響應會變得更加穩定，並且能夠處理 IE11 中存在的部分臨界情況；同時該版本還優化了對於使用廢棄介面的提示，不再強行使用 console.error 提示，而是替換為了 console.warn。( React v15.6.0 - React Blog )

n

• 《Angular 4.2 發布》：該版本可以無縫替換之前的 4.x.x 系列版本，主要包含了對於 Angular Form 中的極值校驗、提升了 i18n 工具等等內容；之外我們還可以參考 Angular 的現狀與 Angular 5 的預定日期這篇文章來了解更多關於 Angular 的訊息。( https://parg.co/b9Y )

n

• 《ESLint 4.0.0 發布》：作為大版本更新，ESLint 4.0.0 中添加了很多的新特性，並且針對之前版本中包含的錯誤進行了修正；可以點擊查看原文了解具體的規則更新情況以及升級指南。( ESLint v4.0.0 released )

n

開發教程

步步為營，掌握基礎技能

• 《如何用好 JavaScript console》：JavaScript 中最主要的的調試工具之一即是 console.log，而 console 對象還包含著其他幾個常用的調試方法。本文則是介紹了 console 對象，以及如何使用它進行簡單的時間消耗評測、優化數組或者對象輸出格式、通過 CSS 優化輸入等等。( https://parg.co/b9o )

n

• 《九個 React Native 動畫指南》：本文通過介紹九個 React Native 動畫地實現從零到一的介紹了 React Native 中的動畫機制。包含了通過 Animated.timing 來添加樣式動畫、創建可伸縮的按鈕、創建可拖拽的卡片、動態地變換元素的顏色、角度、序列位置等等實例。( https://parg.co/b9d )

n

• 《Airbnb: 從 Mocha 遷移到 Jest 帶來的測試性能優化》：本文介紹了 Airbnb 在將單元測試框架從 Mocha 遷移到 Jest 之後帶來的性能提升，原本的測試時間從超過十二分鐘降低到了不到五分鐘。本文首先介紹了通過簡單地全局設置來避免大量地測試代碼更改，然後討論了如何構建測試架構以提供測試速度並且減少不確定性。

n

• 《在 Vue.js 中使用 Mixins》：在項目開發中我們經常會碰到兩個組件的業務邏輯有所相似，可能共享相同的底層業務邏輯；此時我們就需要考慮如何來合理地劃分代碼，即避免冗餘代碼，也不能過度抽象。而本文則介紹了如何在 Vue.js 中使用 Mixins 來編寫可重複使用的功能代碼片；Mixin 允許我們將部分代碼片封裝到函數中然後動態地在多個組件中使用。( Using Mixins in Vue.js | CSS-Tricks )

n

• 《構建 React 組件庫》：本系列文章循序漸進地介紹如何設計編寫自己的小型組件庫並且將其發布到 NPM 倉庫中；第一篇文章著眼於如何從零開始搭建開發環境，第二篇文章則介紹如何利用 styled-components 來為組件添加樣式、添加調色板、構建高效開發流程以及如何實踐 Atomic Design 原則。( https://parg.co/b9u )

n

工程實踐

立足實踐，提示實際水平

• 《為什麼我選擇了 React 而不是 Vue？》：本文作者闡述了自己在技術選型過程中更傾向於 React 的原因，本文帶有較強的主觀色彩，請讀者批判性閱讀。本文作者認為 React 與 Vue 雖然是相似的前端組件型庫，但是 Vue、Angular、Knockout 等框架依舊是以 HTML 為中心，使用指令來描述部分邏輯；而 React 則是以 JavaScript 為中心，完全使用 JavaScript 代碼來描述邏輯。本文從模板、工具、狀態的可變性等角度來論證自己的觀點。( https://parg.co/b9H )

n

• 《現代 Web 開發魔法書》：本書是對現代 JavaScript Web 開發中涉及知識的分類與介紹，來源於作者日常工作中發送給全棧 Web 團隊新人的資源；目前已經納入了超過兩千的涵蓋了項目、工具、插件、服務、文章、數據、站點等多方面的鏈接。本書包含了 Web 平台概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構介紹、應用開發流程中使用的工具介紹等等欄目。( dexteryy/spellbook-of-modern-webdev )

n

• 《使用 Webpack 的 Magic Comment 特性簡化代碼分割》：新近發布的 Webpack 2.4.0 版本中引入了所謂的 Magic Comment 特性，該特性允許我們在動態導入時手動指定塊名，從而能夠幫助我們簡化代碼分割與服務端渲染的邏輯。本文則是以在 Universal Component 中實現 SSR 為例，介紹如何利用該特性來顯式地關聯需要導入的組件與塊名。( https://parg.co/b9A )

n

• 《5 個提升 React Native 應用性能的方法》：本文作者分享了自己在過去一段時間內嘗試提升公司 React Native 應用性能的實踐經驗，包括如何設置有效的性能測試、強制啟動 no-bind 規則、使用函數式組件、重製 TabMap 的邏輯等等。( https://parg.co/b93 )

n

深度閱讀

深度思考，升華開發智慧

• 《基於 JavaScript 的機器學習》：人工智慧與機器學習的浪潮洶湧而來，JavaScript 也並非旁觀者；可能有很多人認為 JavaScript 過於緩慢、缺乏大量的科學計算庫、僅適用於 Web 開發，而本文以及系列文章則深入淺出地介紹了如何利用 JavaScript 進行常見的深度學習操作。本文即以簡單的回歸擬合為例，從最基礎的庫安裝、數據導入、數據預處理到模型訓練、模型預測 介紹了如何使用 JavaScript 進行簡單的機器學習任務。( https://parg.co/b9K )

n

• 《京東 618：如何配合業務打造 JDReact 三端融合開發平台？》：良好解決多終端開發問題是提升團隊開發效率的有效方法，本文全面解析了京東 JDReact 三端融合平台。本文首先回顧了傳統無線開發的痛點，然後討論了 React Native 的優勢與局限，最後介紹了 JDReact 三端融合平台的整體架構、在功能、載入性能、內存方面的改進與優化以及發布到生產環境中的流程等內容。( 京東618：如何配合業務打造JDReact三端融合開發平台？ )

n

• 《談爬蟲反爬蟲套路，以及前端工程師在該領域的逆襲》：本文首先介紹了爬蟲與反爬蟲的現狀，造成目前爬蟲流量泛濫的原因，然後討論了，爬蟲反爬蟲技術的現狀以及雙方相互套路的方式，最後聊了下前端工程師在該領域會起到的作用。( 談爬蟲反爬蟲套路，以及前端工程師在該領域的逆襲 )

n

• 《JavaScript 內存管理速成》：本系列文章以漫畫的方式生動有趣地介紹了 JavaScript 中內存管理的相關知識，首先介紹了 JavaScript 與 C 這兩個風格迥異的語言是如何進行內存管理的，然後討論了 ArrayBuffers 與 ShardArrayBuffurs 存在的意義以及可能引起的臨界情況，最後討論了在未來 WebAssembly 開發中應該如何使用 Atomics 來處理並發情況下的臨界情況。( A crash course in memory management )

n

• 《詳解 HTTPS 基礎以及如何從 HTTP 切換到 HTPPS》：HTTPS 已經成為了現代站點不可或缺的部分，Chrome 與 Firefox 等瀏覽器會為沒有使用 HTTPS 的網站設置警告標識，搜索引擎也會給 HTTPS 的站點進行額外加分。本文則是先詳細地解釋 HTTPS 的底層原理，然後介紹如何為 Apache 站點添加證書並且啟用 HTTPS 連接。( A Complete Guide To Switching From HTTP To HTTPS – Smashing Magazine )

n

開源項目

樂於分享，共推前端發展

• 《Amplitude.js》：Amplitude.js 是輕量級、零依賴的現代 HTML5 音頻播放器，。( 521dimensions/amplitudejs )

n

• 《WCDB》：WCDB 是由微信開源的，一個高效、完整、易用的移動資料庫框架，基於 SQLCipher，支持 iOS, macOS 和Android。( Tencent/wcdb )

n

• 《flubber》：flubber 是用於平滑形狀變換動畫的工具庫。在 Web 開發中，如果我們需要在基於 SVG 或者 Canvas 構建的兩個圖形之間進行變換；如果這兩個圖形本身毫無關聯，那麼可能會出現異常的中間狀態。而 flubber 則內置了一些推測演算法來幫我們平滑這個變換過程。

n

• 《collect.js》：collect.js 提供了便捷且零依賴的操作數組與對象的多個工具函數，譬如 combine 函數可以將兩個數組合併為對象列表，groupBy 可以根據鍵來進行分組等等。( https://github.com/ecrmnn/collect.js )

n

巔峰人生

《Vue作者尤雨溪的深度訪談》：從童年，到第一次編程，到Vue的發展以及Vue給大家帶來了什麼，這篇採訪對Vue作者尤雨溪進行了深度挖掘。（Vue作者尤雨溪的深度訪談，你不得不看）

前端之巔

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

推薦閱讀：