前端每週清單第 44 期: 2017 JS 調查報告、REST 接口實時化、ESM 的過去與將來

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

新聞熱點

國內國外，前端最新動態

• FCC 廢除網絡中立法案: 所謂的網絡中立性，要求網絡服務供應商不能優待或者故意限制來自某些網站的流量。前總統奧巴馬在 2015 年簽署命令，規定以 1934 年經過的《聯邦通信法》「 第二類 」 業務來規管網絡服務供應商，讓聯邦通信委員會執法，禁止網絡服務供應商優待任何公司。美國聯邦通信委員會（Federal Communications Commission, FCC ）早前經過廢除網絡中立性的規定，再也不明文禁止網絡服務供應商優待來自特定網站的流量。
• Expo SDK v24.0 發佈: 本週 Expo SDK 24.0 正式發佈，其基於 React Native 0.51 版本；同時 Expo 的官方網站也迎來了極大的更新，搜索、項目建立、發現等界面都面目一新。該版本中添加了離線圖片支持功能，避免了每次應用初始化時都須要進行網絡圖片加載；同時添加了 iOS 權限對話框的配置，優化了 ImageManipulator, ImagePicker 等接口的功能。
• React Studio 1.3 發佈: React Studio 是圖形化可交互地 React 應用開發工做臺，本文便是介紹最新的 1.3 版本中包含的系列特性。首先是總體性能與交互體驗的提高，而且增長了對多語言的支持，同時優化了 Mock 數據的建立方式；此外，該版本還引入了新的卡片、選擇器等等一系列新的組件。

開發教程

步步爲營，掌握基礎技能

• JavaScript 基礎代碼片: 本文整理了許多簡明精巧的 JavaScript 開發中用到的代碼片，既適合於初學者學習語法，也能幫助開發者溫故知新。本文包含了數組的常見處理、瀏覽器元素與位置、時間與日期、函數與函數式編程、數學公式與計算、Node.js、Object、字符串以及不少的其餘工具類；更多 JS 學習資料參考現代 JavaScript 開發：語法基礎與工程實踐。
• 清除瀏覽器中的資源緩存: 瀏覽器緩存是最多見的，也是最顯著的提高前端性能的手段之一；不過在若是咱們錯誤地將某些資源設置爲了長期緩存，那麼就要尋求方法強制刷新這些資源。本文便是介紹討論如何強制刷新瀏覽器的某些資源緩存，做者依次討論了 location.reload, vary + fetch, fetch + cache:reload, fetch + POST, iframe 中進行 POST, Clear-Site-Data 等方法；更多瀏覽器的存儲操做參考現代 Web 開發基礎。
• 基於 Vue.js 的 RSA 加密通訊應用: 加密是現代互聯網的基石之一，本文便是但願經過構建簡單的加密聊天應用，來引導讀者瞭解加解密算法的基本概念。本文首先介紹了 2048 位的 RSA 加密算法的概念與實現方式，而後使用 Vue.js 來編寫前端界面，而且使用 Node.js 以及 Socket.io 來編寫服務端來協調各個客戶端的消息。更多 Vue.js 相關資料參考 Vue.js Reference。

工程實踐

立足實踐，提示實際水平

• ESM 的目前實現與將來規劃: ES 模塊化標準最先是 2015 年在 ECMAScript 6 中發佈，如今咱們已經能夠在三個主流瀏覽器中使用 ES Modules。而 Node.js 目前是採用了 Common.js 模塊化方案，咱們能夠在應用中經過 require 方法來引入其餘模塊。兩種模塊機制的巨大差別使得同時兼容 Common.js 與 ESModule 並不是易事；而自 Node.js 8.9.0 以來，開發者能夠實驗性地使用 ESModules，本文便是對於社區的反饋以及 ESM 的將來規劃進行介紹。更多相關資料參考 JS Reference。
• 基於 Apollo 的組件數據交互: 本文是 Werkspot 的工程師分享的他們協同使用 Apollo Client 與 React Native 來開發應用的實踐經驗，着重討論了 GraphQL 帶來的易用性與靈活性。做者首先討論了查詢組件的構成，而後分析瞭如何結合查詢組件與 Mutations，最後討論瞭如何測試查詢組件；更多 GraphQL 相關資料參考這裏。
• 將 REST APIs 轉化爲實時 APIs: 實時交互式現代技術棧中的重要組成，從而知足用戶與企業的高速頻繁地數據需求；本文便是介紹如何利用開源的 Pushpin 來將 REST API 轉化爲實時 API。本文首先介紹了請求-響應架構與事件驅動架構地區別，而後對比了現有的事件接口的解決方案，最後介紹了 Pushpin 的特性與部署方式。更多服務端架構討論參考服務端應用程序開發基礎。
• Electron 開發跨平臺構建流程設計: 這是 Electron 系列文章的第二篇，本文將和你們分享我是怎麼去構建自動化的 Electron 開發構建工程的，說白了，就是怎麼把敲的代碼變成一個用戶能夠下載安裝的包。固然隨着以後應用複雜度的提高和技術再選型，工程體系可能隨時會重構或演進，但至少能夠給你們一些參考，歡迎留言交流。工程自動化，應該是全部開發者的一種基礎追求，當你搭建建好工程體系，之後你將專一於產品功能的開發，而不會花大量沒必要要的時間去手動構建。更多 Electron 相關資料參考這裏。

