前端每週清單第 11 期：Angular 4.1支援TypeScript 2.3，Vue 2.3優化服務端渲染

王下邀月熊_Chevalier發表於2017-05-02
前端AngularTypeScriptVue優化服務端

前端每週清單第 11 期：Angular 4.1支援TypeScript 2.3，Vue 2.3優化服務端渲染，優秀React介面框架合集 為InfoQ中文站特供稿件，首發地址為這裡；如需轉載，請與InfoQ中文站聯絡。從屬於筆者的 Web 前端入門與工程實踐的前端每週清單系列系列；部分文章需要自備梯子。

前端每週清單第 11 期：Angular 4.1支援TypeScript 2.3，Vue 2.3優化服務端渲染，優秀React介面框架合集

前端 前端每週清單

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

新聞熱點

國內國外，前端最新動態

開發教程

步步為營，掌握基礎技能

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

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

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

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

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

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

工程實踐

立足實踐，提示實際水平

  • 《一系列優秀的 React 介面框架》：本文列舉了多個優秀的 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 開發中，REST + JSON 是標準的 Web 應用於 API 伺服器之間的互動方式。不過這種缺少強型別限制的、更多傾向於約定的通訊方式往往會使得網路除錯相對複雜。本文即介紹瞭如何擴充套件 gRPC 以及使用 TypeScript 設計新的系統中多個微服務之間的互動協議。( 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業務做Vue 2.0的改造的同時，模板型別也從之前的a類轉換成b類。 本文是在實際業務場景中對Vue SSR的渲染效能做測試，並解析渲染步驟，給出嘗試優化的方案和最終結論。( https://parg.co/bNv )

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

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

深度閱讀

深度思考，昇華開發智慧

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

  • 《d3.express：整合互動式編碼環境》：本文介紹了尚在開發中的 d3.express，一個類似於 Python Juypter Notebook 的互動式編碼環境。d3.express 允許開發者使用大量 d3 內建的功能函式，譬如載入遠端的 CSV 檔案；並且允許開發者互動地實時預覽 SVG、Canvas 等繪製結果，有人認為 d3.express 會是一種基於 JavaScript 的更好的資料視覺化解決方案。( https://parg.co/bNi )

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

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

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

開源專案

樂於分享，共推前端發展

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

  • 《create-next-app》：基於 Next.js 的類似於 create-react-app 的快速建立支援服務端渲染的 React 應用的命令列輔助工具。( https://open.segment.com/crea… )

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

  • 《tamperchrome》：Tamper Chrome 是一個允許你實時截獲與修改 HTTP 請求的 Chrome 擴充套件，其能夠用於 Web 安全測試等多個方面，並且它能夠執行在包括 Chrome OS 在內的多種作業系統中。( https://github.com/google/tam… )

  • 《pkg》：pkg 能夠將 Node.js 專案打包為單個可執行檔案，其允許開發者釋出商業級應用而不用擔心原始碼洩露的風險。pkg 會自動掃描你的 node_modules，然後將需要用到的本地內容打包到可執行檔案中。( https://github.com/zeit/pkg )

巔峰人生

前端之巔

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

相關文章