Web开发之三：前后端开发任务量分析与比较

这一年来的项目，无论是个人中心、文库还是学科测评，每次都会被一个问题所困扰，那就是如何估量前后端的任务量、如何确定前后端的人员比。

在采用分工模式之后，经过两个项目的开发，和大个、阿黄、建坤可以明显的感觉到前端开发在整个项目中耗时最多，但是究竟占多大的比例，我们却没有仔细的去思考。每次项目安排人员，前后端人员比大致为1:1，这明显是不合适的，所以在项目后期，后端人员要么闲下来了，要么硬着头皮去写自己不擅长的前端代码。这些都是当下存在的问题，经过学科测评的开发，我们开始正视这样一个问题，而自己也参与了这次前端的开发，抱着“不入虎穴焉得虎子”的心态，从中去体会前端开发的工作量、试图去发现前端开发耗时的地方，希望通过项目结束后的反思，从而在下次的开发前能够对项目做出合理的进度预估、工作量预估、人员配比预估。

从四个方面来展开今天的话题吧，前后端开发任务量分析与比较。一个项目从需求阶段原型的反复修改到确认，再到最后的软件开发完毕。抛开原型和静态页面的制作过程，单说前端交互的开发以及数据的展示，这个在项目中看似冒不起眼的，与核心业务不相关的开发，究竟在项目中占据多少时间呢？20%：哥们儿你太逗了，没做过前端开发吧？40%：哥们儿，你有些靠谱了。60%。哥们儿，这是正常比例。哈哈，还是看看下面的阐述吧。

首先，项目开发中前后端各自的任务都包括哪些？

前端：

1）交互效果：如提交方式、删除和更新数据的方式、获取数据方式、消息提示方式等。

2）表单校验及提交、选择框、层的显示与隐藏、动态菜单效果等

3）数据的获取及展示

4）JS脚本编写

5）考虑前端框架、考虑浏览器兼容性、考虑跨域请求等各种问题

6）如果没有原型，还要自己写样式、写表单、调整界面布局等...

后端：

1)
数据的录入与存储，也就是持久层的工作

2）业务流程的实现，也就是业务层的工作

3）基于业务层的单元测试

前后端：共同定义接口(包括传入参数、传输数据格式等)

从以上的工作量可以看书，后端的工作是相对有规律的、集中的工作，而前端的开发则有这么几个特点：工作繁琐、芜杂；工作量的大小需要看别人“眼色”，如果没有准备原型和静态页，就要自立更生；需要兼容多种业界标准（浏览器的争端）。

其次，项目开发中前后端各自耗时的地方？

前端：

1）各种互交互效果的实现与测试

2）浏览器兼容性的测试

3）页面样式细节的调整

5）JS脚本的编写

4）复杂交互效果的设计与实现

后端：

1）单元测试：如果进行完备的单元测试的话，这个会比较耗时

2）复杂功能的设计与实现

在这次项目的开发中，个人感觉在编写JS脚本时，耗时多些，因为不太熟练，同时在样式调整，复杂交互效果的实现上，都耗时较多。太过于琐碎。

再次，前后端开发任务量分析及比较？

从以上的两段内容来看，前端确实较后端更耗费时间，这是不争的事实，随着公司对于用户体验度越来越重视，对前端的要求会更多，对前端的标准也会更高。

前端开发，色系搭配、内容展示、页面布局这些是UI设计师考虑的，而程序员做的就是上面列举的那些。而后端代码目前大部分都是自动生成的，基于这样一个事实，后端(Java/Sql语句)与前端(HTML/JS/CSS)的工作量比应该在1：2--1:4之间，而耗时比应该在1:3--1:7之间。也就是说一个项目，无论大小，前端的耗时在整个开发过程中，大约会占到60%左右的时间。

1）后端的代码是一下一大片，基于一个模型，将它的CRUD全部完成。前端的代码是一次一个，一个一个页面挨着调试。

2）后端的代码目前是automatic
generation，前端则是hand code.

3）后端的代码只要业务逻辑确定，就可以埋头开发，而前端则对UI的依赖较大。

最后，面对这种时间比，我们该如何做？

基于以上的分析，我们明确了前后端的工作量以及时间比，明确了开发过程中前后端各自耗时的地方，就可以做针对性的改进:

项目人员配置：在项目人员配置上，当前我们是1:1的配置，需要调整，从1:1调整到1:2或者1:3，虽然前后端耗时比在1:5左右，但是目前的人员达不到这个要求，而且，给一个后端人员配备5个前端，有可能会适得其反。兵不在多在精，更注重配合。

项目开发模式：调整开发模式，当前的模式存在问题，前后端开发时间不同步，这个在下一篇提到。

项目准备：在开发之前，尽可能的确定需求，最坏的情况下，UI设计师能够把主要的静态页面设计完成，后续的可以继续开发。同时，避免程序员自己去组织页面。

前端技术：

1）在开发之前培训前端技术，争取参与的每个人都是熟练工种，这是项目速度和质量的保证。

2）引入成熟的js框架，如JQuery、ExtJs，类似于表单校验、弹出框等的都采用成熟的。

3）组件化的思想。我们这次在讨论中也提到了这些，例如使用JQuery的表单校验、Jquery
UI、Chat等。前端的代码及开发也往自动化上靠拢。

4）使用多浏览器测试工具，简化前端测试

后端技术：

1）优化代码生成工具，最小化的减少人工修改过程

2）在耗时的单元测试上进行培训，如果有效的测试，经过严格测试后的代码，才不会在后期返工。