新型前端开发工程师的三个境界 后端开发工程师如何快速转前端

初入软件开发这一行时，当时还没有前后端分离这个概念，所有的开发工程师既能写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
• 微信小程序开发

最后，欢迎大家拍砖和提出建议。