前端每周清單第9期：向重度jQuery介紹Vue；React Studio 1.0.2、ECharts GL 1.0 alpha、Prettier 1.0發布

作者：王下邀月熊

編輯：尾尾

前端每周清單專註前端領域內容，分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

新聞熱點

國內國外，前端最新動態

• 《Prettier 1.0 發布》：Prettier 是目前最為流行的 JavaScript 格式化工具之一，其能夠將代碼編譯為 AST 然後將格式化之後的代碼寫回到文件中。在 1.0 正式版中，Prettier 對於 JSX、CSS-in-JS、裝飾器、Flow 等語法添加了支持或者優化了格式結果，並且修復了一系列的錯誤。Prettier 可以同時在命令行、WebStorm、VSCode 等常見的編輯器中使用，筆者建議開發團隊應該統一格式化工具以避免無謂的提交。

• 《ECharts GL 1.0 alpha 發布》：ECharts GL 是 ECharts 的 WebGL 擴展，其中提供了三維散點圖，飛線圖，柱狀圖，曲面圖，地球等多種三維可視化方式。並且增加 scatterGL，graphGL 系列類型用於二維的散點圖，關係圖的加速繪製和布局。

• 《Chrome 59 即將支持 Headless 模式》：近日，Chrome 宣布在 59 版本中開始支持 Headless/Server 模式，允許用戶載入網頁、提取出 DOM 這樣的元數據、生成網頁內容的點陣圖等等 Chromium 與 Blink 所支持的功能。同時，著名 Headless 瀏覽器 PhantomJS 的某位核心開發者宣布退出 PhantomJS，噫吁唏。

• 《Meteor 1.4.4 發布》：近日 Meteor 宣布發布其 1.4.4 版本，包括了對於部分核心依賴的更新與錯誤的修復，並且提升了整體的穩定性，同時為 Cordova 應用添加了基於 Google 許可權認證的功能。

• 《React Studio 1.0.2 發布》：React Studio 是基於 React 的互動式開發工具，在其新版本中優化了界面布局，使得開發者更方便地添加組件到項目中；提供了回撤、隱藏等功能，並且加入了許多新的模板項目，允許自定義 CSS 動畫類型等功能。

開發教程

步步為營，掌握基礎技能

• 《完整的 HTTP/2 服務端推送指南》：HTTP/2 相較於 HTTP/1 帶來了極大的性能提升，而其中的服務端推送允許服務端在客戶端請求之前主動地推送未來可能需要的靜態資源；這種方式能夠較好地在實現 HTTP/1 優化中常用的內聯方式的同時避免其帶來的實踐中的缺陷。而本文則是詳細地介紹服務端推送的原理、其解決的問題以及在常見伺服器中的配置方式。

• 《利用 React 打造特斯拉電池儀錶盤》：本系列文章介紹了如何用 React、Redux 等相關前端技術來打造簡單的特斯拉電池儀錶盤界面。其第一篇博客著眼於如何使用 create-react-app 創建基本項目並且使用組件內狀態來存儲數據；而第二篇博客則介紹了如何使用 Redux 來管理外部狀態。

• 《基於 JavaScript 構建數據表達式分詞器》：本文是一篇挺有意思的文章，介紹如何利用 JavaScript 解構常見數學表達式並且從中提取出相關實體。本文涉及到的內容包括對於分詞器的簡單介紹、對於抽象語法樹 AST 的介紹以及最終如何使用代碼來實現分詞演算法。

• 《面向重度 jQuery 開發者的 Vue.js 介紹》：本文是一位經驗豐富的開發者，在將原有的基於 jQuery 工程重構為基於 Vue.js 工程的過程中總結出的經驗與認識介紹。本文首先從零開始介紹如何搭建 Vue.js 基礎項目並且一步一步地實現應用的各種特徵，同時還對比了利用 Vue.js 與 利用 jQuery 實現的差異性以及二者在設計思想上的區別。

工程實踐

立足實踐，提示實際水平

• 《Sketch 43 會改變你的工作流》：在近日的 Sketch Meetup 中 Andree 再次確認下個版本的 Sketch 會提供新的開放式文件格式，允許開發者自定義程序來讀取或者修改文件。Andree 還提到了所謂設計即代碼、代碼即設計的理念，本文作者認為即使這種方式還是存在一定的缺陷，但是這種新的開源格式仍然會為開發者與設計者的日常工作流帶來極大的改變。

• 《TypeScript 在 Slack 的實踐分享》：維護大型的跨平台的 JavaScript 代碼庫是一件非常具有挑戰性的工作，無論是從 Chrome 的 JavaScript 中傳遞對象給 Objective-C 或者單純的接受來自 Node.js 中的回調結果，你都需要保證不同的代碼對於通訊對象的期望之間的一致性。而本文即是在開發跨平台多終端的應用中，Slack 使用 TypeScript 來約束類型，從而避免意外的類型不一致導致的崩潰的實踐經驗分享。

