前端每週清單第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,註明“前端之巔投稿”。