web

http://wiki.sdt-int.com/pages/viewpage.action?pageId=7078370

                 相比於後端開發而言（服務端），前端一貫是百花齊放，百家爭鳴的開源樂園，因此針對同一個問題會有不少辦法和類庫來解決。

• 你們在學習的過程當中會遇到不少新技術和名詞，請牢記本身此次學習的主要目的是什麼，不要把精力分散到一些與此無關的技術上。

   

  初學者

  如下三種技術是前端中必不可少的技能，開發者應可以熟練掌握，可訪問 Mozilla Web 技術文檔 來學習。

  • HTML 入門
  • JavaScript 指南
  • CSS入門教程

  在對於這些技術有基本瞭解後，建議閱讀 JavaScript生態圈現狀：初學者地圖 ，瞭解前端開發過程所使用的一些技術。

  畢業標準

  • 可獨立完成包含有表單的 HTML 頁面；
  • 針對表單可以使用 JavaScript 進行合法性校驗；
  • 針對表單可實現左標籤右輸入框的佈局，且總體居中對齊的效果。

   

  Level 1 (普通)

  推薦使用 Facebook 開源的 React 做爲前端渲染層，配合使用 Redux 做爲集中狀態管理的容器。

  • React 快速入門 | 
  • Redux 介紹與基礎
  • ECMAScript 6 入門

  因爲中文文檔是從英文翻譯而來，部份內容沒有準確描述最新功能。建議英文比較好的開發者也能夠瀏覽如下文章。

  • Learn Raw React — no JSX, no Flux, no ES6, no Webpack
  • Learn Raw React: Ridiculously Simple Forms
  • Learn ES2015
  • React Getting Started
  • Redux Intro & Basics

  針對 React，開發者須要理解 React 的虛擬 DOM 和可嵌套組件的概念，組件之間如何傳遞數據。

  針對 Redux，開發者須要掌握 Action、Reducer、Store 以及如何處理 Ajax 請求。

  針對 ES6，開發者只須要掌握箭頭函數、解構賦值、let 和 const 部分便可。因爲 React 對於 ES6 Class 的支持不完善，目前不推薦在項目中使用 ES6 Class。

  不建議在這個階段花費不少時間去理解 Webpack, Babel 等技術，若是想實現所見即所得的顯示效果，可藉助現成模板來實現。

  畢業標準

  • 可獨立完成 React 版本的 TodoMVC；
  • 可將上述項目改造爲使用 Redux 存儲狀態；

   

  Level 2

  進入這個階段的開發者應着重於如下方面。

  • 如何將 DCS/DMS 業務分解爲合適的 React 組件；
  • 哪些狀態應交由 Redux 統一管理，哪些是 React 組件的 State；
  • 如何完成單元測試和 E2E 測試；
  • 如何管理業務數據；
  • 如何複用基礎數據；

  畢業標準

  • 可獨立完成相似維修單管理的業務節點

   

  Level 3

  在這個階段，開發者須要具備把握項目總體代碼結構的能力。

  • 如何利用 Webpack 和 Babel 等一系列工具準備項目開發環境；
  • 如何實現服務端渲染；
  • 如何規劃 Redux 的 Action 和 Reducer；
  • 如何克服 Immutable 不利於重構的問題；
  • 如何爲將來可能發生的業務變動預留合適的定義；

  畢業標準

  • 可帶領開發者完成小型項目的前端開發；