专栏首页JadePeng的技术博客新型前端开发工程师的三个境界 后端开发工程师如何快速转前端

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

初入软件开发这一行时,当时还没有前后端分离这个概念,所有的开发工程师既能写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 您的支持是对博主最大的鼓励,感谢您的认真阅读。 本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript异步编程的4种方法

    你可能知道,Javascript语言的执行环境是"单线程"(single thread)。 所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排...

    ruanyf
  • Javascript诞生记

    1. 二周前,我谈了一点Javascript的历史。 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的。 只有了解这段历史,才能明白...

    ruanyf
  • Javascript模块化编程(二):AMD规范

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块。 ? (接上文) 七、模块的规范 先想一想,为什么模块很重要? 因为有了...

    ruanyf
  • Javascript编程风格

    Douglas Crockford是Javascript权威,Json格式就是他的发明。 去年11月他有一个演讲(Youtube),谈到了好的Javascrip...

    ruanyf
  • JavaScript 有多灵活?

    JavaScript 是一种灵活的语言,表达力极强,我来举一个例子,保证让很多人大吃一惊。 本文受到了 Kyle Simpson 的文章《Iterating E...

    ruanyf
  • Javascript继承机制的设计思想

    我一直很难理解Javascript语言的继承机制。 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇...

    ruanyf
  • Java设计模式(三)单例模式

    一、场景描述 在采集到仪器数据后,需要将数据发送到lims系统中,通过调用lims系统服务实现数据的上传。 在仪器数据采集组件中实现lims系统服务代理,该代理...

    用户1637609
  • Javascript模块化编程(一):模块的写法

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。 ? 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测...

    ruanyf
  • Javascript 严格模式详解

    一、概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更...

    ruanyf
  • Javascript定义类(class)的三种方法

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言。如果你忘了填写用户名,它就跳出一个警告。 ? 如今,它变得几乎无所不能,从前端到后端,...

    ruanyf

扫码关注云+社区

领取腾讯云代金券