初入軟件開發這一行時，當時還沒有前后端分離這個概念，所有的開發工程師既能寫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
您的支持是對博主最大的鼓勵，感謝您的認真閱讀。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

總結

以上是生活随笔為你收集整理的新型前端开发工程师的三个境界 后端开发工程师如何快速转前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。