摘要：巔峰人生年老兵思路上的轉(zhuǎn)變，遠(yuǎn)比單純提升技術(shù)更有價值本文節(jié)選自趙成教授在極客時間開設(shè)的趙成的運維體系管理課，是其對自己十年技術(shù)生涯的回顧與總結(jié)。趙成教授來自美麗聯(lián)合集團，集團旗下兩大主力產(chǎn)品是蘑菇街和美麗說，目前負(fù)責(zé)管理集團的技術(shù)服務(wù)團隊。

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID ： frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

FCC 廢除網(wǎng)絡(luò)中立法案: 所謂的網(wǎng)絡(luò)中立性，要求網(wǎng)絡(luò)服務(wù)供應(yīng)商不能優(yōu)待或者故意限制來自某些網(wǎng)站的流量。前總統(tǒng)奧巴馬在 2015 年簽署命令，規(guī)定以 1934 年通過的《聯(lián)邦通訊法》“ 第二類 ” 業(yè)務(wù)來規(guī)管網(wǎng)絡(luò)服務(wù)供應(yīng)商，讓聯(lián)邦通訊委員會執(zhí)法，禁止網(wǎng)絡(luò)服務(wù)供應(yīng)商優(yōu)待任何公司。美國聯(lián)邦通訊委員會（Federal Communications Commission, FCC ）早前通過廢除網(wǎng)絡(luò)中立性的規(guī)定，不再明文禁止網(wǎng)絡(luò)服務(wù)供應(yīng)商優(yōu)待來自特定網(wǎng)站的流量。

Expo SDK v24.0 發(fā)布: 本周 Expo SDK 24.0 正式發(fā)布，其基于 React Native 0.51 版本；同時 Expo 的官方網(wǎng)站也迎來了極大的更新，搜索、項目創(chuàng)建、發(fā)現(xiàn)等界面都煥然一新。該版本中添加了離線圖片支持功能，避免了每次應(yīng)用初始化時都需要進行網(wǎng)絡(luò)圖片加載；同時添加了 iOS 權(quán)限對話框的配置，優(yōu)化了 ImageManipulator, ImagePicker 等接口的功能。

React Studio 1.3 發(fā)布: React Studio 是圖形化可交互地 React 應(yīng)用開發(fā)工作臺，本文即是介紹最新的 1.3 版本中包含的系列特性。首先是整體性能與交互體驗的提升，并且增加了對多語言的支持，同時優(yōu)化了 Mock 數(shù)據(jù)的創(chuàng)建方式；此外，該版本還引入了新的卡片、選擇器等等一系列新的組件。

步步為營，掌握基礎(chǔ)技能

JavaScript 基礎(chǔ)代碼片: 本文整理了許多簡明精巧的 JavaScript 開發(fā)中用到的代碼片，既適合于初學(xué)者學(xué)習(xí)語法，也能幫助開發(fā)者溫故知新。本文包含了數(shù)組的常見處理、瀏覽器元素與位置、時間與日期、函數(shù)與函數(shù)式編程、數(shù)學(xué)公式與計算、Node.js、Object、字符串以及很多的其他工具類；更多 JS 學(xué)習(xí)資料參考現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與工程實踐。

清除瀏覽器中的資源緩存: 瀏覽器緩存是最常見的，也是最顯著的提升前端性能的手段之一；不過在如果我們錯誤地將某些資源設(shè)置為了長期緩存，那么就要尋求方法強制刷新這些資源。本文即是介紹討論如何強制刷新瀏覽器的某些資源緩存，作者依次討論了 location.reload, vary + fetch, fetch + cache:reload, fetch + POST, iframe 中進行 POST, Clear-Site-Data 等方法；更多瀏覽器的存儲操作參考現(xiàn)代 Web 開發(fā)基礎(chǔ)。

基于 Vue.js 的 RSA 加密通信應(yīng)用: 加密是現(xiàn)代互聯(lián)網(wǎng)的基石之一，本文即是希望通過構(gòu)建簡單的加密聊天應(yīng)用，來引導(dǎo)讀者了解加解密算法的基本概念。本文首先介紹了 2048 位的 RSA 加密算法的概念與實現(xiàn)方式，然后使用 Vue.js 來編寫前端界面，并且使用 Node.js 以及 Socket.io 來編寫服務(wù)端來協(xié)調(diào)各個客戶端的消息。更多 Vue.js 相關(guān)資料參考 Vue.js Reference。

