前端每週清單第 35 期：Vue.js 2.5 發佈、微前端概念詳解、瀏覽器擴展開發實踐

前端每週清單第 35 期：Vue.js 2.5 發佈、微前端概念詳解、瀏覽器擴展開發實踐

做者：王下邀月熊 編輯：徐川

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

新聞熱點

國內國外，前端最新動態

• Vue.js 2.5 發佈：本週 Vue.js 2.5 版本正式發佈，一樣包含了不少的特性提高與性能優化，推薦閱讀 Release Notes 獲取詳細的特性列表。本文則是對於 Vue.js 2.5 中的重要特性進行介紹，包括了更好的 TypeScript 集成、更好的錯誤處理、更好的單文件組件中的函數式組件支持以及多環境下服務端渲染的支持等。

• Next.js 4 發佈：本週發佈的 Next.js 4 版本全面支持 React 16，而且針對其內置的樣式引擎 styled-jsx 進行了更新，添加了對於動態樣式的支持。而在遷移到了新的 React 版本以後，Next.js 4 在服務端渲染的性能有了約 2.6 倍的提高，而且樣式初始化的速度也提高了 20% 左右。除此以外，該版本還包含了一系列的錯誤修復與功能加強，能夠查看原文獲取更多信息。

• Preact Cli 2.0.0 發佈：本週發佈的 Preact Cli 2.0.0 版本引入了自定義模板的特性，容許開發者使用 GitHub/Gitlab/Bitbucket 倉庫做爲自定義模板，而且經過 preact-cli 命令行工具來建立新的項目。除此以外，preact-cli 2.0.0 還升級到了 Webpack 3，而且修復了一系列的錯誤；能夠查看原文得到更多信息。

開發教程

步步爲營，掌握基礎技能

• Reboot.css: Bootstrap 4 中 CSS 基礎樣式歸一化：Bootstrap 是廣爲使用的前端樣式庫之一，而 Bootstrap 4 使用了Reboot.css 來替換老的 Normalize.css 進行基礎的樣式歸一化操做。本文首先回顧了 CSS Reset 概念的由來、其實際的價值以及流行過的版本，特別介紹了 Normalize.css 的做用及其缺陷。而 Reboot.css 正是面向現代瀏覽器，默認將全部元素設置爲 box-size: border-box;，而且以簡單天然的基礎樣式保證了跨瀏覽器樣式的一致性；更多 CSS 相關資料參考這裏。

• 利用 JavaScript Streams 加速 I/O 與數據操做：在現代 Web 平臺之上，Web Bluetooth、Background Sync 以及 WebVR 等一系列新特性的出現使得不少的新功能得以實現；而參考 Streams Specification，咱們可以使用流來進行數據的讀寫與處理，從而減小內存佔用、提升程序並行率、延長電池壽命、優化用戶體驗。本文便是介紹 Streams Specification 在瀏覽器中的實踐，首先對比了 Node.js 中的流與 Streams Specification、而後介紹了流的概念、語法和典型的使用場景，接下來具體介紹了讀寫流的使用以及 Fetch 的示範。更多 JavaScript 相關資料參考這裏。

• 結合 Bootstrap 4 與 Firebase 構建 Angular 5 項目：本文是入門級的介紹文章，介紹如何從零構建 Angular 5 項目，而且手動地添加 Bootstrap 4 以及 Firebase 庫到項目中。本文首先介紹瞭如何建立空白的 Angular 項目，而後介紹瞭如何建立空白的 Firebase 在線項目，而且將相關的 JavaScript 庫添加到 Angular 項目中；接下來本文討論瞭如何引入 Bootstrap 4 與 ng-Bootstrap，以及如何從 Firebase 中獲取數據而且呈如今界面上。更多 Angular 相關資料參考這裏。

• Vue.js 中 Form 使用詳解：Web 開發中常見的需求便是處理表單輸入，本文即着眼於介紹在 Vue.js 2.x 應用中如何建立、校驗以及利用表單中的用戶輸入。本文首先介紹瞭如何利用 v-model 等指令雙向綁定表單中的輸入域，而後介紹了利用 vee-validate 組件來進行聲明式數據校驗，而且添加自定義的校驗規則，最後介紹瞭如何提交表單數據而且進行響應回顯。更多 Vue.js 相關資料參考這裏。

工程實踐

立足實踐，提示實際水平

• 使用 CSS Grid 重構 slack.com: 本文是來自 Slack 的工程師分享他們基於 CSS Grid 從新設計與實現 slack.com 主頁的實踐；他們但願可以在保證體驗連貫性的狀況下，提高站點架構、代碼模塊化以及總體的性能與可訪問性等總體指標。本文首先介紹了對於主頁與 Web App 的解耦，以及對於基本組件庫的重構；而後介紹了現代化的響應式佈局方案以及如何使用 Flexbox 實現優雅降級。最後介紹了字體的設置與響應式圖片等內容；更多 CSS 相關資料參考這裏。

• Event Loop 與異步編程的崛起：本文是 How JavaScript works 系列的第四篇文章，主要討論了單線程環境的缺陷以及 JavaScript UI 中如何避免這些，最後還分享了幾個使用 async/await 的實踐。本文首先介紹了單線程中的不足、JavaScript 中構建塊、JavaScript Call Stack 以及 Event Loop 的詳細介紹、JavaScript 異步編程範式以及 async/await 的使用建議；更多 JavaScript 相關資料參考這裏。

