摘要：的另一個核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進度可能幾個月后就能與我們見面。是基于的本地化數(shù)據(jù)庫，支持以及瀏覽器環(huán)境。

前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。

本期是 2017 年的最后一期，不知不覺陪伴大家已經(jīng)一年了；非常感謝所有閱讀過清單的同學的支持，山高水遠，來年再見~

國內(nèi)國外，前端最新動態(tài)

Safari 支持 Service Worker 了！: 在昨天發(fā)布的 Safari 46 技術預覽版里，發(fā)布了一個重大更新，在新的桌面版 Safari 里將默認打開 Service Worker，這意味著蘋果正在逐步接受 PWA，我們將進入 PWA 的時代。早在今年 7 月份，就有人問過 WebKit 團隊是否將支持 Service Worker，當時他們的回答是正在考慮，后來在 8 月份變成“In development”，現(xiàn)在終于正式發(fā)布了。PWA 的另一個核心特性 Web App Manifest，蘋果表示也正在開發(fā)中，按開發(fā)進度可能幾個月后就能與我們見面。

GraphQL.js 0.12.0 發(fā)布: 該版本包含了很多的新特性與提升，將之前部分實驗特性進行了規(guī)范化適應，顯著地提升了 Flow 類型的質(zhì)量。開發(fā)者在升級到該版本時需要仔細評估其對于現(xiàn)有系統(tǒng)的影響，特別是對于那些依賴 GraphQL.js 的構(gòu)建工具等，更多詳細的版本特性介紹請查看原文。

Webpack Cli 2.0.0 發(fā)布: Webpack CLI 是 Webpack 輔助構(gòu)建工具，能夠?qū)脴?gòu)建所需要的配置代碼交由命令行工具去創(chuàng)建，盡量減少開發(fā)者所需要的操作。在 2.0 版本中 Webpack CLI 進一步優(yōu)化了易用性，允許在配置中使用 ES6 等語法，添加了 v8 編譯緩存，同時允許開發(fā)者更方便地反饋問題與啟動本地服務器。

步步為營，掌握基礎技能

你需要了解的關于 Parcel 的一切: Parcel 是新近開源的零配置、高性能的 Web 構(gòu)建工具，其相較于 Webpack 更為簡單易用；Parcel 內(nèi)置了開箱即用的開發(fā)服務器，其會自動分析依賴、監(jiān)測文件變化，并且完成線上熱替換。本文即是對于 Parcel 用法的介紹，首先分析了 Parcel 的優(yōu)勢，然后具體討論了現(xiàn)代 Web 開發(fā)中常見的技術棧的集成方式，包括 React、Vue、TypeScript 等等；更多 Parcel 相關資料參考這里。

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

基于 Mobx-state-tree 的應用狀態(tài)管理: 本課程是 Mobx 的作者 Michel Westrate 發(fā)布在 egghead 上的，詳細介紹 Mobx-state-tree 基本使用的系列視頻課程。開發(fā)者能夠在該課程中學習到如何聲明數(shù)據(jù)模型、如何管理數(shù)據(jù)模型的生命周期等等，并最終能夠使用 MST 中開箱即用的異步 Action、Patch、Snapshot、Middleware 等特性來編寫健壯可擴展的現(xiàn)代應用。更多 MobX 相關教程參考現(xiàn)代 Web 應用架構(gòu)與性能調(diào)優(yōu)。

瀏覽器 user-agent 簡史: 很多人都知道瀏覽器的 user-agent 字符串，服務器端通過這個字符串進行客戶端的瀏覽器、操作系統(tǒng)、加密等級、瀏覽器語言、渲染引擎和版本信息的識別。從 1993 年 NCSA 發(fā)布首款瀏覽器 Mosaic 以來，這個字符串經(jīng)歷了紛繁復雜的變化，本文即是介紹 user-agent 字符串的演變簡史。更多 DOM 相關教程參考現(xiàn)代 Web 開發(fā)基礎。

立足實踐，提示實際水平

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

Node.js 中的 CPU 密集操作: Node.js 是典型的基于事件循環(huán)的單線程架構(gòu)，其在處理 CPU 密集型任務的時候不可避免地會碰到瓶頸；本系列文章即是探討如何在 Node.js 中處理 CPU 密集型代碼。首篇文章模擬了密集型處理環(huán)境，使用 fork 來創(chuàng)建子進程處理任務，不過這種方式效率較低，并且會帶來較大的資源占用；第二篇文章則介紹了基于 Redis 的 Kue 消息隊列，如何利用 Kue 來異步多節(jié)點地處理任務等。更多 Node.js 教程參考深入淺出 Node.js 全棧架構(gòu)。

