技术栈

主页 > 前端开发 >

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

技术栈 - 中国领先的IT技术门户

初入软件开发这一行时,当时还没有前后端分离这个概念,所有的开发工程师既能写html,也能写后台服务,随着技术的发展,前后端分离成为趋势,目前团队不少人能熟悉的写java后台服务,却难以hold住前端页面的开发,前端页面开发成为瓶颈。针对这个情况,筹划了一个前端培训专题,让后端的同事可以通过学习快速掌握前端开发技能。

愿景

前端技能梳理

我们把前端同事做的事情简单的梳理下,大概可以分为:

效果图 -> HTML还原

将UED设计的效果图还原为页面,这个也是以前狭义的UI完成的工作。梳理下这个工作需要的技能:

  • 熟悉HTMLCSS、熟悉常见布局,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代码
  • 需要良好的设计模式来组织和维护代码,MVCMVVM等概念在前端运用

而随着技术的发展,javascript可以用来开发手机端app(react-native、weex),本质上来说还是开发复杂的单页应用。特别是使用vuex这类状态管理库时,如果懂的后端的数据库概念,可以事半功倍的理解其原理。

总结一下,开发复杂的单页应用,需要具备的技能:

  • 熟悉数据结构和算法
  • 熟悉常用的设计模式
  • OOP思维
  • 模块化开发
  • db思维
  • 熟悉javascript,熟悉es2015es2017

一句话总结起来,复杂的前端应用开发所需要的技能,恰恰是后端开发所擅长的,只是编程语言从java、c#变成了javascript,仅此而已。

新型前后端一体化工程师的三个境界

怎么来评价一个人的前端能力,简单起见,划分为三个境界:

  • 第一层(必须具备)

    • 依葫芦画瓢
    • 可以根据还原的HTML或者UI框架,实现简单页面的开发和数据绑定
    • 熟悉HTML常见标签、CSS盒子模型、CSS优先级,常见布局
    • 会使用Vue.js/jquery,Iview、Element等工具库
  • 第二层(努力可以达到)

    • 可以熟练的开发单页应用
    • javascript了然于心,es20152016信手拈来
    • 熟悉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
  • 微信小程序开发

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

责任编辑:admin  二维码分享:
本文标签: 前端jsjavascript熟悉VueHTML