• 構建彈性的瀏覽器擴展: Grammarly 是廣爲使用的 Chrome 插件，其 Firefox、Safari 以及 Edge 插件一樣吸引了大量的用戶。本文便是 Grammarly 背後的工程師團隊分享的他們六年來構建與完善該工具的實踐經驗，一樣也是他們對於如何構建彈性的瀏覽器擴展項目的心得分享。本文第一部分首先介紹了開發框架的搭建，包括文件目錄、命令行、組件瀏覽等；而後介紹了測試、分支模型、持續交付等；接下來討論了發佈到 Chrome Store、Mozilla add-ons、Safari gallery、Edge 的步驟，以及線上版本的質量管理、追蹤、反饋收集等內容。第二部分則介紹了具體的應用開發相關內容，包括網絡請求、權限驗證、用戶存儲、瀏覽器接口、權限校驗、容錯、彈窗、動態更新、性能等。更多瀏覽器擴展開發相關資料參考這裏。

• QQ 空間在生產環境使用 QUIC 協議的經驗：QUIC（Quick UDP Internet Connections，發音’quick’）是 Google 於 2013 年發佈的基於 UDP 的多路傳輸協議，它的主要目標是爲了整合 TCP 協議的可靠性和 UDP 協議的速度和效率，以下降延遲，提升用戶體驗。Google 經過大規模的性能分析發現，「相對於 TCP 而言，QUIC 的性能有了真正的進步」，而 QQ 空間前端團隊經過對 HTTP2 和 QUIC 協議的應用和實踐，使得 Web 頁面訪問速度獲得了很大的提高，而且他們針對性地採用了不一樣的資源加載策略，最大化利用了協議的優點。

深度閱讀

深度思考，昇華開發智慧

• WebRender 的極速之道：本文是對於 Firefox Quantum 引擎中，即將使用的高性能渲染引擎 WebRender 的詳細介紹。WebRender 最引人矚目的就是它的高性能，不過 WebRender 其實不能說是快，而是順滑；WebRender 的設計目標是但願應用可以以 60 FPS 運行，不管展現的數據量大小或者頁面跳轉。本文首先介紹了渲染引擎的做用，而後介紹了 Painting 與 Compositing 的含義與歷史，接下來討論了 WebRender 如何與 GPU 協同工做及其性能優化範式；更多瀏覽器引擎相關資料參考這裏。

• 微前端：微服務概念的前端實踐：本文是對於不一樣團隊使用的不一樣 JavaScript 框架構建 Web 應用的技術、策略、方法進行討論，其借鑑了服務端中很是流行的微服務的概念，對於 ThoughtWorks 2016 年底技術雷達中介紹的微前端的概念進行了詳細解讀。所謂微前端，便是將某個網站或者應用看作一系列由獨立團隊支撐的特性集合；本文對於現代 Web 應用、微前端的核心概念、DOM API、瀏覽器支持、服務端渲染、數據抓取等概念進行了詳細解讀。更多 Web 架構相關資料參考這裏。

• 微服務監控與儀表展現的將來：監控可以幫助咱們實時地瞭解系統狀態，發現、理解、定位、最小化潛在的業務問題；特別是在微服務這樣的分佈式離散系統中，咱們須要依賴強大的監控功能來保障業務的順暢運行。而微服務監控的將來也是依賴於行業中的標準化解決規範以及會引入的新特性，本文便是對於 2018 年中那些能夠預期的監控特性進行分析，介紹了 APM 的理論基礎以及 OpenTracing 的標準與實踐； 更多微服務相關資料參考這裏。

• 王躍：關於微信小程序的技術，也許你想錯了：2017 年 1 月 9 日，微信小程序正式發佈。在近一年裏，無論外界評價如何，小程序一直在堅決的向前走。同時它的理念和模式受到普遍承認，也被其它公司所模仿。在微信小程序尚在內測之時，外界對它所採用的技術就有不少猜想，正式發佈的小程序解答了人們的一些疑惑，但有些問題官方並未正式對外公開說過。在即將於 10 月 17 日舉辦的 QCon 上海 2017 大會上， 微信小程序相關項目負責人王躍將向你們分享小程序的核心架構及實戰案例，咱們也對他進行了採訪，提早了解了一些咱們關心的問題。

開源項目

樂於分享，共推前端發展

• browser-compat-data：browser-compat-data 是由 MDN 提供的常見 Web 相關技術的瀏覽器兼容性數據，使得咱們除了 Can i use 以外有了新的參考選擇。所謂的瀏覽器兼容性即描述了具體的瀏覽器平臺對於某些特定的 Web API 的支持狀況，能夠方便於咱們構建接口文檔，譬如瀏覽器支持度，或者動態地引入 Polyfill。

• React-Sight: React-Sight 是支持 Fiber、React Router、Redux 的 React 組件可視化工具，它可以將 React 組件以樹狀方式層次化地可視化呈現給開發者。目前 React Sight 提供了 Chrome 插件，不過須要開發者首先安裝 React Dev Tools。

• MapTalks.js: MapTalks.js 是用於建立易集成的 2D/3D 地圖的 JavaScript 輕量級框架，提供了高性能順滑的交互體驗、插件化的開發方式，而且易於上手與集成。MapTalks.js 基於 Mapbox.gl，而且徹底使用了 ES2015 的代碼，支持 IE9 以上的現代瀏覽器。

巔峯人生

• 漫極客 CTO 李焱：大前端之路 —— 如何用 Web 技術一統三端開發：本文是 EGO 會員、漫極客 CTO 李焱的線上分享，依次介紹了本身不安分、愛挑戰的折騰之旅、對於大前端的理解與定義、Web 技術一統三端開發實踐，包括 Node.js、APP、微信開發、PC 端、數據可視化、AR / VR、JS 性能、部署架構等方面。

前端之巔

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

前端之巔微信底圖－5.jpg