新型前端开发工程师的三个境界 后端开发工程师如何快速转前端
初入软件开发这一行时,当时还没有前后端分离这个概念,所有的开发工程师既能写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
您的支持是对博主最大的鼓励,感谢您的认真阅读。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
新型前端开发工程师的三个境界 后端开发工程师如何快速转前端相关推荐
- 算法工程师的三个境界
[与数据同行]已开通综合.数据仓库.数据分析.产品经理.数据治理及机器学习六大专业群,加微信号frank61822702 为好友后入群.新开招聘微信群,请关注[与数据同行]公众号,后台回复" ...
- python序列类型包括哪三种映射类型_python序列类型包括哪三种_后端开发
python中表达式4+0.5值的数据类型为?_后端开发 python中表达式4+0.5值的数据类型为浮点型,因为4是整型,0.5是浮点型,在python中规定整型和浮点型相加,结果是浮点型,这是为了 ...
- python开发需要掌握哪些知识-Python后端开发如何入门,要学习那些系统性的知识?...
Python本身就属于后端语言,学习知识如下: 第一部分:各个领域应用的语言. /> 大家看这个内容,其实你很明显发现,其实各个语言都有他的用处.我们可以说Python是应用最广的.但是暂时还是 ...
- 3.1【微信小程序全栈开发课程】在本地搭建后端开发环境
第二章将前端页面的框架基本搭建好了,第三章,我们来做登录功能,登录功能需要在后端获取到用户信息,返回到前端.所以先来搭建后端开发环境 1.后端开发环境介绍 我们的项目用的是前后端分离开发 前端可以理解 ...
- python后端开发技术论坛_自学 Python后端开发 到什么程度可以找工作?
前两天,在群里收到一个群友(强哥)跳槽成功的消息.真心为其感到高兴.为了找到一个更好的平台,为了拿到更理想的薪酬.他在面试前期做了相当多的准备(机会永远是留给有准备的人,这一点值得学习),写了很多关于 ...
- 开发人员必学!java后端开发岗位
前言 我想对所有程序员说:除了看视频.做项目来提高自身的技术之外,还有一种提升自己的专业技能就是:多!看!书!(本文内提到的书单笔者整理出了一份电子档作为分享,文末有免费获取方式) 网络框架.中间件. ...
- python3web开发教程_三、Python web开发入门
一.web开发介绍1.web开发概述 c/s结构和b/s结构,客户机/服务器结构和浏览器/服务器结构即web开发. b/s结构的优势: 不用通知客户端安装某个软件 不需要通知客户端升级 可以轻松的实现 ...
- Android BLE 蓝牙开发指南(三)外围设备端开发详解
Android BLE开发指南(一)入门基础 Android BLE开发指南(二)中心设备端程序开发详解 这篇文章将会详细讲解低功耗蓝牙外围设备端程序开发的主要流程.对于Android开发者而言,或许 ...
- 码栈开发手册(三)---编码方式开发(高级课程①)
本文转自码栈平台
最新文章
- 如何在国内上medium_在Medium上写作的风格指南
- Python生成器与迭代器详细教程
- 使用kubectl port-forward暴露minikube k8s service端口
- Py函数直接传入root是啥意思_Python内部函数——用处何在?
- 牛客网CSP-S提高组赛前集训营1题解(仓鼠的石子游戏 [博弈论] + 乃爱与城市的拥挤程度 [树上DP] + 小w的魔术扑克[dfs + 离线])
- 论文浅尝 - ESWA | 知识图谱的自动扩充方法
- 增加或修改的存储过程
- mysql 内连接条件_Mysql内连接有OR条件?
- [Linux] 解决Ubuntu12.10 64位google chrome安装Flash后出现couldn‘t load plug-in的问题;
- 说话人识别----技术挑战点
- linux 百科百科手机版,百科题库app-百科题库知识集锦手机版下载v2.0.0-Linux公社...
- I/O error on GET request for http://userservice/user/point/update: userservice; nested exception
- input中使用pattern属性
- 博通无线网卡驱动安装linux,Ubuntu下Broadcom 802.11g无线网卡驱动安装方法
- 软件工程网络工程第二次训练(AC代码和详细解释)(C语言描述)
- 手机日常使用技巧、和手机停机如何免费上网 。好多大家不知道的功能 不看后悔哦
- git不显示贡献度的解决方案
- PTA练习 Java模拟题 编程题
- html网页表格中加超链接,用html给div加类似a标签的超链接(转)
- PDF签名系列(2):PDF的签名值到底存在哪里?
热门文章
- 单片机控制两个步进电机画圆_51单片机控制两个步进电机
- 机器人 蓝buff 钩_lol:机器人史诗级加强,从河道钩蓝buff,对面打野要骂人
- oracle 数据文件recover,Oracle数据库意外删除数据文件的恢复(转载)
- python是不是高级语言_Python是什么语言?老男孩教育带你了解!
- 数学知识巧学JCF(Java Collections framework)
- 在项目中缓存是如何使用的?
- 使用maven时报错Dynamic Web Module 3.1 requires Java 1.7 or newe
- sublimelinter-php 错误代码提示
- 为什么要用webUI?
- 《Java程序设计》第2周学习总结