初入軟件開發這一行時，當時還沒有前后端分離這個概念，所有的開發工程師既能寫html，也能寫后台服務，隨着技術的發展，前后端分離成為趨勢，目前團隊不少人能熟悉的寫java后台服務，卻難以hold住前端頁面的開發，前端頁面開發成為瓶頸。針對這個情況，籌划了一個前端培訓專題，讓后端的同事可以通過學習快速掌握前端開發技能。
願景
- 培養全棧工程師，前后端均可以Hold住
前端技能梳理
我們把前端同事做的事情簡單的梳理下，大概可以分為：
效果圖 -> HTML還原
將UED設計的效果圖還原為頁面，這個也是以前狹義的UI完成的工作。梳理下這個工作需要的技能：
- 熟悉HTML\CSS、熟悉常見布局，div+css
- 熟悉瀏覽器兼容
- 熟悉PS切圖
隨着前端UI框架的發展，當你使用bootstrap、elements、iview這類框架時，80%的功能開發可以不需要這一步，因此一個小團隊有1個這樣的工程師就OK了。
HTML->應用
單獨的HTML是缺乏靈魂的，還需要綁定數據，這樣才是一個完整的頁面。在前后端未分離的時代，通常是后端基於前端還原的html來進行開發，通過模板技術綁定數據。而隨着ajax的興起，前端 MVVM框架的流行，前后端分離，數據綁定工作前移到前端，因此前端的職責之一就是調用后端的服務，並顯示到頁面上。
同樣的，梳理下這個工作需要的技能：
- 了解或者熟悉html
- 熟悉HTTP
- 基本的javascript應用
- 熟悉一個js框架的應用，比如jq、vue.js
一個合格的后端，在熟悉javascript的情況下，可以很快掌握。
復雜的單頁應用
現在流行一個詞“大前端”，前端更大的挑戰就是構建復雜的單頁應用，比如易企秀的H5編輯器，單個頁面里包含了非常多的功能和邏輯，這類頁面有個特點：
- 包含復雜的業務邏輯
- 通常需要上千行的javascript代碼
- 需要良好的設計模式來組織和維護代碼，MVC\MVVM等概念在前端運用
而隨着技術的發展，javascript可以用來開發手機端app（react-native、weex），本質上來說還是開發復雜的單頁應用。特別是使用vuex這類狀態管理庫時，如果懂的后端的數據庫概念，可以事半功倍的理解其原理。
總結一下，開發復雜的單頁應用，需要具備的技能：
- 熟悉數據結構和算法
- 熟悉常用的設計模式
- OOP思維
- 模塊化開發
- db思維
- 熟悉javascript，熟悉es2015\es2017
一句話總結起來，復雜的前端應用開發所需要的技能，恰恰是后端開發所擅長的，只是編程語言從java、c#變成了javascript，僅此而已。
新型前后端一體化工程師的三個境界
怎么來評價一個人的前端能力，簡單起見，划分為三個境界：
-
第一層（必須具備）
- 依葫蘆畫瓢
- 可以根據還原的HTML或者UI框架，實現簡單頁面的開發和數據綁定
- 熟悉HTML常見標簽、CSS盒子模型、CSS優先級，常見布局
- 會使用Vue.js/jquery，Iview、Element等工具庫
-
第二層（努力可以達到）
- 可以熟練的開發單頁應用
- javascript了然於心，es2015\2016信手拈來
- 熟悉Vue、React、angular、知道各自的優缺點，根據需要選擇合理的方案
- 跟蹤前端發展趨勢、不盲從、獨立思考
-
第三層（盡量追求，需要時間和積累）
- 融會貫通，可以改造輪子、造新的輪子提升效率
- 在公司、業界前端形成影響力
培訓規划
最后來定一下培訓的規划。
目標
- 所有人達到第一層境界
- 骨干需要達到第二層
培訓內容
課時1：HTTP+HTML+CSS基礎+常見布局+HTML5+CSS3
- HTTP
- HTTP get/post/put/delete
- HTTP響應碼
- chrome F12 network使用
- html塊元素、內聯元素、表單
- CSS 與盒子模型
- 響應式布局
- H5語義標簽，audio，canvas
- CSS3動畫
課時2：javascript 基礎
- 數據類型，數組、對象，表達式、條件、循環等
- javascript常用對象
- DOM編程
- AJAX、jsonp
- 正則、表單驗證
課時3：javascript進階
- 深入js
- 模塊化、AMD，require.js
- 作用域鏈
- 原型鏈與繼承
- 閉包
- OOP
- es2015/2017
- 箭頭函數等新語法糖
- TypeScript
課時4：項目框架應用 Vue.js +IView使用培訓
- Vue.js 漸進式理解
- Vue.js 模板綁定
- Vue.js 組件
- Vue.js 單頁應用
- Vuex 狀態管理
- Vue Router
- IView 組件庫介紹
- 項目案例講解
課時5：基於Nodejs的前端新生態
- NodeJs原理、歷史、發展
- webpack
- less
- 代碼質量eslint
課時6： vue.js與手機app、微信小程序開發
- 使用vue.js+weex開發手機app
- 微信小程序開發
最后，歡迎大家拍磚和提出建議。
作者：Jadepeng
出處：jqpeng的技術記事本--http://www.cnblogs.com/xiaoqi
您的支持是對博主最大的鼓勵，感謝您的認真閱讀。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。