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

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

前端 前端每周清單

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

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

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

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

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

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

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

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

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

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

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

《CSS-in-JavaScript：基于組件的樣式組織》：通過使用內(nèi)聯(lián)樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠?yàn)槲覀兲峁╊愃朴?CSS 預(yù)處理器、命名空間等多方面的輔助。本文則是介紹了幾個(gè)常見的適用于 CSS-in-JS 技術(shù)的場(chǎng)景，譬如排版、空格等。( https://parg.co/bNe )

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

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

立足實(shí)踐，提示實(shí)際水平

《一系列優(yōu)秀的 React 界面框架》：本文列舉了多個(gè)優(yōu)秀的 React 界面框架，分析了其特性、適用場(chǎng)景以及潛在的缺陷。本文涉及的框架包括 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 是標(biāo)準(zhǔn)的 Web 應(yīng)用于 API 服務(wù)器之間的交互方式。不過這種缺少?gòu)?qiáng)類型限制的、更多傾向于約定的通信方式往往會(huì)使得網(wǎng)絡(luò)調(diào)試相對(duì)復(fù)雜。本文即介紹了如何擴(kuò)展 gRPC 以及使用 TypeScript 設(shè)計(jì)新的系統(tǒng)中多個(gè)微服務(wù)之間的交互協(xié)議。( https://parg.co/bNf )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到editors@cn.infoq.com，注明“前端之巔投稿”。