前端每週清單：React Router 4.0發佈、Firefox 52默認支持WebAssembly、蘋果熱修復門盤點

前端每週清單：React Router 4.0發佈、Firefox 52默認支持WebAssembly、蘋果熱修復門盤點 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐。更多閱讀清單請轉向往期索引。

前端每週清單

新聞熱點

前端領域最新動態

• 《蘋果封殺帶有熱更新特性的應用》：近日，部分使用 Rollout.js 或者 JSPatch 的開發者表示其應用在提交審覈時受到了警告，表示由於應用可能會在運行時改變其功能特徵而被打回。與此同時 React Native、Weex 等混合開發技術人員也表示了擔憂，不過 Rollout.js/JSPatch 都會暴露底層接口給 JavaScript 調用，而 RN 只是內部使用了原生方法，而且Apple 也容許使用 JavaScriptCore 更新代碼（CodePush 這類的是符合要求的）。( http://6me.us/ZXEz )

• 《Let's Encrypt 升至 SSL 證書提供商首位》：隨着 HTTPS 浪潮的來臨，愈來愈多的金融站點、在線存儲以及其餘網站使用 SSL 來加密傳輸數據。而做爲開源免費的 SSL 證書提供商，Let's Encrypt 超越 COMODO CA Limited、GeoTrust Inc.、GoDaddy 成爲了佔據市場份額最多的廠商。( http://6me.us/1Od )

• 《Firefox 52 版本發佈》：本週 Mozilla Firefox 團隊正式發佈 Firefox 52 版本，自此 Firefox 成爲第一個默認支持 WebAssembly 的瀏覽器。同時 Firefox 還優化了安全機制，當用戶在非安全頁面輸入密碼時會進行安全提示。此外本版本還引入了 CSS Grid、async/await 支持等特性。( http://6me.us/rtkX )

• 《React Native 中的 FlatList 組件》：3 月 1 日開始 ReactNative 中的 FlatList 正式從測試包中移動至正式包中；咱們在項目開發中可使用 FlatList、SectionList、VirtualizedList 來替代傳統的即將被移除的 ListView。( http://6me.us/dqiO1 )

• 《React Router 4.0 正式版發佈》：今日 React Training 宣佈 React Router 4.0 正式版發佈，該版本相較於前面三個版本有根本性變化，遵循 Just Component 的 API 設計理念。( http://6me.us/rov8c )

開發教程

步步爲營，掌握基礎技能

• 《Vue.js 實用技巧》：本文來自於餓了麼大前端的 cinwell， Vue.js 2.0 已經發布了有一段時間，生態鏈也日漸完善。做者在使用 Vue.js 開發項目時收集的一些工具和使用技巧，分享給各位。( http://6me.us/alZ )

• 《GraphQL 名詞 101：解析 GraphQL 的查詢語法》：GraphQL 日漸成爲數據查詢的主流標準之一，整個生態圈也蓬勃發展。本文則由淺入深地詳細介紹基礎的 GraphQL 格式與關鍵字，有助於初學者對於 GraphQL 的使用造成體系認知。( http://6me.us/K7SMyO )

• 《結合 Firebase 構建完整 Angular 認證系統》：該做者在視頻中詳細介紹瞭如何利用 Angular 2 構建前端界面，而且使用 Firebase 做爲後端存儲支撐來構建完整的認證系統。( http://6me.us/PxWiA )

• 《按部就班在 Sketch 中建立完整的 APP 設計項目》：本文做者介紹瞭如何在 Sketch 建立完整的應用設計系統，從最簡單的建立文件夾開始，到顏色選擇、排版設置、網格配置到最後的頁面到發佈等等。( http://6me.us/DJgEx)

• 《使用 Service Worker 與 Background Sync 進行延遲請求》：本文做者以信息發送爲例，介紹瞭如何利用 Service Worker 與 Background Sync 來當用戶離線時保留用戶請求信息，直到用戶從新在線時自動完成請求，將信息發送出去。( http://6me.us/IrTKkz )

• 《Service Worker 測試》：本文介紹了一些用於測試 Service Worker 的實踐技巧與方法，來保證你的站點在離線時也能有正確地響應與操做。( http://6me.us/4uzz )

• 《Angular 應用中的狀態管理》：本系列文章介紹瞭如何利用 ngrx/store 與 ngrx/effects 對典型的 Angular Todo 應用進行狀態管理。( http://6me.us/jMVVqk )

工程實踐

立足實踐，提示實際水平

• 《vue2-elm》：基於 vue2 + vuex 構建一個具備 45 個頁面的大型單頁面應用，涉及註冊、登錄、商品展現、購物車、下單等等，是一個完整的流程。挺不錯的學習參考資料。( https://github.com/bailicangd... )

• 《ReactNative 性能優化實踐》：日前有人表示 React Native 在 Android 上表現不佳，本文則是做者對於潛在的性能問題提出的優化方案。做者首先分析了常見的 Overdraw 問題以及可能的問題源與解決方案，而後介紹了列表中常見的 GPU 渲染瓶頸以及解決方案。( http://6me.us/qX63f )

• 《JavaScript 圖片處理庫盤點》：圖片處理一直是客戶端開發中的常見問題，本文則是對基於 JavaScript 的常見的進行圖片濾鏡、裁剪等操做的庫進行了盤點；本文橫向比較了 CamanJS、glfx.js、grafi.js、Jimp 以及 Filtr2 這幾個經常使用的圖片處理庫，而且給出了不一樣業務場景下的選用建議。( http://6me.us/ylUyM )

• 《Slack 是如何減小其客戶端內存佔用的》：本文是 Slack 在其桌面應用的開發過程當中探索出的如何減小應用內存開銷的經驗介紹。Slack 最初爲用戶的每一個登陸團隊都啓動了相同的處理進程，然後根據調研發現僅有部分用戶會同時使用多個團隊；所以 Slack 從卸載後臺團隊的 DOM 樹、分拆 JavaScript 代碼進行優雅降級、重構 JavaScript 代碼庫等多個方式來優化桌面應用的內存佔用。( http://6me.us/z0XSh3 )

• 《別被如今的密碼設置原則騙了》：最近 CIA 的黑客工具箱曝光於衆，也引起了你們對於系統安全的擔心；本文做者則是從應用系統權限認證中密碼設置原則的角度出發，首先指出現存的不少所謂密碼原則（譬如必須是 8~32 個字符、必須包含字母數字等）仍是存在一些漏洞，並不能徹底依賴於這些原則，最後也提出了本身對於如今雲計算與 GPU 運算的環境下如何構建有效地密碼設置體系進行了介紹。

• 《React 中 setState 的函數式用法》：React 生態圈中一直崇尚所謂函數式編程理念，而本文做者介紹瞭如何利用 setState 函數的回調來實現 setState 的函數式用法；就像 Redux 中的 reducer 同樣，可以獨立聲明於組件外，而後聲明式的使用，從而保證組件更新邏輯的清晰與可測試性。

深度閱讀

深度思考，昇華開發智慧

• 《我理解的「大前端」或「大無線」》：本文主要是介紹做者所在團隊最近的一些變化和思考，包括前言、NodeJS職能變化、ReactNative的大規模應用、專門的架構組職能、總結五部分。。( http://6me.us/Md2 )

• 《Base64 編碼與性能得失》：在 HTTP 1.x 的時代，爲了減小網絡請求數，咱們會將小圖片以 Base64 編碼的方式插入到網頁中直接返回。本文則是對於 Base64 編碼的基本原理、編碼以後帶來的包體增長與解析時間損耗、使用 preload 替代 Base64 等知識進行了分析。 ( http://6me.us/vTB6A )

• 《ReactRouter-V4 構建之道與源碼分析》：本文介紹了 React Router V4 的設計思想，一步一步由淺入深地介紹如何從零開始構建一個相似於 React Router V4 這樣的秉持路由即組件的思想的路由框架。( http://6me.us/jfUwEw )

• 《大型可擴展系統的設計之道》：本文深刻淺出地介紹了大型可擴展系統的基本組成，咱們從客戶端發起的請求會在後端通過怎樣的奇幻漂流以後造成響應數據，是個前端開發者不錯的拓寬視野的閱讀資料。( http://6me.us/NjAHhu )

• 《流行網站上陳舊的 JavaScript 庫留存調研》：本文是 Tobias Laudinger 及其合做者對於客戶端 JavaScript 庫的使用現狀的調研報告；基於對於超過 133K 個網站的調查結果，它們發現大約 37% 的站點仍然使用了某些存在已知漏洞的 JavaScript 客戶端腳本，它們建議咱們必定要慎重思量網站中引入的外部依賴，特別是對於那些已經運行了好久的站點。( http://6me.us/csu2da )

• 《來自 Formidable 的 2017 React Naive 技術棧》：本文是來自 Formidable 的工程師 Jani Eväkallio 介紹的他們在 2017 選定的 React Native 開發技術棧，包括構建工具、組件庫、狀態管理等等方面。( http://6me.us/yH2yE )

開源項目

樂於分享，共推前端發展

• 《基於 Vue2 與 Element-UI》的管理系統模板：基於Vue.js 2.x系列 + Element UI 的後臺管理系統解決方案。( https://github.com/lin-xin/ma... )

• 《PWA Builder》：隨着 PWA 的日漸發展，Manifoldjs 也轉型成爲 PWA 應用在線構建工具；該工具爲用戶提供了在線構建 Manifest、自動生成多格式 Icon、建立 Service Worker、發佈 PWA 等多種服務。( http://6me.us/VW9nG )

• 《UnCSS》：UnCSS 可以幫助你從樣式表中移除 HTML 中未被用到的樣式，它支持多文件以及 JavaScript 樣式定義，而且提供了接口、命令行、構建插件、POSTCSS 插件等多種使用方式。( https://github.com/giakki/uncss )

• 《命令行圖片壓縮工具探討》：本文對於基於 ImageMagic 進行常見的圖片、壓縮轉換任務進行了介紹。( http://6me.us/WYOP1 )

• 《Vue.js 前端框架比較》：本文是對經常使用的基於 Vue.js 的前端框架的比較。( http://6me.us/5E8wN )

巔峯人生

一覽衆山，聆聽巔峯故事