前端每週清單第6期：Angular 4.0學習資源，Egg.js 1.0發佈，六問CTO程序員如何成長

前端每週清單第6期：Angular 4.0學習資源，Egg.js 1.0發佈，六問CTO程序員如何成長 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐，更多前端知識圖譜與學習路線圖參考泛前端知識圖譜（Web/iOS/Android/RN） 。

前端每週清單第6期：Angular 4.0學習資源，Egg.js 1.0發佈，六問CTO程序員如何成長

前端 前端每週清單

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

新聞熱點

國內國外，前端最新動態

• 《Angular 4.0.0 發佈》：今日 Angular 團隊宣佈發佈 4.0.0 版本，該版本可以向後兼容絕大部分 2.x.x 應用。在 4.0.0 中，帶來的主要改變包括應用更小而且速度更快、更新了視圖引擎，減小了將近 60% 的生成代碼、而且引入了動畫庫做爲預置的核心庫的一部分等 。( https://parg.co/bsw )

• 《Egg.js 1.0.0 正式發佈》：Egg.js 是企業級 Node.js 框架沉澱自阿里各行各業不一樣領域最佳實踐的插件，涵蓋了常見的業務開發場景，穩定支撐了 15 和 16 年天貓雙 11 大促，頂級流量壓力 。其秉持漸進式理念，極具伸縮性，既適合我的小項目快速開發，也適合企業級的團隊開發協做。( https://zhuanlan.zhihu.com/p/... )

• 《WebStorm 2017.1 增長對 Vue.js 的支持》：近日，JetBrains 發佈了其最受歡迎的 WebStorm IDE 的 2017.1 版本，絕不例外地增長了對 Vue.js 的支持。WebStorm 如今會識別 .vue 文件並在模板中增長代碼補全功能。當引用其餘視圖組件時，WebStorm 也將可以自動補全代碼並自動增長 import 聲明。( https://parg.co/bQU )

開發教程

步步爲營，掌握基礎技能

• 《CSS Grid 典型案例》：該網站提供了一系列基於 React 編寫的 CSS Grid 佈局的測試樣例，是個不錯的從實例中學習 CSS Grid 語法與使用的教程。( https://sii.im/playground/css... )

• 《Webpack 實踐教程》：本系列教程着眼於介紹真實應用中 Webpack 的使用，包含了三個部分：構建基礎前端項目與添加編譯支持、減小包體體積與緩存、加速構建與提高開發工做流。( https://parg.co/bsL )

• 《面向「遠古」 Web 開發者的現代 JavaScript 教程》：本文主要是面向那些從 PHP、JSP、Rails 佔據統治地位時開始進行 Web 技術的開發者進行常見的現代 JavaScript 基礎概念的介紹。( https://parg.co/bsF )

• 《你應該知道的關於 Node.js 中模塊導入的知識》：在 Node.js 開發中咱們時刻都在於其模塊機制打交道，而本文做者則深刻淺出地介紹了 Node.js 中負責處理模塊依賴的兩個核心模塊：require 與 module；而且介紹了不一樣的導入對象在 Node.js 中實際的遞歸處理流程以及最終在 module 中造成的元數據描述。( https://parg.co/bQl )

• 《Angular 4 學習資源》：隨着 Angular 4 的正式發佈，本文也收集了部分學習 Angular 4 的資源，包括特性總結、服務端渲染、響應式編程、樣式指南等等多個部分。( https://parg.co/bQ0 )

工程實踐

立足實踐，提示實際水平

• 《Dropbox：使用同域 Cookie 避免跨站攻擊》：跨站請求僞造（CSRF）是常見的網絡滲透攻擊手段之一，攻擊者會誤導用戶在攻擊站點上對目標站點發起非法請求。本文是 Dropbox 工程師分享他們在實踐中經常使用的防護經驗分享，包括使用動態表單令牌、同域 Cookie 等等。(https://parg.co/bs5)

• 《跨瀏覽器插件模板》：隨着 Firefox 也開始支持 WebExtensions，咱們能夠更加方便地編寫跨瀏覽器插件，儘量地複用代碼。本倉庫則提供了基礎的插件模板，實現了一次編寫，多處運行、熱加載等多個便捷功能的預置。( https://parg.co/bsi )

• 《VS Code 使用貼士與技巧》: VSCode 是很是輕量易用的軟件開發工具，其豐富的插件系統可以極大地知足開發需求。本文則是做者總結的一系列 VS Code 使用技巧的總結與介紹，譬如經常使用命令操做、文件管理、Git 集成、調試與任務運行等等。(https://parg.co/bsk)

• 《解密 JavaScript 異步編程》：JavaScript 中異步編程歷經了多個大的迭代，從回調到 Promise 到生成器以及如今的 Async/Await；本文做者則是高屋建瓴地介紹了 JavaScript 異步編程的變遷歷史以及簡要的內部實現原理。( https://parg.co/bsz )

• 《Webpack CommonsChunkPlugin 與多入口公共代碼提取》：在構建基於 Webpack 的前端工做流時，CommonsChunkPlugin 是經常使用的公共代碼提取插件。而本文則是 Webpack 開發團隊對於社區反饋的CommonsChunkPlugin 使用過程當中的一些誤區與同步/異步公共代碼塊提取的實踐進行總結與分析。( https://parg.co/bQb )

• 《構建可維護的大型 Angular 2 應用》：本文是來自 Versett 的工程師介紹其團隊在基於 Angular 2 構建大型應用時的實踐與總結。( https://parg.co/bQm )

• 《開發 React Native 與 Redux 應用一年來的錯誤總結》：本文做者總結了他在過去一年中 React Native 與 Redux 開發中遇到的錯誤的覆盤與總結，譬如佈局文件分割、Redux Store 設計、項目目錄結構、表單驗證等多個方面。( https://parg.co/bQS )

深度閱讀

深度思考，昇華開發智慧

• 《淺析 WebAssembly 緣何優於 Asm.js》：WebAssembly 是新的 Web 中可執行格式，逐現代瀏覽器紛紛地提供了對於 WebAssembly 的原生支持；本文則是對於 WebAssembly 相較於 asm.js 帶來的性能提高背後的原理進行簡要介紹。(https://parg.co/bsv)

• 《ES7 Async/Await 常見誤區》：ECMAScript 6 引入的 Promise 大大簡化了 JavaScript 中異步編程語法，而 ES7 引入的 Async 則使其更爲優雅；本文做者對於實踐中常見的對於 Async/Await 的語法誤用案例進行了解析。( https://parg.co/bsW )

• 《React Conf 2017 盤點》：本文做者對於近日舉辦的 React Conf 2017 中的精彩演講進行了盤點，包括 Redux 與 MobX 在狀態管理領域的對比、ReactVR 等一系列優秀的基於 React 的擴展項目、代碼格式化與樣式組件、服務端渲染等等。( https://parg.co/bsg )

• 《百度 SSP 單頁式應用性能優化實踐》：針對首頁和部分頁面打開速度慢的問題，百度SSP前端團隊對單頁式應用性能進行了優化。本文介紹其中一個方案：基於 HTTP Chunk 的首屏數據漸進式預加載方案，該方案整體減小了單頁應用 1.2s 的首屏呈現時間。同時對比其與同構渲染方案的異同。( https://parg.co/bQH )

• 《Composing Software》：本系列文章由 Eric Elliott 大神發佈，着眼於介紹 JavaScript 函數式編程與大型軟件項目中的可組織性技術的介紹，包括了函數式編程導論、高階函數、Reduce、Functors & Categories 等幾個部分，還在持續更新中。( https://parg.co/bQY )

• 《Redux 實踐大討論》：此篇是 Markerikson 在 Redux Issue 中發起的討論，主要涉及 Redux 模板冗餘、過分抽象、學習曲線過於曲折、太多的 Opinioned 最佳實踐等問題。( https://github.com/reactjs/re... )

開源項目

樂於分享，共推前端發展

• 《react-native-interactable》：react-native-interactable 是由 wix 發佈的用於建立高性能用戶交互效果的聲明式接口。典型的用戶場景包括滑動式卡片、抽屜菜單、伸縮式應用頭、聊天頭等。( https://github.com/wix/react-... )

• 《awesome-github-vue》：awesome-github-vue 是由 OpenDigg 整理並維護的 Vue 相關開源項目庫集合。( https://github.com/opendigg/a... )

• 《react-overdrive》：很是簡單易用的 React 應用轉場動畫實現庫，可以在不一樣的頁面間指定相同 ID 的元素，Overdrive 會自動爲這兩個元素之間添加轉場動畫。( https://github.com/berzniz/re... )

• 《Eagle.js》：Eagle.js 是基於 Vue.js 構建的建立 Web 中幻燈片的庫，支持動畫、主題、交互插件等經常使用功能。( https://github.com/zulko/eagl... )

• 《react-perimeter》：react-perimeter 可以爲目標元素建立隱藏的柵欄，當用戶的鼠標移動到目標元素的指定範圍內時會觸發預設時間，譬如能夠執行組件預加載等操做。( https://github.com/aweary/rea... )

巔峯人生

• 《六問CTO，程序員的我的、職業成長如何抉擇？》：本文是聲網 Agora.io CTO 陶思明對於程序員的自我成長、KPI 考覈機制、技術管理與創業選擇等相關問題進行的回答與分享。( https://parg.co/bQp)

前端之巔

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