深度閱讀

深度思考，昇華開發智慧

• The State of JavaScript 2017: 通過漫長的調研與數據整理以後，2017 年的 JavaScript 使用報告正式發佈；本報告匯聚了來自數萬名開發者對於語法、前端框架、狀態管理、服務端框架、測試、CSS 、構建工具、移動端框架等等大前端相關技術棧的見解與使用體驗。本報告仍然採起了樂於使用、正在使用、準備使用、不感興趣、沒聽過等幾個層次來描述開發者對於某個框架或者工具的見解；此外，本報告還提供了所謂 Connections 圖解，即衡量使用者不一樣技術之間的關聯度，譬若有多少 React 的使用者仍然使用了 Redux 等等。更多 JS 教程參考現代 JavaScript 開發：語法基礎與工程實踐。
• NectarJS: 將 JavaScript 編譯爲平臺相關的二進制代碼: 本文做者 Adrien Thierry 近年來致力於，打造將 JavaScript 編譯爲平臺相關的二進制代碼的途徑，其在本文中介紹了開源的 NectarJS 的設計理念與運行機制。做者將 NectarJS 定位爲編譯即服務，即可以在優化 JavaScript 自己性能的同時，支持將其編譯爲 WebAssembly、IoT、Windows、OSX、Linux 等等各個平臺或者目標的格式。更多 JS 教程參考現代 JavaScript 開發：語法基礎與工程實踐。
• REST 就是新時代的 SOAP: 本文做者分享了其對於 REST 的見解，不可避免地帶有主觀色彩，能夠辯證地去看待。做者首先討論了 RESTful API 的不足，其抽象簡練的原則每每不能知足真實業務場景中的問題；而後做者又討論了 REST 動詞、錯誤處理乃至於基礎概念上的不足，做者並未在本文中討論他理想的解決方案，只是拋出了不少問題留待讀者去思考。更多服務端架構討論參考服務端應用程序開發基礎。
• 利用機器學習突破圖片驗證碼: 圖片驗證碼是現代網頁中常見的安全防火牆之一，可以用於人機識別，避免爬蟲等惡意抓取行爲；本文則是以著名的 WordPress 圖片驗證碼插件爲例，介紹如何使用機器學習來突破驗證碼的限制。本文做者主要使用了 Python 3, OpenCV, Keras, TensorFlow 這些常見的機器學習庫與工具，首先介紹瞭如何使用 WordPress 的插件創造訓練數據集，而後介紹了深度卷積神經網絡的基本原理以及如何進行神經網絡的訓練，最後介紹瞭如何使用訓練好的模型進行圖片識別。更多 Web 安全相關資料參考這裏。

開源項目

樂於分享，共推前端發展

• exercism.io: Exercism 提供了超過三十種編程語言的數百個實踐問題，以幫助開發者在實踐中學習而且掌握某個編程語言。Exercism 還提供了便捷的客戶端工具，幫助開發者快速搭建實驗環境，而且容許開發者分享本身的看法與解決方案。
• Microbundle: Microbundle 是基於 Rollup 構建的零配置小模塊打包工具，開發者只須要安裝，而且在 package.json 內配置基礎命令便可使用。Microbundle 會自動檢測 index.js 或者 cli.js 這樣的文件，做爲入口文件，自動編譯爲 CommonJS、UMD 、 ESM 等多種格式。
• WAlt: WAlt 能夠做爲 WebAssembly 文本格式的中介，其嘗試使開發者利用 JavaScript 的語法來直接編寫 .walt 代碼，而後直接編譯爲 WebAssembly。WALt 的優點在於，其並不須要 C/C++ 或者 Rust 環境，而只須要了解 JavaScript；而且編譯的過程也不須要 LLVM 等二進制工具，還可以集成於 Webpack 等工具。

巔峯人生

• 10 年 IT 老兵：思路上的轉變，遠比單純提高技術更有價值: 本文節選自趙成教授在極客時間 App 開設的「趙成的運維體系管理課」，是其對本身十年技術生涯的回顧與總結。趙成教授來自美麗聯合集團，集團旗下兩大主力產品是蘑菇街和美麗說，目前負責管理集團的技術服務團隊。做者在本文中依次分享了爲何我選擇了踏上運維之路？、運維思路上的轉變，遠比單純提高運維技術更有價值、專欄的構成等內容。

前端之巔

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