• 《Twitter Lite 與高性能可擴展 React PWA 實踐》：本文是 Twitter 工程師團隊介紹其在開發世界上最大的 PWA 應用之一， Twitter Lite 過程中克服各種各樣的性能瓶頸的實踐經驗。其核心思想包括基於路由的代碼切分、避免可能導致掉幀的函數、使用壓縮比更好的圖片資源、以及優化 React 更新過程、避免頻繁修正 Redux Store、延遲註冊 ServiceWorker 等部分。

• 《React Native 性能優化》：本文作者承接 React Native 性能瓶頸與解決方案，以新的實際開發中的例子討論如何優化 React Native 應用性能。作者以類似於 Android 中 Toolbar 的列表為例，介紹了如何對性能進行測試、使用原生的滾動監聽、使用聲明式介面等多個方面的內容。

深度閱讀

深度思考，升華開發智慧

• 《2017 里 JavaScript 帶給我的感動》：本文作者縱覽了在 2017 年中 JavaScript 生態圈可能迎來的一系列巨大變革。他首先對比了 JavaScript 與 Reason，淺述了二者的優劣對比。然後介紹了 WebAssembly 以及另一個新興語言 Rust 未來可能在 JavaScript 生態圈中佔據的一席之地。最後，作者還介紹了 Docker、Now.sh 以及 Github Pages 等一系列優秀的輔助開發工具，並且暢想了去中心化浪潮下 Web 的未來發展。

• 《演算法驅動設計：人工智慧是如何改變設計流程的》：大數據時代人工智慧不斷滲透工作生活的方方面面，而本文作者則是從設計的角度出發，介紹了如何在實際工作中貫徹演算法驅動設計的理念，利用演算法模型與歷史數據來判斷什麼樣的設計可能更會受到用戶的青睞；作者還以完整的設計實例介紹了從構建到素材準備的流程。

• 《後 MVC 時代》：在很長一段時間裡，MVC（Model-View-Controller）架構是構建應用的黃金法則，而近幾年隨著 React，Vue.js，Angular 等以組件為中心的庫的流行，MVC 架構在前端卻趨於平寂。開發者往往將模型、視圖與控制器耦合在單個實體內，而打破了傳統的 MVC 架構中的約束。類似於 Flux 或者響應式編程的設計思想也改變了應用狀態的處理方式，不同於 MVC 中的雙向綁定，而是數據在實體之間單向流動。本文即是討論在所謂後 MVC 時代的 GUI 應用架構的思考。

• 《瀏覽器中的原生 ES6 模塊：是時候重新考慮打包發布流程？》：ES6 模塊標準出台已有數年，而目前最流行的方式就是使用 Babel 等轉譯工具將 ES6 模塊轉譯為 CommonJS 等模塊語法以發布到瀏覽器中運行。而隨著 Safari、Firefox、Edge 都紛紛支持原生 ES6 模塊，本文作者也重新思考是否需要改變現有的應用打包與發布流程。本文首先對比介紹了基於 Babel/Webpack 的打包與使用原生的 ES6 模塊之間的異同，討論了真實環境下直接使用原生模塊的可行性等內容。

開源項目

樂於分享，共推前端發展

• 《Electron Forge》：Electron Forge 是構建現代 Electron 應用的完整工具集，其整合了很多現存的用於 Electron 的開發工具，去蕪存菁，將它們整合為簡單易用的能夠直接上手的輔助開發工具。( https://parg.co/bRf )

• 《Elasticlunr.js》：Elasticlunr.js 是輕量級的提供了瀏覽器端搜索與離線搜索的全文搜索引擎，其基於 Lunr.js 開發不過提供了更加靈活的功能。Elasticlunr.js 支持基於時間與指定域的查詢，它有點類似於 Solr 不過更為靈活並且對於開發者更為友好。

• 《CodeSandbox》：CodeSandbox 是一個在線的 React 編輯器，其能夠幫助開發者更快更方便地展示與分享基於 React 的項目。CodeSandbox 會自動化執行類似於編譯、打包、依賴管理等多種項目構建中的常見任務，同時 CodeSandbox 還允許開發者添加自定義的 node_modules 中的依賴。

• 《Slate》：Slate 是類似於 Draft.js 的靈活可自定義的富文本編輯器構建框架，Slate 允許你構建功能豐富的類似於 Medium、Dropbox Paper、Canvas 這樣的編輯器。Slate 提供了各式各樣的插件，你可以基於 React 與 Immutable 來構建自定義的插件，並且指定哪些插件屬於核心插件。

巔峰人生

《鏈家鳥哥：從留級打架問題學生到PHP大神，他的人生驅動力竟然是》：從問題勸退學生到高考725分學霸，陰差陽錯選擇計算機；也曾北漂住過地下室，也曾面試被拒；不斷走出舒適區，快速成長……一個小視屏，帶你走進鳥哥的攀登巔峰之路。

前端之巔

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