立足實踐，提示實際水平

ESM 的目前實現(xiàn)與未來規(guī)劃: ES 模塊化標(biāo)準(zhǔn)最早是 2015 年在 ECMAScript 6 中發(fā)布，現(xiàn)在我們已經(jīng)可以在三個主流瀏覽器中使用 ES Modules。而 Node.js 目前是采用了 Common.js 模塊化方案，我們可以在應(yīng)用中通過 require 方法來引入其他模塊。兩種模塊機制的巨大差異使得同時兼容 Common.js 與 ESModule 并非易事；而自 Node.js 8.9.0 以來，開發(fā)者可以實驗性地使用 ESModules，本文即是對于社區(qū)的反饋以及 ESM 的未來規(guī)劃進行介紹。更多相關(guān)資料參考 JS Reference。

基于 Apollo 的組件數(shù)據(jù)交互: 本文是 Werkspot 的工程師分享的他們協(xié)同使用 Apollo Client 與 React Native 來開發(fā)應(yīng)用的實踐經(jīng)驗，著重討論了 GraphQL 帶來的易用性與靈活性。作者首先討論了查詢組件的構(gòu)成，然后分析了如何結(jié)合查詢組件與 Mutations，最后討論了如何測試查詢組件；更多 GraphQL 相關(guān)資料參考這里。

將 REST APIs 轉(zhuǎn)化為實時 APIs: 實時交互式現(xiàn)代技術(shù)棧中的重要組成，從而滿足用戶與企業(yè)的高速頻繁地數(shù)據(jù)需求；本文即是介紹如何利用開源的 Pushpin 來將 REST API 轉(zhuǎn)化為實時 API。本文首先介紹了請求-響應(yīng)架構(gòu)與事件驅(qū)動架構(gòu)地區(qū)別，然后對比了現(xiàn)有的事件接口的解決方案，最后介紹了 Pushpin 的特性與部署方式。更多服務(wù)端架構(gòu)討論參考服務(wù)端應(yīng)用程序開發(fā)基礎(chǔ)。

Electron 開發(fā)跨平臺構(gòu)建流程設(shè)計: 這是 Electron 系列文章的第二篇，本文將和大家分享我是怎么去構(gòu)建自動化的 Electron 開發(fā)構(gòu)建工程的，說白了，就是怎么把敲的代碼變成一個用戶可以下載安裝的包。當(dāng)然隨著之后應(yīng)用復(fù)雜度的提升和技術(shù)再選型，工程體系可能隨時會重構(gòu)或演進，但至少可以給大家一些參考，歡迎留言交流。工程自動化，應(yīng)該是所有開發(fā)者的一種基礎(chǔ)追求，當(dāng)你搭建建好工程體系，以后你將專注于產(chǎn)品功能的開發(fā)，而不會花大量不必要的時間去手動構(gòu)建。更多 Electron 相關(guān)資料參考這里。

深度思考，升華開發(fā)智慧

The State of JavaScript 2017: 經(jīng)過漫長的調(diào)研與數(shù)據(jù)整理之后，2017 年的 JavaScript 使用報告正式發(fā)布；本報告匯聚了來自數(shù)萬名開發(fā)者對于語法、前端框架、狀態(tài)管理、服務(wù)端框架、測試、CSS 、構(gòu)建工具、移動端框架等等大前端相關(guān)技術(shù)棧的看法與使用體驗。本報告仍然采取了樂于使用、正在使用、準(zhǔn)備使用、不感興趣、沒聽過等幾個層次來描述開發(fā)者對于某個框架或者工具的看法；此外，本報告還提供了所謂 Connections 圖解，即衡量使用者不同技術(shù)之間的關(guān)聯(lián)度，譬如有多少 React 的使用者仍然使用了 Redux 等等。更多 JS 教程參考現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與工程實踐。

