后端工程师怎样快速掌握前端开发技能

描述

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

微信小程序开发

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分