初入軟件開發(fā)這一行時，當(dāng)時還沒有前后端分離這個概念，所有的開發(fā)工程師既能寫html，也能寫后臺服務(wù)，隨著技術(shù)的發(fā)展，前后端分離成為趨勢，目前團隊不少人能熟悉的寫java后臺服務(wù)，卻難以hold住前端頁面的開發(fā)，前端頁面開發(fā)成為瓶頸。針對這個情況，籌劃了一個前端培訓(xùn)專題，讓后端的同事可以通過學(xué)習(xí)快速掌握前端開發(fā)技能。

愿景

培養(yǎng)全棧工程師，前后端均可以Hold住

前端技能梳理

我們把前端同事做的事情簡單的梳理下，大概可以分為：

效果圖 -》 HTML還原

將UED設(shè)計的效果圖還原為頁面，這個也是以前狹義的UI完成的工作。梳理下這個工作需要的技能：

熟悉HTML\CSS、熟悉常見布局，div+css

熟悉瀏覽器兼容

熟悉PS切圖

隨著前端UI框架的發(fā)展，當(dāng)你使用bootstrap、elements、iview這類框架時，80%的功能開發(fā)可以不需要這一步，因此一個小團隊有1個這樣的工程師就OK了。

HTML-》應(yīng)用

單獨的HTML是缺乏靈魂的，還需要綁定數(shù)據(jù)，這樣才是一個完整的頁面。在前后端未分離的時代，通常是后端基于前端還原的html來進行開發(fā)，通過模板技術(shù)綁定數(shù)據(jù)。而隨著ajax的興起，前端 MVVM框架的流行，前后端分離，數(shù)據(jù)綁定工作前移到前端，因此前端的職責(zé)之一就是調(diào)用后端的服務(wù)，并顯示到頁面上。

同樣的，梳理下這個工作需要的技能：

了解或者熟悉html

熟悉HTTP

基本的javascript應(yīng)用

熟悉一個js框架的應(yīng)用，比如jq、vue.js

一個合格的后端，在熟悉javascript的情況下，可以很快掌握。

復(fù)雜的單頁應(yīng)用

現(xiàn)在流行一個詞“大前端”，前端更大的挑戰(zhàn)就是構(gòu)建復(fù)雜的單頁應(yīng)用，比如易企秀的H5編輯器，單個頁面里包含了非常多的功能和邏輯，這類頁面有個特點：

包含復(fù)雜的業(yè)務(wù)邏輯

通常需要上千行的javascript代碼

需要良好的設(shè)計模式來組織和維護代碼，MVC\MVVM等概念在前端運用

而隨著技術(shù)的發(fā)展，javascript可以用來開發(fā)手機端app（react-native、weex），本質(zhì)上來說還是開發(fā)復(fù)雜的單頁應(yīng)用。特別是使用vuex這類狀態(tài)管理庫時，如果懂的后端的數(shù)據(jù)庫概念，可以事半功倍的理解其原理。

總結(jié)一下，開發(fā)復(fù)雜的單頁應(yīng)用，需要具備的技能：

熟悉數(shù)據(jù)結(jié)構(gòu)和算法

熟悉常用的設(shè)計模式

OOP思維

模塊化開發(fā)

db思維

熟悉javascript，熟悉es2015\es2017

一句話總結(jié)起來，復(fù)雜的前端應(yīng)用開發(fā)所需要的技能，恰恰是后端開發(fā)所擅長的，只是編程語言從java、c#變成了javascript，僅此而已。

新型前后端一體化工程師的三個境界

怎么來評價一個人的前端能力，簡單起見，劃分為三個境界：

第一層（必須具備）

依葫蘆畫瓢

可以根據(jù)還原的HTML或者UI框架，實現(xiàn)簡單頁面的開發(fā)和數(shù)據(jù)綁定

熟悉HTML常見標簽、CSS盒子模型、CSS優(yōu)先級，常見布局

會使用Vue.js/jquery，Iview、Element等工具庫

第二層（努力可以達到）

可以熟練的開發(fā)單頁應(yīng)用

javascript了然于心，es2015\2016信手拈來

熟悉Vue、React、angular、知道各自的優(yōu)缺點，根據(jù)需要選擇合理的方案

跟蹤前端發(fā)展趨勢、不盲從、獨立思考

第三層（盡量追求，需要時間和積累）

融會貫通，可以改造輪子、造新的輪子提升效率

在公司、業(yè)界前端形成影響力

培訓(xùn)規(guī)劃

最后來定一下培訓(xùn)的規(guī)劃。

目標

所有人達到第一層境界

骨干需要達到第二層

培訓(xùn)內(nèi)容

課時1：HTTP+HTML+CSS基礎(chǔ)+常見布局+HTML5+CSS3

HTTP

HTTP get/post/put/delete

HTTP響應(yīng)碼

chrome F12 network使用

html塊元素、內(nèi)聯(lián)元素、表單

CSS 與盒子模型

響應(yīng)式布局

H5語義標簽，audio，canvas

CSS3動畫

課時2：javascript 基礎(chǔ)

數(shù)據(jù)類型，數(shù)組、對象，表達式、條件、循環(huán)等

javascript常用對象

DOM編程

AJAX、jsonp

正則、表單驗證

課時3：javascript進階

深入js

模塊化、AMD，require.js

作用域鏈

原型鏈與繼承

閉包

OOP

es2015/2017

箭頭函數(shù)等新語法糖

TypeScript

課時4：項目框架應(yīng)用 Vue.js +IView使用培訓(xùn)

Vue.js 漸進式理解

Vue.js 模板綁定

Vue.js 組件

Vue.js 單頁應(yīng)用

Vuex 狀態(tài)管理

Vue Router

IView 組件庫介紹

項目案例講解

課時5：基于Nodejs的前端新生態(tài)

NodeJs原理、歷史、發(fā)展

webpack

less

代碼質(zhì)量eslint

課時6： vue.js與手機app、微信小程序開發(fā)

使用vue.js+weex開發(fā)手機app

微信小程序開發(fā)