NectarJS: 將 JavaScript 編譯為平臺相關(guān)的二進制代碼: 本文作者 Adrien Thierry 近年來致力于，打造將 JavaScript 編譯為平臺相關(guān)的二進制代碼的途徑，其在本文中介紹了開源的 NectarJS 的設(shè)計理念與運行機制。作者將 NectarJS 定位為編譯即服務(wù)，即能夠在優(yōu)化 JavaScript 本身性能的同時，支持將其編譯為 WebAssembly、IoT、Windows、OSX、Linux 等等各個平臺或者目標(biāo)的格式。更多 JS 教程參考現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與工程實踐。

REST 就是新時代的 SOAP: 本文作者分享了其對于 REST 的看法，不可避免地帶有主觀色彩，可以辯證地去看待。作者首先討論了 RESTful API 的不足，其抽象簡練的原則往往不能滿足真實業(yè)務(wù)場景中的問題；然后作者又討論了 REST 動詞、錯誤處理乃至于基礎(chǔ)概念上的不足，作者并未在本文中討論他理想的解決方案，只是拋出了很多問題留待讀者去思考。更多服務(wù)端架構(gòu)討論參考服務(wù)端應(yīng)用程序開發(fā)基礎(chǔ)。

利用機器學(xué)習(xí)突破圖片驗證碼: 圖片驗證碼是現(xiàn)代網(wǎng)頁中常見的安全防火墻之一，能夠用于人機識別，避免爬蟲等惡意抓取行為；本文則是以著名的 WordPress 圖片驗證碼插件為例，介紹如何使用機器學(xué)習(xí)來突破驗證碼的限制。本文作者主要使用了 Python 3, OpenCV, Keras, TensorFlow 這些常見的機器學(xué)習(xí)庫與工具，首先介紹了如何使用 WordPress 的插件創(chuàng)造訓(xùn)練數(shù)據(jù)集，然后介紹了深度卷積神經(jīng)網(wǎng)絡(luò)的基本原理以及如何進行神經(jīng)網(wǎng)絡(luò)的訓(xùn)練，最后介紹了如何使用訓(xùn)練好的模型進行圖片識別。更多 Web 安全相關(guān)資料參考這里。

樂于分享，共推前端發(fā)展

exercism.io: Exercism 提供了超過三十種編程語言的數(shù)百個實踐問題，以幫助開發(fā)者在實踐中學(xué)習(xí)并且掌握某個編程語言。Exercism 還提供了便捷的客戶端工具，幫助開發(fā)者快速搭建實驗環(huán)境，并且允許開發(fā)者分享自己的見解與解決方案。

Microbundle: Microbundle 是基于 Rollup 構(gòu)建的零配置小模塊打包工具，開發(fā)者只需要安裝，并且在 package.json 內(nèi)配置基礎(chǔ)命令即可使用。Microbundle 會自動檢測 index.js 或者 cli.js 這樣的文件，作為入口文件，自動編譯為 CommonJS、UMD 、 ESM 等多種格式。

WAlt: WAlt 可以作為 WebAssembly 文本格式的中介，其嘗試使開發(fā)者利用 JavaScript 的語法來直接編寫 .walt 代碼，然后直接編譯為 WebAssembly。WALt 的優(yōu)勢在于，其并不需要 C/C++ 或者 Rust 環(huán)境，而只需要了解 JavaScript；并且編譯的過程也不需要 LLVM 等二進制工具，還能夠集成于 Webpack 等工具。

10 年 IT 老兵：思路上的轉(zhuǎn)變，遠(yuǎn)比單純提升技術(shù)更有價值: 本文節(jié)選自趙成教授在極客時間 App 開設(shè)的“趙成的運維體系管理課”，是其對自己十年技術(shù)生涯的回顧與總結(jié)。趙成教授來自美麗聯(lián)合集團，集團旗下兩大主力產(chǎn)品是蘑菇街和美麗說，目前負(fù)責(zé)管理集團的技術(shù)服務(wù)團隊。作者在本文中依次分享了為什么我選擇了踏上運維之路？、運維思路上的轉(zhuǎn)變，遠(yuǎn)比單純提升運維技術(shù)更有價值、專欄的構(gòu)成等內(nèi)容。

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù) “ 加群 ”。投稿請發(fā)郵件到 [email protected]，注明 “ 前端之巔投稿 ”。