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

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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 開發基礎。
• 基於 Node.js 實現的深度學習面部識別庫: 本文中，做者介紹瞭如何使用新近開源的 face-recognition.js 庫，去構建高可用的面部識別與檢測應用。該庫底層使用了 dlib，而後使用 Node.js 綁定來暴露上層接口；而 dlib 則使用了深度學習算法，而且內置了部分預訓練的模型，其在 LFW 面部識別評測中可以得到 99.38% 的準確率。更多 Node.js 學習參考 深刻淺出 Node.js 全棧架構。

工程實踐

立足實踐，提示實際水平

• 基於 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 全棧架構。

深度閱讀

深度思考，昇華開發智慧

• 現代網絡負載均衡與代理綜述: 負載均衡是構建現代分佈式應用系統的重要組成部分，本文便是對現代負載均衡與代理技術進行了綜述與盤點。本文依次討論了什麼是負載均衡，其和代理的異同，負載均衡的特色，現代經常使用 L4 與 L7 的不一樣層負載均衡的實現拓撲與應用案例等；更多微服務相關參考服務端應用程序開發與系統架構。
• 操做系統工做原理：開發者應該掌握的十個概念: 操做系統是軟件開發中必備的基礎知識之一，而做者在本文中總結了十個操做系統相關的關鍵概念，來幫助開發者更深刻地掌握編程理念。這些概念包括進程與進程管理、線程與併發、調度、內存管理、輸入與輸出管理、可視化、分佈式文件系統、分佈式共享內存、雲計算等等；更多操做學習參考 Linux 配置使用、內部原理與 Shell 編程。
• 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，註明 「 前端之巔投稿 」。