前端周刊第48期：Vue Conf 2017 + Progressive WEB APP

01-26

共 2615 字，讀完需 5 分鐘，速讀需 2 分鐘，首發知乎專欄前端周刊。根據前端趨勢觀察，本期收錄的內容有兩個重點：Vue.js 周邊，包括各種腳手架、工具庫、技術交流大會；PWA（Progressive Web App）周邊，包括視頻、開發工具、應用示例。以下是具體內容內容，請享用！

技術動態

VueConf 全球技術大會將於 5 月 20 在北京舉辦

全球首屆 VueConf 將於 5 月 20 日在北京舉辦，目前正在籌備過程中，近期會發布更多購票相關細節，感興趣的小夥伴請保持關注了。同時，他們也在尋找講師和贊助商。有興趣有實力的公司或者朋友可以開始去原文聯繫舉辦方了。

nginScript：在 Nginx 中使用 Javascript

Javascript 的使用範圍真是越來越廣，我們都知道 Nginx 腳本語言中 Lua 始終是不二之選，本周 Nginx 官方推出了 Javascript 支持，雖然和 Node.js 有區別，但是可以用 Javascript 在 Nginx 中干很多事情，比如請求處理、日誌處理。

npm 新功能：支持免費的機構賬號

npm 本周宣布支持免費的機構賬號，能省去不少自己造輪子搭建私有 npm registry

的麻煩，免費機構賬號的限制就是所有的倉庫必須是開源的，免費版機構賬號支持部分收費版的功能，比如組員管理。需要提醒的是這個就像是域名。

Chrome 58 Beta 版發布：支持 PWA 全屏

Google 本周發布了 Chrome 58 Beta 版，其中包含了多個更新，如 IndexedDB 2.0、Iframe 導航的改進，亮點是支持 PWA 應用全屏。在我看來，PWA 跟微信的小程序是有異曲同工之妙，大的互聯網公司都在布局，聰明的開發者該怎麼做呢？

文章教程

PWA 在餓了么的實踐經驗

本篇旨在和大家分享「餓了么 M 站」在 PWA 改造中的實踐經驗。涉及到的方面有：PWA 線上部署的準備工作、多頁應用的 prerender 優化、實踐過程中踩到的（和推進解決的）坑。而關於 PWA 的一些基礎資料，可以看本周刊收錄的其他資料。

淺談前端狀態管理

近兩年前端技術的發展如火如荼，大量的前端項目都在使用或轉向 Vue 和 React 的陣營，由前端渲染頁面的單頁應用佔比也越來越高，這就代表前端工作的複雜度也在直線上升，前端頁面上展示的信息越來越多也越來越複雜，任何狀態都需要進行管理，這篇文章聊的就是前端狀態管理，分上下兩篇，下篇自己找。

開發工具

TestCafe：現代 WEB 應用自動化測試利器

TestCafe 是純 Node.js 編寫的現代 Web 應用自動化測試工具，專用來進行 E2E 測試，不需要安裝任何依賴就能自己啟動瀏覽器、運行測試、收集測試結果，不需要任何插件就能支持各種現代瀏覽器，有人專門寫了文章用它來測試 Vue.js 應用。

pm86：生產環境的 Node.js 服務管理工具

pm86 基於 pm2，類似於美團的 pm2.5，都是用來管理 Node.js 服務的工具，在命令行工具的基礎上，提供了監控儀錶盤，可以私有化部署，並且儀錶盤使用 Vue.js 開發，如果你想定製也很容易。

Eagle.js：基於 Vue.js 的 PPT 編寫演示工具

Eagle.js 是一款基於 Vue.js 的 PPT 編寫和演示工具，支持動畫、自定義主題、可交互組件（非常適合在技術交流會上做 Demo 演示），並且能非常容易的實現組件、Slide、樣式的重用。是個新輪子，並且還不是前端做的。

代碼框架

unvue：簡單好用的 Vue.js 同構應用腳手架

支持服務端渲染的 Vue.js 同構應用腳手架，架構在具有強大的 SSR 能力的 Vue Router 之上。同時支持代碼分割、Webpack 配置自定義、以及類似於 Next.js 的插件機制。

Vue.js 2 + Webpack 2 + TypeScript 2 應用腳手架

如果你想用非常前沿的前端技術來開發 WEB 應用，這會是非常值得考慮的種子項目，內含 Vue.js 2.2、Webpack 2、TypeScript 2，支持熱更新，工程化方面支持單元測試、覆蓋率報告、靜態資源編譯和打包優化。

PWA 版本的 CNode 社區

CNode PWA 是使用 React、React Router 和 Redux 構建的 Progressive Web App，基於 CNode 社區提供的 API 開發，對於在學習 PWA 的同學是個非常不錯的學習材料。GitHub 首頁支持掃碼直接預覽，可以直接安裝到桌面，體驗流暢。

視頻演講

學習 PWA 的 10 段最佳視頻

漸進式 WEB 應用，或者 Progressive Web App，亦被簡稱為 PWA，正被越來越多的開發者和互聯網公司關注和討論，因其基於現代的 WEB 技術，能夠提供離線優先的、可以媲美原生的、輕量級 APP 體驗。諸如 Google、Microsoft、Twitter 等大的互聯網公司都在跟進。那麼究竟什麼是 PWA？開發 PWA 使用了哪些技術？需要藉助什麼工具？如果你想學，這 10 段視頻就是為你準備的。

像擎天柱變身那樣轉換代碼：AST 入門指南

有沒有好奇 babel、less、sass、postcss 這些代碼轉換工具是怎麼工作的？他們都有的一個機理就是 AST（Abstract Syntax Tree，抽象語法樹），AST 是啥？有什麼用？看看這段 48 分鐘的視頻，你就能理解清楚。需翻牆。

One More Thing

本文作者王仕軍，商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱知乎專欄：《前端周刊：讓你在前端領域跟上時代的腳步》。

Happy Hacking