前端每週清單第 45 期: Safari 支持 Service Worker, Parcel 完整教程, 2017 前端大事件

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

本期是 2017 年的最後一期，不知不覺陪伴你們已經一年了；很是感謝全部閱讀過清單的同窗的支持，山高水遠，來年再見~

新聞熱點

國內國外，前端最新動態

• Safari 支持 Service Worker 了！: 在昨天發佈的 Safari 46 技術預覽版裏，發佈了一個重大更新，在新的桌面版 Safari 裏將默認打開 Service Worker，這意味着蘋果正在逐步接受 PWA，咱們將進入 PWA 的時代。早在今年 7 月份，就有人問過 WebKit 團隊是否將支持 Service Worker，當時他們的回答是正在考慮，後來在 8 月份變成「In development」，如今終於正式發佈了。PWA 的另外一個核心特性 Web App Manifest，蘋果表示也正在開發中，按開發進度可能幾個月後就能與咱們見面。

• GraphQL.js 0.12.0 發佈: 該版本包含了不少的新特性與提高，將以前部分實驗特性進行了規範化適應，顯著地提高了 Flow 類型的質量。開發者在升級到該版本時須要仔細評估其對於現有系統的影響，特別是對於那些依賴 GraphQL.js 的構建工具等，更多詳細的版本特性介紹請查看原文。

• Webpack Cli 2.0.0 發佈: Webpack CLI 是 Webpack 輔助構建工具，可以將應用構建所須要的配置代碼交由命令行工具去建立，儘可能減小開發者所須要的操做。在 2.0 版本中 Webpack CLI 進一步優化了易用性，容許在配置中使用 ES6 等語法，添加了 v8 編譯緩存，同時容許開發者更方便地反饋問題與啓動本地服務器。

開發教程

步步爲營，掌握基礎技能

• 你須要瞭解的關於 Parcel 的一切: Parcel 是新近開源的零配置、高性能的 Web 構建工具，其相較於 Webpack 更爲簡單易用；Parcel 內置了開箱即用的開發服務器，其會自動分析依賴、監測文件變化，而且完成線上熱替換。本文便是對於 Parcel 用法的介紹，首先分析了 Parcel 的優點，而後具體討論了現代 Web 開發中常見的技術棧的集成方式，包括 React、Vue、TypeScript 等等；更多 Parcel 相關資料參考這裏。

• TypeScript 實戰教程: 本文經過實例來學習 TypeScript 的基礎特性，首先介紹瞭如何搭建配置 TypeScript 開發環境，以及主要的編譯選項的含義；而後依次討論了 TypeScript 的語言特性，包括變量、模塊、類與對象、接口、裝飾器、迭代器等等。更多 TypeScript 教程參考現代 JavaScript 開發：語法基礎與工程實踐。

• 基於 Mobx-state-tree 的應用狀態管理: 本課程是 Mobx 的做者 Michel Westrate 發佈在 egghead 上的，詳細介紹 Mobx-state-tree 基本使用的系列視頻課程。開發者可以在該課程中學習到如何聲明數據模型、如何管理數據模型的生命週期等等，並最終可以使用 MST 中開箱即用的異步 Action、Patch、Snapshot、Middleware 等特性來編寫健壯可擴展的現代應用。更多 MobX 相關教程參考現代 Web 應用架構與性能調優。

• 瀏覽器 user-agent 簡史: 不少人都知道瀏覽器的 user-agent 字符串，服務器端經過這個字符串進行客戶端的瀏覽器、操做系統、加密等級、瀏覽器語言、渲染引擎和版本信息的識別。從 1993 年 NCSA 發佈首款瀏覽器 Mosaic 以來，這個字符串經歷了紛繁複雜的變化，本文便是介紹 user-agent 字符串的演變簡史。更多 DOM 相關教程參考現代 Web 開發基礎。

工程實踐

立足實踐，提示實際水平

• NetSPI SQL 注入指南: 本 Wiki 致力於提供針對數據庫管理系統（DBMS）的， SQL 注入攻擊的識別、漏洞利用、提權等全流程的完整教程。本教程主要分爲五大步驟，依次介紹了注入點分析、DBMS 識別、注入類型、注入技巧、攻擊型查詢載荷等內容；更多 Web 安全相關資料參考這裏。

• Node.js 中的 CPU 密集操做: Node.js 是典型的基於事件循環的單線程架構，其在處理 CPU 密集型任務的時候不可避免地會碰到瓶頸；本系列文章便是探討如何在 Node.js 中處理 CPU 密集型代碼。首篇文章模擬了密集型處理環境，使用 fork 來建立子進程處理任務，不過這種方式效率較低，而且會帶來較大的資源佔用；第二篇文章則介紹了基於 Redis 的 Kue 消息隊列，如何利用 Kue 來異步多節點地處理任務等。更多 Node.js 教程參考深刻淺出 Node.js 全棧架構。

