前端每週清單第 37 期：Bootstrap 4 必知必會、2017 Vue.js 報告、Graphcool 開源框架

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

新聞熱點

國內國外，前端最新動態

• 再見，Firebug: Firebug 是曾經最爲流行與強大的 Web 開發調試工具，無數的 Web 開發者都曾經使用過 Firebug。在 2005 年 Firebug 面世之初，它是首個可以容許開發者審查、編輯以及直接在 Firefox 瀏覽器中直接調試代碼的工具；一年以後 Firebug 宣佈開源，也吸引了更多的開發者協同維護這個工具。直到 2016 年，Firefox 宣佈將會統一 Firebug 與 Firefox 的內置調試工具；近日發佈的新版的 Firefox 的內置開發工具也是基於 React/Redux/Webpack 等流行的 Web 開發技術棧，爲開發者們提供了更多酷炫的功能。
• Apollo Client 2.0 發佈: Apollo Client 是靈活易用的、徹底由社區驅動的，可以與 React、Vue.js、Angular 等常見的 JavaScript 框架無縫集成的 GraphQL 客戶端。目前 KLM、IBM、Intuit 等公司都已經在他們的項目中使用了 Apollo Client。 2.0 版本也是更來了一系列的功能更新與特性加強。在新版本中，咱們可使用 Apollo Link 來做爲網絡層以優化數據交互的性能，經過 apollo-link-state 與 apollo-link-rest 則可以平滑地兼容原有的內部狀態與 REST 接口；更詳細的版本說明請參考原文。
• React Studio 1.2 發佈：React Studio 是基於 React 的可視化 Web 開發工具，近日其發佈了 1.2 版本；該版本中主要包含如下特性更新：內置集成了 Git 版本管理工具、集成了插件編輯器、添加了 Create Plugin 等命令、容許基於 Canvas 的 3D 預覽。此外，項目的結構圖功能也獲得了加強，可以幫助開發者自動優化顯示的組件樹結構，而且優化了 Plugin Store 中插件的提交與安裝方式。

開發教程

步步爲營，掌握基礎技能

• Graphcool Framework 介紹: 近日 Graphcool 宣佈開源包括 GraphQL 數據庫、權限認證系統、實時訂閱、Cloud Native 運行時等在內的完整的 Graphcool 開發框架；本文便是介紹如何利用 Graphcool Framework 快速構建與部署生產環境下的 GraphQL 服務端。GraphQL 數據庫容許使用者經過 GraphQL CRUD 接口來對數據進行增刪改查與流式獲取,Permission 系統則提供了基於角色的權限校驗功能，Subscription API 則提供了實時的數據推送功能。更多 GraphQL 相關資料參考這裏。
• 基於 JavaScript 的瀏覽器自動化與網頁抓取: 本文的核心內容是介紹如何使用 Headless Chrome、Puppeteer 以及 Node.js 進行網頁抓取，咱們在過去的清單中也屢次推薦過 Puppeteer 相關的內容。本文首先介紹了 Puppeteer 中基礎的截圖接口的調用與代碼運行，而後按部就班地介紹瞭如何針對性地抓取數據，最後討論瞭如何使用對外發布的服務；更多瀏覽器自動化詳細教程參考這裏。
• 使用 WebStorm 高效率開發 Angular 的建議: 本系列文章是由 Google 技術專家 Jurgen 以及 Motto 分享的，使用 WebStorm 開發 Angular 應用過程當中，如何提升開發效率的實踐思考。本文首先介紹了協同使用 WebStorm 與 Angular CLI，而後討論瞭如何在 WebStorm 中快速切換與定位組件，接下來討論瞭如何利用 Angular Language Service 以及如何自動化補全代碼，最後介紹瞭如何優化 Imports。更多 Angular 相關資料參考這裏。
• 使用 TypeScript 編寫 React 與 Redux 應用: 隨着應用複雜度與工程中代碼數目的增長，咱們不可避免地須要引入靜態檢測工具以提升代碼質量，本文便是介紹如何在 React 與 Redux 開發中使用 TypeScript。本文依次介紹了在類組件、函數式組件、Redux 的 Action 與 Action Creator、Reducer、Store 中使用類型校驗；更多 React 教程參考這裏。
• HTML 文檔中 head 內標籤詳解: 本倉庫是對於 HTML 文檔中 head 相關的屬性進行詳細介紹，包括 head 中可以使用的標籤枚舉、元標籤、Link、圖標、社交分享、瀏覽器與平臺加強等；更多 HTML 頭標籤教程查看這裏。

工程實踐

立足實踐，提示實際水平

