前端协作流程

来源:http://www.51testing.com

  在拿到交互原型或视觉稿以后,前端工程师要能够灵活应用前端知识技能,完成相应的功能。在实际的企业环境中,不只是有前端工程师,更多的场景和项目是通过团队多人协作完成的。作为前端工程师如何与团队中其他角色进行协作呢?本文将详细介绍前端工程师协作流程

Web系统

  在介绍协作流程之前,首先简单地了解Web系统的结构

  从宏观上来说,Web系统是部署在服务器上用于为web客户端提供服务的系统。不同的Web客户端根据不同的需求,发送请求到服务器上部署的Web系统上。Web系统根据需求,返回相应的结果,最后,通过Web客户端展示给用户

  Web系统在服务器上的组织结构一般为MVC架构,MVC分别代表数据层、视图层和控制层

  数据层(Model):封装数据管理操作(如数据的CRUD)

  视图层(View):展示数据模型,提供人机交互

  控制层(Controller):处理用户请求,委托数据层进行数据相关操作,并选择合适的视图层返回给用户

  当Web客户端向服务器发起请求时,服务器的Web系统要做如下处理

  1、客户端发送请求,服务器Web系统的控制层接受到请求,并进行解析

  2、控制层请求数据层进行数据的相关操作

  3、数据层根据需求筛选出相关的数据模型,并返回给控制层

  4、控制层将收集的数据模型转交给合适的视图层进行模板整合

  5、视图层将数据模型和模板整合之后生成页面代码,返回给控制层

  6、控制层将结果返回给Web客户端进行展示

  在Web系统的各个分层结构中,与前端密切相关的是视图层。接下来,从技术栈角度,来介绍视图层的内容

  下面是用于完成视图层需要掌握的知识技能图,每个知识技能都具备了完成视图层某一部分的能力

photoshop:切图  html+css:页面制作  javascript:前端交互逻辑  template:结构与数据分离和整合  java/php/Node:后端业务逻辑

  前端工程师职位出现之前,是一个美工的职位,需要使用photoshop、html和CSS来进行切图和页面制作

  随着ajax的出现,产品的用户体验有了更高的要求,web系统也变得越来越复杂,这种协作方式的弊端就越来越明显

  首先,从工作方式来看,美工输出的静态页面交给后端之后,转换成模板。这样,一个相同的内容以两种不同的形式存在,并且由两个技能差距较大的角色维护,这样就为复杂系统的后期维护带来了隐患

  其次,为了提升用户的体验,系统的人机交互变得越来越复杂。因此,前端所需的专业化技能也越来越高,这时再由后端来兼做前端的工作显然已经无法满足需求

  最后,Web产品的一个重要特性就是更新非常快。因此,需要分工协作方式快速响应需求的变更。而在这种分工模式下,一个需求必须由视觉和后端共同来完成,很大程序降低了需求的响应速度

  因此,在整个技术环境的推动和项目实际需求的驱动下,前端工程师的职位就出现了。有了前端工程师之后,分工模式发生了变化

  视觉工程师完成视觉稿,输出视觉稿给前端;后端工程师完成后端的主要业务逻辑,给前端提供数据和接口;剩下的工作都由前端工程师来完成,包括切图、页面制作、前端交互逻辑、模板转换等工作

  在这种模式下,各个角色输出的内容完整,且相互独立,互相之间没有耦合性,各个角色专注的也是自己领域内的技能,产品的各个部分都可以做到极致,也更容易产出高质量的产品

  随着Web技术的进一步发展,如Nodejs的出现,使得javascript脚本也可以运行在服务器上。既然控制层是为视图层服务的,控制层的业务逻辑很大程度也取决于视图层的交互需求。这样,控制层也可以由前端工程师来负责。这样的话,前端也会涉及到部分后端相关的业务逻辑

  这样使前端工程师可以在后期转换成全栈工程师(Fullstack Developer)。当然,这种分工模式还处于探索实践的阶段

