摘要：斯坦福宣布使用作為計算機課程的首選語言近日，某位有年教學經驗的斯坦福教授決定放棄，而使用作為計算機入門課程的教學語言。斯坦福官方站點將它們新的課程描述為是最流行的構建交互式的開發(fā)語言，本課程會用講解中的實例。

前端每周清單第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3優(yōu)化服務端渲染，優(yōu)秀React界面框架合集 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉載，請與InfoQ中文站聯(lián)系。從屬于筆者的  Web 前端入門與工程實踐的前端每周清單系列系列；部分文章需要自備梯子。

前端 前端每周清單

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

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

《Airbnb 設計團隊發(fā)布 React SketchAPP》：Airbnb 設計團隊近日發(fā)布能夠將 React 組件渲染到 Sketch 文檔中的開源工具，它為開發(fā)工程師與設計師之間提供了便捷的溝通橋梁。( http://airbnb.design/painting... )

《Vue.js 2.3.0 JoJo"s Bizarre Adventure 發(fā)布》：近日，Vue.js 發(fā)布其 2.3.0 版本，帶來了一系列性能的提升與 Bug 修復。該版本對于服務端渲染、異步組件等多個重要的部分進行了優(yōu)化，值得一提的是，官方還創(chuàng)建了新的基于 Vue 的服務端渲染實現(xiàn)指南。( https://github.com/vuejs/vue/... )

《斯坦福宣布使用 JavaScript 作為計算機課程的首選語言》：近日，某位有 15 年 Java 教學經驗的斯坦福教授決定放棄 Java，而使用 JavaScript 作為計算機入門課程的教學語言。斯坦福官方站點將它們新的 106J 課程描述為：JavaScript 是最流行的構建交互式 Web 的開發(fā)語言，本課程會用 JavaScript 講解 CS106A 中的實例。( https://parg.co/bNX )

《Flow 0.45.0 版本發(fā)布》：近日 Flow 0.45.0 版本發(fā)布，其引入了一系列的新特征，譬如對于 Unicode 字符的支持、import 表達式的支持等；同時，F(xiàn)low 還進行了部分錯誤的修復，并且優(yōu)化了代碼運行效率。( https://github.com/facebook/f... )

《Angular 4.1.0 發(fā)布》：近日 Angular 4.1.0 版本發(fā)布，該版本中添加了對于 TypeScript 2.2 以及 2.3 的完整支持；除此之外，本版本還添加了一系列的新特性，并且修復了許多的錯誤。( http://angularjs.blogspot.com... )

步步為營，掌握基礎技能

《在 Node.js 應用中如何使用 ESLint》：ESLint 是開源的 JavaScript Linting 工具，它能夠幫助開發(fā)者解決 JavaScript 無類型語言本身帶來的一些錯誤。ESLint 遵循組件化的設計思想，它允許開發(fā)者動態(tài)地設置使用的規(guī)則，而本文即是介紹基礎的 ESLint 環(huán)境搭建與使用方法的文章。( https://parg.co/bN4 )

《8 小時內學習 Node.js》：Node.js 是基于 Google Chrome V8 引擎的 JavaScript 框架，其能夠用于開發(fā)類似于視頻直播、單頁應用等 IO 密集型的 Web 項目。而本文則是提供了完整的從零到一的 Node.js 學習路線圖，包含了基礎的環(huán)境構建、Console 使用、核心模塊使用、基本的 Web 服務器搭建等等內容。( https://parg.co/bNy )

《SSH 背后的故事》：SSH 是最常用的協(xié)議之一，而本文則是記錄了 SSH 獲得其默認端口號 22 的背后的故事。除此之外，本文還記錄了 SSH 的基本搭建與使用，以及如何與 iptables 協(xié)同使用等內容。( https://www.ssh.com/ssh/port )

《CSS-in-JavaScript：基于組件的樣式組織》：通過使用內聯(lián)樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠為我們提供類似于 CSS 預處理器、命名空間等多方面的輔助。本文則是介紹了幾個常見的適用于 CSS-in-JS 技術的場景，譬如排版、空格等。( https://parg.co/bNe )

《你應該掌握的關于調試 Angular 應用的知識》：調試是 Web 開發(fā)中不可或缺的部分，特別是對于那些接管已存在代碼庫的開發(fā)者，他們往往需要經過大量的調試才能了解代碼的架構與邏輯。不過貌似 Angular 官方文檔中尚缺專門對于 Angular 中調試的講解，本文則是深度淺出地講解 Angular 應用開發(fā)過程中的調試技巧。本文首先介紹了作者調試源代碼的技巧，然后介紹了如何使用框架內置的調試 API 來進行應用調試。( https://parg.co/bN1)

《CSS Grid 布局初體驗》：最近 CSS Grid 布局大紅大紫，吸引了很多開發(fā)者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了對于 CSS Grid 的支持。本文則是聚焦于何謂 CSS Grid 布局、它可以做些什么以及如何投放到生產環(huán)境等內容。( https://parg.co/bNW )

立足實踐，提示實際水平

《一系列優(yōu)秀的 React 界面框架》：本文列舉了多個優(yōu)秀的 React 界面框架，分析了其特性、適用場景以及潛在的缺陷。本文涉及的框架包括 Material UI、React Desktop、Semantic-UI-React、Ant-Design、Blueprint、React Bootstrap、React Toolbox、Grommet、Fabric 等等。( https://parg.co/bNh )

《使用 gRPC-Web 從 Restful JSON API 遷移到類型安全的 Web API》：目前 Web 開發(fā)中，REST + JSON 是標準的 Web 應用于 API 服務器之間的交互方式。不過這種缺少強類型限制的、更多傾向于約定的通信方式往往會使得網絡調試相對復雜。本文即介紹了如何擴展 gRPC 以及使用 TypeScript 設計新的系統(tǒng)中多個微服務之間的交互協(xié)議。( https://parg.co/bNf )

《實測Vue SSR的渲染性能：避開20倍耗時》：Vue SSR是Vue.js 2.0引入的直出渲染方案，本文將全面解析virtual-dom-based 及 string-based 的原理并對其進行對比。Vue SSR的模板是virtual-dom-based，所以QQ空間Hybrid業(yè)務做Vue 2.0的改造的同時，模板類型也從之前的a類轉換成b類。 本文是在實際業(yè)務場景中對Vue SSR的渲染性能做測試，并解析渲染步驟，給出嘗試優(yōu)化的方案和最終結論。( https://parg.co/bNv )

《從零開始基于 JavaScript 構建簡單神經網絡》：本文不是純粹的前端開發(fā)文章，對于聽說過人工智能與神經網絡并且有興趣的開發(fā)者不妨一讀。而本文則是漸進地介紹神經網絡與深度學習理論基礎、如何使用 JavaScript 實現(xiàn)簡單的數(shù)學公式、如何實現(xiàn)簡單的神經網絡等內容。( https://parg.co/bNa )

《來自 Vixlet 的 React 優(yōu)化建議》：近年來 Vixlet 的 Web 團隊逐步將其 Web 框架遷移到了 React + Redux 技術架構，本文是來自于 Vixlet 的 React 優(yōu)化實踐總結與建議。( https://parg.co/bNF )

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

《在 Web 開發(fā)中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多項目在選擇使用 CSS-in-JavaScript 來組織樣式的時候，卻是對于 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決命名空間沖突、保證樣式的可擴展性、帶來了性能提升與樣式文件的可組織性等等。( https://parg.co/bNR )

《d3.express：集成交互式編碼環(huán)境》：本文介紹了尚在開發(fā)中的 d3.express，一個類似于 Python Juypter Notebook 的交互式編碼環(huán)境。d3.express 允許開發(fā)者使用大量 d3 內置的功能函數(shù)，譬如加載遠程的 CSV 文件；并且允許開發(fā)者交互地實時預覽 SVG、Canvas 等繪制結果，有人認為 d3.express 會是一種基于 JavaScript 的更好的數(shù)據(jù)可視化解決方案。( https://parg.co/bNi )

《V8 不再使用基準測試引擎 Octane》：JavaScript基準測試引擎是一段不斷進化的歷史。隨著網頁從原始靜態(tài)頁面到現(xiàn)在富客戶端應用，都需要基準測試引擎能夠與時俱進。SunSpider是其中比較早的基準測試引擎，它為快速優(yōu)化JavaScript提供了基礎。但是，隨著虛擬機開發(fā)者意識到微基準測試的局限性，基準測試引擎隨之更新，針對SunSpider的短板進行優(yōu)化，同時瀏覽器社區(qū)也將SunSpider從推薦基準測試引擎中剔除。Octane基準測試套件最早發(fā)布于2012年，旨在減輕早期微基準測試引擎的一些缺陷。它源于V8的早期簡單測試用例，最終成為通用網頁性能的基準測試。Octane包含17個不同的測試集，以覆蓋各種不同的工作場景。Octane的內容代表它創(chuàng)建時度量JavaScript性能的主流方式。( https://parg.co/bN9 )

《探秘 Google SEO 算法背后的秘密》：SEO 是網站推廣過程中不可忽視的一個部分，其全稱為搜索引擎優(yōu)化。本文則是面向 SEO 新手或者老鳥的有關 Google 推薦算法的解構闡述，詳細分析了 Google 推薦算法的考量因素，并且給出了如何對網站進行 SEO 優(yōu)化的實踐建議。( https://parg.co/bNI )

《從實用主義視角來看現(xiàn)代前端應用開發(fā)》：現(xiàn)代 Web 開發(fā)技術變革迅速，而我也經歷了從純 JS 、jQuery、Vaadin、Angular JS、React 等等一系列的變遷。本文則首先思考何謂現(xiàn)代 Web 應用，然后考慮現(xiàn)代 Web 應用常用的項目架構與構建方式，譬如 TypeScript、Webpack、Linting 等內容，然后討論現(xiàn)代常用的技術架構，譬如 React.j、MobX、依賴注入等相關知識。( http://dimafeng.com/2017/04/2... )

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

《Sizzy》：Sizzy 是輔助開發(fā)者預覽網頁在不同屏幕分辨率下顯示效果的工具，它能夠在同一頁上列舉出目標網頁在多個設備上的顯示效果，從而加速響應式開發(fā)的速度。( https://github.com/kitze/sizzy )

《create-next-app》：基于 Next.js 的類似于 create-react-app 的快速創(chuàng)建支持服務端渲染的 React 應用的命令行輔助工具。( https://open.segment.com/crea... )

《Fathom》：Fathom 是 Firefox 開源的用于提取網頁中有意義內容的 JavaScript 框架，其能夠有效識別頁面中的前進/后退按鈕、地址表單以及主文本內容等等。( https://github.com/mozilla/fa... )

《tamperchrome》：Tamper Chrome 是一個允許你實時截獲與修改 HTTP 請求的 Chrome 擴展，其能夠用于 Web 安全測試等多個方面，并且它能夠運行在包括 Chrome OS 在內的多種操作系統(tǒng)中。( https://github.com/google/tam... )

《pkg》：pkg 能夠將 Node.js 項目打包為單個可執(zhí)行文件，其允許開發(fā)者發(fā)布商業(yè)級應用而不用擔心源代碼泄露的風險。pkg 會自動掃描你的 node_modules，然后將需要用到的本地內容打包到可執(zhí)行文件中。( https://github.com/zeit/pkg )

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