• 爲何 Decisiv 選擇使用 Styled Components: 本文是來自 Decisiv 的工程師分享的他們對於 CSS-in-JS 的見解，以及爲什麼在衆多的 CSS-in-JS 框架中選擇 Styled Components 的緣由。做者首先闡述了本身的見解，CSS-in-JS 並不是適用於全部的團隊或者全部的場景，而後做者討論了 React 中常見的樣式管理模式以及 CSS-in-JS 的基本概念。接下來做者根據 Decisiv 的業務特殊性以及自身的架構設計分析了爲什麼須要使用 CSS-in-JS，而且討論了 Styled Components 相較於其餘框架的優點：龐大而快速發展的社區、模板字符串以及對於 Sass 的支持、原生的移動端支持等。更多 CSS-in-JS 教程查看這裏。
• 小米直達服務介紹與開發實戰: 本文爲 10 月 24 日前端之巔社羣羣分享整理而成，分享人小米 MIUI 系統框架負責人董紅光，主要會圍繞項目的背景和理念、平臺的技術架構、以及一個簡單的開發示例，來介紹小米的直達服務。本文首先介紹了直達服務平臺的背景理念，即可以結合移動端網頁和應用的優勢，既不須要下載安裝，功能服務又完整，還能達到原生般的流暢，服務間還能無縫打通和互相索引。直達服務平臺上的各個服務採用前端技術棧開發，可是並不跑在瀏覽器或 WebView 中，它捨棄了瀏覽器內核渲染，轉而採用 Android 的原生渲染機制，也就是說，其實是使用前端技術棧開發了一個原生應用，不管是渲染效率，仍是系統能力的 API 豐富程度，都遠遠超出傳統網頁。
• 前端清單: 做者根據自身多年的前端開發經驗與其餘的開源清單，總結出了此份將站點或者網頁發佈到生產環境以前的自檢清單。本文依次介紹了必備的視口、語言等頭部標籤，HTML 的最佳實踐與測試，Webfonts 的使用，CSS 中響應式設計、預處理器、惟一 ID、Reset CSS 等內容，圖片的優化，JavaScript 的鏈接、壓縮、測試等，網絡安全、性能、可用性的提高，SEO 等內容。更多 Web 實踐教程參考這裏。

深度閱讀

深度思考，昇華開發智慧

• 深刻了解 Bootstrap 4: 本文涵蓋了如何使用 Bootstrap 4 構建響應式網站的關鍵技巧，特別是在瀏覽器逐步全面支持 Flexbox 與 Grid 的狀況下，應該如何解決常見的響應式 Web 設計難題。本文首先對於 Bootstrap 4 的特性進行介紹，包括默認的 CSS Resets 等關鍵變化；接下來本文討論了 Bootstrap 的工做原理以及它可以在 Web 項目中起到的做用與如何引入到項目中，最後做者以上萬字的篇幅詳細介紹瞭如何使用 Bootstrap 4 來構建經常使用的佈局與組件。更多 Web 佈局相關內容參考這裏。
• 2017 Vue.js 現狀報告: 本文做者將 2017 年中重要的 Vue.js 相關的信息與商業使用案例濃縮在了一份 80 頁的報告中。該報告主要包含了如下內容：Vue.js 的建立者 Evan You 對於 Vue.js 的將來有何規劃，Adobe、Behance、Codeship 以及 Gitlab 這些公司是如何使用 Vue.js 的，爲何大部分軟件開發者會願意在下一個項目中使用 Vue.js，Vue.js 的主要學習資源包含哪些，Vue.js 這些年經歷了怎樣的變化；更多 Vue.js 相關資料參考這裏。
• JavaScript 與 ECMAScript: 做者在本文中闡述了其對於 JavaScript 與 ECMAScript 之間的異同點的認知，同時也討論了 ECMAScript 與瀏覽器、Babel 等概念之間的關聯。Ecma International 是負責建立技術標準的組織，ECMA-262 是由 Ecma International 發佈的描述通用腳本語言的標準，而所謂的腳本語言便是指在某個現存系統或者實體上運行的語言。ECMAScript 並非一種語言，而是一種規範（Specification），即 ECMA-262 中定義的規範；JavaScript 則是遵循 ECMAScript 規範的具體的腳本語言的實現，根據 ECMAScript 規範咱們能建立新的腳本語言，而學習 JavaScript 則可以使咱們瞭解如何去使用它。更多 JavaScript 教程參考這裏。

開源項目

樂於分享，共推前端發展

• React-Virgin: React-Virgin 是由 Trixie 公司開源的針對 React Native 項目的 UI 模板與工具庫，其致力於幫助開發者快速開發美觀的應用。React-Virgin 目前包含了基於 react-navigation 的模板，以及基礎組件、水平列表、垂直列表、按鈕、頭、網格、氣泡、加載器等組件。
• HEML：HEML 是開源的用於構建響應式郵件的標記語言，能夠將其看作郵件模板的開發利器；開發者使用正常的 HTML 寫好郵件，HEML 則會處理全部郵件客戶端的兼容性。HEML 官方宣稱的特性包括 Native Feel，即便用 HTML、CSS 這樣熟悉的語言進行開發；Forward Thinking，即可以爲全部的客戶端提供一致的體驗；Extendable，即提供了豐富的接口以建立自定義的元素與樣式規則。
• SQIP: SQIP 是基於 SVG 的 LQIO 方案，其可以用於生成可用的 SVG 格式的圖片替代（Image PlaceHolder）；所謂的 Image PlaceHolder 即指那些可以從圖片中捕獲圖片的主要色彩，而且在圖片加載完成以前先佔用相同尺寸的資源。而於 2012 年提出的 LQIP 則是主流的 Image PlaceHolder 解決方案，Facebook、Pinterest、Medium 等公司皆有其相應的開源庫；SQIP 但願可以在替代圖的質量與文件大小之間達成較好地平衡。
• Webpack Monitor : Webpack Monitor 是一個高可配置的 Webpack 插件，其可以捕獲構建生成的，生產環境中包體關鍵統計指標；而且 Webpack Monitor 提供了交互式地分析工具，來幫助開發者更好地審視包體的構成，以此來識別與選擇可用的優化策略。

巔峯人生

• 網安專家養成記：勤動手，多交流，善思考: 做爲一名從事信息安全工做 10 年之久的沙場老將，谷野從傳統安全公司安全服務開始，歷經大型傳統企業、互聯網公司安全管理實踐。一路走來，谷野在安全方面的探索，對業界從業者可能都有更好的借鑑做用。做者在本文中依次討論了以管窺豹，互聯網行業的安全如何作、如何從專業的角度審視和規劃安全產品選型等內容。

前端之巔

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