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

愿景

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

前端技能梳理

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

效果圖 -》 HTML還原

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

熟悉HTML\CSS、熟悉常見(jiàn)布局，div+css

熟悉瀏覽器兼容

熟悉PS切圖

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

HTML-》應(yīng)用

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

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

了解或者熟悉html

熟悉HTTP

基本的javascript應(yīng)用

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

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

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

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

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

通常需要上千行的javascript代碼

需要良好的設(shè)計(jì)模式來(lái)組織和維護(hù)代碼，MVC\MVVM等概念在前端運(yùn)用

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

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

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

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

OOP思維

模塊化開(kāi)發(fā)

db思維

熟悉javascript，熟悉es2015\es2017

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

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

怎么來(lái)評(píng)價(jià)一個(gè)人的前端能力，簡(jiǎn)單起見(jiàn)，劃分為三個(gè)境界：

第一層（必須具備）

依葫蘆畫(huà)瓢

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

熟悉HTML常見(jiàn)標(biāo)簽、CSS盒子模型、CSS優(yōu)先級(jí)，常見(jiàn)布局

會(huì)使用Vue.js/jquery，Iview、Element等工具庫(kù)

第二層（努力可以達(dá)到）

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

javascript了然于心，es2015\2016信手拈來(lái)

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

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

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

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

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

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

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

目標(biāo)

所有人達(dá)到第一層境界

骨干需要達(dá)到第二層

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

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

HTTP

HTTP get/post/put/delete

HTTP響應(yīng)碼

chrome F12 network使用

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

CSS 與盒子模型

響應(yīng)式布局

H5語(yǔ)義標(biāo)簽，audio，canvas

CSS3動(dòng)畫(huà)

課時(shí)2：javascript 基礎(chǔ)

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

javascript常用對(duì)象

DOM編程

AJAX、jsonp

正則、表單驗(yàn)證

課時(shí)3：javascript進(jìn)階

深入js

模塊化、AMD，require.js

作用域鏈

原型鏈與繼承

閉包

OOP

es2015/2017

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

TypeScript

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

Vue.js 漸進(jìn)式理解

Vue.js 模板綁定

Vue.js 組件

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

Vuex 狀態(tài)管理

Vue Router

IView 組件庫(kù)介紹

項(xiàng)目案例講解

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

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

webpack

less

代碼質(zhì)量eslint

課時(shí)6： vue.js與手機(jī)app、微信小程序開(kāi)發(fā)

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

微信小程序開(kāi)發(fā)