前端每週清單：jQuery 3.2發佈，滴滴採用Vue 2.0重構Web App、餓了麼 PWA 實踐經驗分享

前端每週清單：jQuery 3.2發佈，滴滴採用Vue 2.0重構Web App、餓了麼 PWA 實踐經驗分享 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐。更多閱讀清單請轉向往期索引。

前端每週清單：前端每週清單：jQuery 3.2發佈，滴滴採用Vue 2.0重構Web App、餓了麼 PWA 實踐經驗分享

新聞熱點

前端領域最新動態

• 《Facebook 發佈 Create React Native App》：相似於 Create-React-App，Create React Native App 可以爲開發者快速建立零配置的 React Native 項目，而且與基於 Expo 構建了完整的能夠屏蔽底層原生代碼細節的 React Native 項目，使得開發者能夠快速嘗試上手 React Native 項目 。同時，開發者也能夠使用 npm run eject命令將項目切換到全配置狀態，以方便自行添加原生組件。 ( http://6me.us/29r )

• 《2017 React 大會成功舉辦》：2017 年 React Conf 於 3 月 13 日、14 日成功舉辦，會上來自世界各地的開發者就 React Fiber、Flow、Performance、React Native 等多個主題發表了演說與討論，推薦選擇本身喜歡的演講視頻觀看。( http://conf.reactjs.org/lives... )

• 《jQuery 3.2.0 發佈》：jQuery 3.2.0 中包含了一系列的錯誤修復、性能提高以及部分棄用 API 的完全移除 。重大的更新包括添加了對於自定義 CSS 屬性操做的支持，完全移除了 isArray、nodeName 等方法以及修復了.width()等部分方法中的問題。( http://6me.us/BN8 )

• 《Sketch 宣佈開源其文件格式》：隨着近日發佈的 Sketch 43 版本，Sketch 宣佈開源其文件格式，這也意味着將來可能會有人基於該格式開發 Windows 版本應用或者簡單的 Sketch 文件瀏覽器。鑑於其文件格式爲 JSON，咱們也能夠暢想將來會出現自動構建的 Web Service。( http://6me.us/DyAYEC )

• 《Chromium 即將支持 APNG》：該 Commit 會爲 Chromium 添加 APNG 格式的支持，該格式能夠逐步替換現存的 Gif 格式 。( https://parg.co/bO9 )

• 《Kotlin 1.1新增協程、類型別名特性，提高了對JavaScript的支持》：Kotlin的新版本引入了多項新的語言特性（其中最值得注意的就是協程），同時還提高了對其JavaScript目標環境的支持。( http://www.infoq.com/cn/news/... )

開發教程

步步爲營，掌握基礎技能

• 《Flexbox 語法清單》：該網頁提供了交互式的 CSS Flexbox 教程，詳細介紹了 Flexbox 的使用語法與經典案例。( http://yoksel.github.io/flex-... )

• 《Sketch：React Native 的 Playground 》：隨着 Create React Native App 的發佈，Expo 發佈了可以在線編輯 React Native 應用的工具 Sketch。開發者能夠在 Web 上直接編輯 React Native 應用代碼，或者拖拽方式加入組件，而後經過 Expo 客戶端完成本地預覽。( http://6me.us/aGFX )

• 《編寫 JavaScript 框架：客戶端路由》：本文是編寫 JavaScript 框架系列的最後一篇，主要着眼於討論如何實現 JavaScript 客戶端路由及其與服務端路由的區別。( https://parg.co/bOL )

• 《30 天學習 30 個 VR 項目》：本系列做者介紹了從 0 到 1 如何開發 30 個常見的 VR 項目，從最基礎的圖片瀏覽、視頻播放，到交互性動畫等等 。( https://risonsimon.com/days-i... )

• 《CORS 詳細指南》：本文是對於瀏覽器中跨域訪問協議 CORS 進行詳細介紹，而且以完整的代碼交互示例演示 CORS 協議的效果與使用方法。( https://parg.co/bOF )

• 《Angular的模塊間通訊》：模塊是Angular的構建單元，Angular應用程序的全部可視化元素也是由模塊構建的。當咱們把模塊拆散成更小的模塊時，咱們就要確保它們能夠把數據傳來傳去。到那時候，恰當地模塊間通訊機制就成了咱們應用程序的基礎，可讓全部的數據都保持同步狀態。( https://parg.co/bOD )

工程實踐

立足實踐，提示實際水平

• 《前端代碼測試概述》：做者在本系列文章中介紹了前端代碼測試的相關概念與實踐技巧，包括了單元測試、集成測試、端到端測試等多個方面。( http://6me.us/posk )

• 《以組件爲中心的 React 懶加載》：React Loadable 是以組件爲中心的懶加載框架，其基於 Webpack 2 提供的 import 提供的異步代碼分割與加載功能進行了一系列的封裝。( http://6me.us/mNHi )

• 《另外一種 CSS 壓縮思路》：本文做者提出了一種新的 CSS 壓縮思路，有可能會損壞原有的 CSS 文件，不過其壓縮比率相較於現有的通用 CSS 壓縮策略會更爲優秀。( https://luisant.ca/remynifier )

• 《來自 Vixlet 的 React 優化策略》：在過去的數年中，來自 Vixlet 的前端開發團隊一直使用 React 與 Redux 的開發架構，本文便是該團隊分享其在開發過程當中發現的 React 優化策略的介紹。( http://6me.us/dx5 )

• 《PWA 在餓了麼的實踐經驗》：本篇旨在和你們分享「餓了麼 M 站」（https://h5.ele.me/msite/）在 PWA 改造中的實踐經驗。涉及到的方面有：PWA 線上部署的準備工做、多頁應用的 prerender 優化、實踐過程當中踩到的（和推動解決的）坑。( https://parg.co/bO7 )

• 《滴滴 webapp 5.0 Vue 2.0 重構經驗分享》：滴滴的 webapp 是運行在微信、支付寶、手 Q 以及其它第三方渠道的打車軟件。藉着產品層面的功能和視覺升級，咱們用 Vue 2.0 對它進行了一次技術重構；本文便是本次重構中的經驗分享。( https://github.com/DDFE/DDFE-... )

深度閱讀

深度思考，昇華開發智慧

• 《2017 成爲專業 Web 開發者的學習路線圖》：做者在此文中以圖表的方式展示了 2017 年中若是想成爲專業的 Web 開發者，應該在 Web 前端、服務端以及 DevOps 領域所須要學習到的技術棧以及進階路線圖。( http://6me.us/W0k )

• 《關於 JWE 安全漏洞的討論》：JSON Web Token 是基於 JSON 的訪問令牌建立標準（RFC 7519），本文則是介紹了 JWE 面對的 Invalid Curve Attack 原理以及受影響的開源庫等內容。( http://6me.us/D0iKp )

• 《wasm_lua》：wasm_lua 提供了可以運行於 WASM 環境下的 Lua 虛擬機，將來基於 Lua 構建前端框架也是個可行的選擇 。( https://github.com/vvanders/w... )

• 《U.S. Web 設計標準》：近日 U.S. 官方網站的樣式與視覺設計指南 1.0.0 版本發佈，包含了大量的 Bug 修復與反饋修正。( https://parg.co/bO1 )

• 《Preact 內部原理探祕》：Preact 是提供了相似於 React API 不過速度更快、包體更小的 React 替代包，本系列文章是 Preact 的開發者介紹其內部工做原理 。( https://parg.co/bOj )

• 《擴展JS應用在架構性取捨上應關注八點要素》：若是想要構建可擴展的軟件，能夠從不少角度來思考軟件架構。可是若是每一個角度都去考慮，根本不可能作出想要的軟件。這就是爲何須要從架構的角度對設計進行取捨：取咱們最須要的，舍次要的。。( https://parg.co/bOn )

開源項目

樂於分享，共推前端發展

• 《手淘發佈 Atlas》：手機淘寶安卓客戶端容器化框架 Atlas 正式宣佈開源。Atlas由阿里巴巴移動團隊自研，以容器化思路解決大規模團隊協做問題，實現並行開發、快速迭代和動態部署，適用於Android 4.x以上系統版本的大小型App開發。 (https://github.com/alibaba/at...

• 《Animista》：Animista 是開箱即用的 CSS 動畫庫，其做者還發布了很是易用的在線預覽與選擇站點，適合於設計人員選擇合適的動畫效果。( http://animista.net/ )

• 《Quokka.js》：Quokka 可以幫助咱們在經常使用的編輯器（譬如 VSCode）中快速創建原型試驗場，包括了行內錯誤提示、代碼測試與覆蓋率提示、富文本輸出格式化等等。( https://quokkajs.com/ )

• 《Guetzli》：Google 宣佈開源新的 JPEG 編碼器 Guetzli，與現有的壓縮編碼工具相比，其可以減小近 35% 的文件尺寸而依然保持圖片質量。( http://6me.us/AM7a )

• 《wasm-loader》：wasm-loader 是可以用於 Webpack 的 WASM 二進制模塊導入工具，其可以容許你在 JavaScript 代碼中導入 wasm 格式文件而且將二進制文件打包成爲 JS Bundle 的一部分 。( https://github.com/ballercat/... )

巔峯人生

一覽衆山，聆聽巔峯故事