React Native 事件機制探究: React Native 在某種程度上可以簡單看做 Javascript-Java-Xcode 轉(zhuǎn)換器，因此 Raect 代碼與原生代碼之間的事件交互無疑是非常重要的部分；本文即是詳細分析了 React Native 中的事件機制。本文首先介紹了 Device Event Emitter 的設計與單例模式，然后討論了 RCTDeviceEventEmitter, RCTEventEmitter 等 JavaScript 與原生代碼之間的橋梁；接下來本文以簡單的原生組件為例介紹了如何完成原生與 JavaScript 之間的事件傳遞，最后還分析了為何 RN 中沒有冒泡機制。更多 React Native 相關資料參考這里。

使用 Apollo Client 進行狀態(tài)管理的未來: 隨著應用體積的增加，其狀態(tài)管理的復雜性也會大幅度提升；而目前 Apollo Client 已經(jīng)能夠幫助開發(fā)者處理遠程數(shù)據(jù)交互，本地的狀態(tài)數(shù)據(jù)則依然由 Redux、MobX 這樣的狀態(tài)管理工具負責。本文則是介紹如何利用 Apollo Link 來實現(xiàn)一致性的本地狀態(tài)管理，統(tǒng)一了遠程數(shù)據(jù)查詢與本地狀態(tài)操作；更多 GraphQL 相關資料參考這里。

深度思考，升華開發(fā)智慧

React 與 Vue.js 的異同: 一年來 React 與 Vue.js 都發(fā)生了巨大的變化，取得了長足的發(fā)展；本文則是在年末的時候?qū)Χ哌M行了一次深度盤點。本文依次從性能、模板與 JSX 的語法、CSS、生態(tài)系統(tǒng)、狀態(tài)管理等多個角度進行了分析；更多 React 相關資料參考這里。

對于 REST is the new SOAP 的回應: 上周的清單中，我們推薦了 Rest is the new SOAP 這篇文章，其列舉了諸多 REST 的不足；而本文即是 Phil Sturgeon 的辯駁回應。本文對于 Rest is the new SOAP 幾乎是逐字逐句地進行了反駁，對比著看也是能夠加深對于 REST 的理解；更多 REST 的討論參考這里服務端應用程序開發(fā)基礎。

2017 前端領域發(fā)生的重大事件盤點: 年末多盤點，本文則是根據(jù) Github, Google Trends, Stack Overflow, NPM 等站點的統(tǒng)計數(shù)據(jù)，對 2017 年前端領域發(fā)生的重大事件進行了盤點。包括了前端框架、ECMAScript、WebAssembly、包管理器、樣式、TypeScript、狀態(tài)管理、GraphQL、NapaJS 等方面；此外，在上周的清單中我們推薦了 2017 JavaScript Survey，本周作者則從統(tǒng)計的數(shù)據(jù)中提取出了十條要點。

樂于分享，共推前端發(fā)展

Boardgame.io: Boardgame.io 是基于 React 的游戲框架，該框架允許游戲開發(fā)者將游戲的規(guī)則轉(zhuǎn)化為一系列的簡單函數(shù)，在用戶執(zhí)行某個操作之后，能夠通過這些函數(shù)的組合來改變游戲的狀態(tài)。該框架使得開發(fā)者專注于設計游戲邏輯本身，而不需要考慮或者編寫任何的網(wǎng)絡或者服務端代碼。

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

react-content-loader: react-content-loader 允許開發(fā)者利用 SVG，來創(chuàng)建模擬即將加載的內(nèi)容塊結(jié)構(gòu)的提示條，其有點類似于 Facebook 的卡片加載樣式。

stdweb: stdweb 致力于構(gòu)建 Web APIs 與 Rust 之間的綁定，從而允許 Rust 與 JavaScript 之間的高可交互性。stdweb 允許在 Rust 中直接插入 JavaScript 代碼，其可被編譯為 WebAssembly，并且提供了在 Rust 與 JavaScript 之間進行值傳遞的機制。

輕舟: 輕舟是手淘團隊提供的，基于云端一體化體驗一站式開發(fā)和運維 APP 的產(chǎn)品。它在體驗方面實現(xiàn)了全流程支持、一站式開發(fā)環(huán)境，無縫整合端上能力與云上服務；依托手機淘寶多年技術積累強力賦能，底層的 WEEX 架構(gòu)讓混合式 APP 在擁有動態(tài)性的同時毫不丟失原生體驗。

18 年互聯(lián)網(wǎng)老兵童劍：我與技術的愛情長跑: 童劍，白山聯(lián)合創(chuàng)始人兼首席技術官，EGO 北京分會會員。前新浪研發(fā)中心總經(jīng)理，2016 年 5 月加盟白山，迅速搭建和完善各產(chǎn)品線技術梯隊，構(gòu)筑云鏈產(chǎn)品技術體系，帶領團隊推出云存儲、云聚合產(chǎn)品，助力白山搶先布局云后市場。本文即是童劍對于自己十八年技術之路的心得分享，包括了自己從出入職場、轉(zhuǎn)型管理到創(chuàng)業(yè)新征程中的經(jīng)驗與感悟等。

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