• React Native 事件機制探究: React Native 在某種程度上能夠簡單看作 Javascript-Java-Xcode 轉換器，所以 Raect 代碼與原生代碼之間的事件交互無疑是很是重要的部分；本文便是詳細分析了 React Native 中的事件機制。本文首先介紹了 Device Event Emitter 的設計與單例模式，而後討論了 RCTDeviceEventEmitter, RCTEventEmitter 等 JavaScript 與原生代碼之間的橋樑；接下來本文以簡單的原生組件爲例介紹瞭如何完成原生與 JavaScript 之間的事件傳遞，最後還分析了爲什麼 RN 中沒有冒泡機制。更多 React Native 相關資料參考這裏。

• 使用 Apollo Client 進行狀態管理的將來: 隨着應用體積的增長，其狀態管理的複雜性也會大幅度提高；而目前 Apollo Client 已經可以幫助開發者處理遠程數據交互，本地的狀態數據則依然由 Redux、MobX 這樣的狀態管理工具負責。本文則是介紹如何利用 Apollo Link 來實現一致性的本地狀態管理，統一了遠程數據查詢與本地狀態操做；更多 GraphQL 相關資料參考這裏。

深度閱讀

深度思考，昇華開發智慧

• React 與 Vue.js 的異同: 一年來 React 與 Vue.js 都發生了巨大的變化，取得了長足的發展；本文則是在年底的時候對兩者進行了一次深度盤點。本文依次從性能、模板與 JSX 的語法、CSS、生態系統、狀態管理等多個角度進行了分析；更多 React 相關資料參考這裏。

• 對於 REST is the new SOAP 的迴應: 上週的清單中，咱們推薦了 Rest is the new SOAP 這篇文章，其列舉了諸多 REST 的不足；而本文便是 Phil Sturgeon 的辯駁回應。本文對於 Rest is the new SOAP 幾乎是逐字逐句地進行了反駁，對比着看也是可以加深對於 REST 的理解；更多 REST 的討論參考這裏服務端應用程序開發基礎。

• 2017 前端領域發生的重大事件盤點: 年底多盤點，本文則是根據 Github, Google Trends, Stack Overflow, NPM 等站點的統計數據，對 2017 年前端領域發生的重大事件進行了盤點。包括了前端框架、ECMAScript、WebAssembly、包管理器、樣式、TypeScript、狀態管理、GraphQL、NapaJS 等方面；此外，在上週的清單中咱們推薦了 2017 JavaScript Survey，本週做者則從統計的數據中提取出了十條要點。

開源項目

樂於分享，共推前端發展

• Boardgame.io: Boardgame.io 是基於 React 的遊戲框架，該框架容許遊戲開發者將遊戲的規則轉化爲一系列的簡單函數，在用戶執行某個操做以後，可以經過這些函數的組合來改變遊戲的狀態。該框架使得開發者專一於設計遊戲邏輯自己，而不須要考慮或者編寫任何的網絡或者服務端代碼。

• lowdb: Lowdb 是基於 Lodash 的本地 JSON 化數據庫，支持 Node、Electron 以及瀏覽器環境。Lowdb 提供了與 Lodash 一致的接口，方便開發者快速上手使用；同時 Lowdb 編寫不一樣的 Adapters 來適應不一樣的存儲環境。

• react-content-loader: react-content-loader 容許開發者利用 SVG，來建立模擬即將加載的內容塊結構的提示條，其有點相似於 Facebook 的卡片加載樣式。

• stdweb: stdweb 致力於構建 Web APIs 與 Rust 之間的綁定，從而容許 Rust 與 JavaScript 之間的高可交互性。stdweb 容許在 Rust 中直接插入 JavaScript 代碼，其可被編譯爲 WebAssembly，而且提供了在 Rust 與 JavaScript 之間進行值傳遞的機制。

• 輕舟: 輕舟是手淘團隊提供的，基於雲端一體化體驗一站式開發和運維 APP 的產品。它在體驗方面實現了全流程支持、一站式開發環境，無縫整合端上能力與雲上服務；依託手機淘寶多年技術積累強力賦能，底層的 WEEX 架構讓混合式 APP 在擁有動態性的同時絕不丟失原生體驗。

巔峯人生

• 18 年互聯網老兵童劍：我與技術的愛情長跑: 童劍，白山聯合創始人兼首席技術官，EGO 北京分會會員。前新浪研發中心總經理，2016 年 5 月加盟白山，迅速搭建和完善各產品線技術梯隊，構築雲鏈產品技術體系，帶領團隊推出雲存儲、雲聚合產品，助力白山搶先佈局雲後市場。本文便是童劍對於本身十八年技術之路的心得分享，包括了本身從出入職場、轉型管理到創業新徵程中的經驗與感悟等。

前端之巔

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