初入軟件開發這一行時，當時還沒有前后端分離這個概念，所有的開發工程師既能寫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

微信小程序開發