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

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

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

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

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

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

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

步步為營(yíng)，掌握基礎(chǔ)技能

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

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

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

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

立足實(shí)踐，提示實(shí)際水平

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù) “ 加群 ”。投稿請(qǐng)發(fā)郵件到 [email protected]，注明 “ 前端之巔投稿 ”。