角色定义

  由前面的Web系统得知,完成一个Web系统,至少需要三种角色的相互协作:视觉工程师、前端工程师、后端工程师

  视觉工程师需要精通视觉相关的技术,主要负责交互原型到视觉稿的转化

  前端工程师需要精通Web开发技术,主要负责系统前端交互逻辑

  后端工程师需要精通后端开发技术,主要负责系统后端业务逻辑,为前端提供数据和接口服务的支持

  作为前端工程师需要完成系统前端交互逻辑,需要具备PHOTOSHOP、HTML、CSS、JAVASCRIPT、TEMPLATE、Node等技能

  如果每个技能都进行深入研究,需要大量的精力和相关的经验。考虑到不同角色的协作效率,前端部分根据其偏重方向的差异再做切分

  前端又可再细分为页面工程师和前端工程师。前者偏重于视觉稿的还原和页面的制作,更注重和视觉工程师的协作;后者则偏重于前端交互逻辑的实现,更多的与后端工程师进行协作

  页面工程师技能要求如下

精通切图技术 (Photoshop)  精通页面制作 (CSS,HTML)  熟悉前端开发技术 (JavaScript,Template)  了解后端开发技术 (Java,Node...)

  前端工程师技能要求如下

精通页面制作 (CSS,HTML)  精通前端开发技术 (JavaScript,Template)  熟悉切图技术 (Photoshop)  熟悉后端开发技术 (Java,Node...)

 【项目开发时间】

  以一个单角色开发一个项目的时间为20天为例,则各个角色时间分工可能如下所示

页面制作:15%(3天)  前端逻辑:35%(7天)  后端逻辑:50%(20天)

  而如果采用多角色开发,页面开始制作时,后端工程师可以开始梳理后端的业务逻辑。当页面有输出时,前端工程师可以开始进行前端的业务逻辑。整个项目大概缩短了50%的开发时间

顾翔凡言:

读书就像旅游,精读就像自由行、泛读就像跟团游。精读为了专业掌握某个技能;泛读为了扩大自己的知识广度;跟团游为了增加自己的旅游范围;自由行为了深入了解当地文化。测试也如此,对于同一产品广泛的广度测试与某个模块的深度测试全是不可缺少。根据帕托累斯原理,80%的Bug分布在20%的模快,所以为了有效的节省测试时间,我们需要进行广度测试,找到20%缺陷密集模块,然后进行深度测试。

本文分享自微信公众号 - 软件测试培训(iTestTrain),作者:软件测试培训

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-30

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 接口自动化测试:快速敏捷迭代的业务类产品适合做接口自动化测试

    当前互联网产品迭代速度越来越快,现在很多业务类产品一周发两个版本,甚至更多。每次发版之前都需要对所有功能进行回归测试,在人力资源有限的情况下,做自动化测试很有必...

    小老鼠
  • C++语言的单元测试与代码覆盖率

    直接交付没有经过测试的代码是不太好的,因为这很可能会浪费整个团队的时间,在一些原本早期就可以发现的问题上。而单元测试,就是发现问题一个很重要的环节。

    小老鼠
  • H5页面测试总结

      在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方...

    小老鼠
  • 既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?

    在你开始阅读这篇文章之前,一定要做好心理准备。因为我写的 90% 都是在发牢骚,只有最后大概 10% 介绍 CSS 技巧之最佳实践。提前给你们打好预防针啦。

    疯狂的技术宅
  • 肚子上挂张画就能隐身:AI完全看不出我在哪,更看不出我是人类了 | 开源

    划重点,是隐身不是变身,AI没有把你识别成其他物件,是全然忽视你的存在,只看到旁边的兄弟。

    量子位
  • 【深度学习预测极端天气】更好捕捉台风“天鸽”轨迹

    【新智元导读】台风“天鸽”在深圳一带掀起了字面意思上的狂风暴雨,洗刷了持续的高温,但也引发深圳市有史以来第二次台风红色预警。不仅如此,“天鸽”强度一天连跳三级,...

    新智元
  • Git使用教程-idea系列(idea、webstorm、phpstorm、androidstudio)中git使用教程

    码农笔录
  • 星巴克二股东为何投资其死敌瑞幸?

    2018年5月,“咖啡新物种”瑞幸发布致星巴克的公开信,呼吁给行业一个公平竞争的机会,让中国消费者有更多选择,这被视作是瑞幸与星巴克的“矛盾”公开化,两者的竞争...

    罗超频道
  • github 解决冲突

    简单、
  • 【Git 第9课】 撤销修改

    前面说了,如果你手滑删掉了一个文件,可以用 Git 帮你找回来。同样,如果一个文件被你改来改去面目全非,直到程序无法运行,你累感不爱想要回到开始的状态,Git ...

    Crossin先生

扫码关注云+社区

领取腾讯云代金券