前端每週清單第 47 期：NPM 年度報告與 2018 展望，Airbnb React Router 實踐

王下邀月熊發表於2018-01-15
前端NPMAIReact

前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

  • NPM 釋出 2017 JavaScript 框架增長度報告: 作者使用某個包的下載佔全部下載量的百分比，作為衡量某個框架是否持續性增長的指標，並以此釋出了 2017 JavaScript 框架使用報告；該報告主要著眼於前端框架，React 生態圈以及後端框架這三個部分。根據該報告，前端框架中的 Preact 與 Vue 都是增長迅速，不過 React 在總體量與增長速度上還是佔據優勢；而在 React 生態圈內，Apollo 則是飛速崛起，MobX 也是增長迅速但還難以匹敵 Redux。

  • Nuxt.js 1.0 釋出: Nuxt.js 是基於 Vue.js, vue-router, vuex 以及 vue-meta 的，快速建立 Web 應用的零配置工具。本週釋出的 Nuxt 1.0.0 版本，將各項依賴更新到了最新版本，同時提升了整體的穩定性與效能表現，也意味著其能夠用於生產環境；更多特性變化描述請檢視原文。

  • Node v9.4.0 釋出: 該版本中的重要變化包括了廢棄 AsyncHooks Sensitive API 與 runInAsyncIdScope，從 _events 內部實現中移除 reaches，在 clientError 中新增 rawPacket 屬性等等；可以檢視原文了解更多變化。

  • NPM 確定新的包命名規則: 為了儘可能避免包的誤植域名現象，NPM Registry 將不會再允許使用相似的包命名；不過會進一步鼓勵開發者使用自己的名稱空間來發布包。譬如，因為 react-native 已經存在，將不會再允許類似於 reactnative 這樣的包釋出，不過推薦使用 @ceejbot/reactnative 這樣的方式。

開發教程

步步為營，掌握基礎技能

  • HTML 5.2 新特性與實踐盤點: 不到一個月之前，HTML 5.2 成為了 W3C 的官方推薦版本，這也就意味著 W3C 官方建議開發者應該遵循與實現該版本。本文則是對於 HTML 5.2 中提出的影響較大的，新特性與實踐模式進行了概述，譬如原生彈窗元件、iFrames 中的 Payment Request API 以及部分元素實踐的變化等；更多 HTML 學習參考現代 Web 開發基礎。
  • 基於 TypeScript 的實時聊天應用: 作者在本文中介紹瞭如何僅使用 TypeScript，來整合 Web Sockets，Node 與 Angular 去實現某個實時聊天應用。本文首先介紹了 WebSocket 的定義與規範，然後使用 Express，Socket.io 去實現服務端應用，最後使用 Angular 來構建客戶端應用；更多 TypeScript 學習資料參閱現代 JavaScript 開發基礎。

工程實踐

立足實踐，提示實際水平

  • 基於 React Router v4 的服務端渲染，程式碼分割與懶載入實踐: 本文中，來自 Airbnb 的工程師分享的了，他們基於 React Router V4 進行服務端渲染，程式碼分割與懶載入的實踐。在 RRV4 中，路由即元件的方案替代了原本的集中式配置，但是這導致了無法根據路徑進行合適的服務端渲染；針對這個問題，作者首先討論瞭如何在現有框架上進行路由管理，然後討論了非同步元件與程式碼分割的技巧。更多 React 學習參考 React 與前端工程化實踐。

  • 2018 Web 開發者學習路線圖: 本倉庫包含了一系列成為前端工程師、服務端工程師或者運維工程師的學習路線圖，前端工程師路線圖包括了基礎、深入 JavaScript 中的測試、框架、模組打包、包管理、響應式開發等，後端則包括了開發框架、包管理、資料庫、快取、訊息中介軟體、搜尋引擎等，DevOps 則包括了作業系統、雲端計算、持續整合、自動化、監控告警、Web 伺服器、叢集管理等等。更多圖譜參考 IT 知識圖譜與技術路線。

  • 8 個 2018 構建 Node.js 應用的建議: 本文是來自 RisingStack 的工程師分享的，他們關於 2018 年構建 Node.js 應用的建議。這些建議包括使用 async-await, 嘗試 import 與 import(), 嘗試 HTTP/2，加固你的 Node.js 應用等等。更多 Node.js 學習參考 深入淺出 Node.js 全棧架構。

深度閱讀

深度思考，昇華開發智慧

  • 2018 年前端展望：合久必分，分久必合: 這幾年來前端領域風起雲湧，百花齊放，本文在簡要總結 2017 前端各個框架領域的變化之後，對 2018 年可能的發展進行了展望。React 可能在渲染函式引數、setState 返回 Promise、非同步友好地生命週期回撥等方面做出改進，初次之外，作者還對 Angular、Vue、Webpack、Parcel 等框架或工具進行了點評；更多前端學習參考 Web 開發基礎與工程實踐。

開源專案

樂於分享，共推前端發展

  • toapi: Toapi 是基於 Flask 開發的，能夠將任何網站轉化為 API 服務的框架。Toapi 實際上也包含了爬蟲抓取、介面服務等部分，不過其簡化了整個流程；使用者僅需要定義資料的輸入輸出，Toapi 會幫助自動化整個流程。

  • TOAST UI Editor: TOAST UI Editor 是面向生產環境的，可擴充套件的，支援 MarkDown 語法的 WYSIWYG 編輯器；它提供了 MarkDown 與 WYSIWYG 兩種模式。TOAST UI Editor 實現了 CommonMark 與 GFM 兩個標準，同時提供了強大的 API 來方便開發者自定義擴充套件。

  • Nerv: Nerv 是基於 Virtual-DOM 的 JavaScript（TypeScript）框架，其能夠相容 React 16 API；不過提供了更加高效能、小尺寸與更好瀏覽器相容性等特性。

  • workerize: workerize 能夠方便地將某個模組移入 Web Worker，自動反射提供出介面函式；workerize 會注入某個輕量級的 RPC 實現到應用中，支援同步或者非同步地 Worker 函式呼叫，並且能夠順滑支援 async/await。

  • Screenshot-to-code-in-Keras: 近年來深度學習技術飛速發展，或可以在某些方面改變前端開發；而該倉庫提供了某個神經網路，來將設計稿的截圖直接轉化為靜態網頁，它能夠加速原型實現地速度，並且降低軟體構建的成本。

巔峰人生

  • 老炮程式設計師響馬：年輕時我想寫程式碼到 60 歲，現在我想寫到 65 歲: 響馬（Xicilion），本名劉琥，70 後程式設計師，南京第三極軟體科技有限公司創始人。1992 年畢業於南京動力高等專科學校後留校教授計算機課程，1998 年創辦西祠衚衕，2012 年創辦孢子社群，目前專注於 fibjs 專案的開發。本文是對其幾十年來技術之路的回顧與展望，也是一代技術人的青春回憶。

前端之巔

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

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

相關文章