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

王下邀月熊發表於2017-12-25
前端事件

前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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，註明 “ 前端之巔投稿 ”。

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

相關文章