不懂技术如何判断一个页面的开发复杂度-阿里云开发者社区

开发者社区> meikidd> 正文

不懂技术如何判断一个页面的开发复杂度

简介: 做为一名苦逼前端码农,写给一起奋战的产品经理们。
+关注继续查看

做为一名苦逼前端码农,写给一起奋战的产品经理们。

最近的聊天中产品经理说:“我不懂技术,所以当初也判断不好这个页面在技术实现上有多复杂”。于是想起来有好几次:

  • 有好几次,在产品经理眼里很简单的需求,可最后出来的技术方案非常复杂,开发工作量特别大,导致整个项目不得不重新评估。
  • 有好几次,朋友问我能不能给他做个小游戏,很简单的网页小游戏哦,像QQ农场那样的。

有时候在想有没有一种简单的方法,让不懂技术的人能判断一个页面的前端复杂度,于是有了这篇文章。希望能让前端码农和产品经理能更好的互相理解,合作如丝般顺滑。

下文总结三个基本原则,用这三个原则可以大致判断一个页面前端复杂度。

注意:

  1. 本文只适用于辅助产品经理理解页面复杂度,不能代替前端工程师评估工作量,每个网站的业务模型、架构设计都不一样,开发起来也大不相同。
  2. 本文只适用于理解前端开发复杂度,不包含服务端开发。

原则一 - 交互越多越复杂

先看如下两个页面:
1.png

左边的页面内容丰富、样式多样。内容包含页头、导航栏、tab标签、文章列表,每篇文章又包含回答计数、作者、最新回答时间、标题、标签,布局上有各种排列方式,还有各种色彩。

右边的页面看起来只有简单的3个输入框、2个勾选框、2个按钮,页面内容整体看起来并不丰富。

左边的页面看起来比右边的页面复杂,但实际上开发起来右边的页面复杂得多。左边的页面可以称之为“纯展示型页面”,这类页面的显著共同点是只有数据的展示而不能与用户发生交互。右边的页面称之为“富交互型页面”,常常包含以下交互元素:

  • 输入框、按钮
  • 单选、多选、下拉选择
  • 展开、收起
  • Tab切换
  • 分页、滚动加载
  • 弹窗

对纯展示型页面来说,工程师只需要处理好页面的样式就好,不用考虑太多其他问题。另外,这个页面的文章列表部分,虽然内容很多,但实际上是相同结构的不断重复,在工程师眼里如下图所示:
2.png

工程师只需要把这个结构的模板写好,再填入不同的数据。常见的纯展示型页面可以有图片、表格、文字,以及这些元素的各种混合排列。

对富交互型页面来说,工程师不仅要写好页面样式,更重要的是处理用户的交互逻辑。交互逻辑比纯展示逻辑复杂得多,比如输入框获取光标时如何响应、失去光标时如何响应、用户输入特殊字符如何处理、用户鼠标点击如何处理,还有些页面内容是需要根据用户的操作从服务器端查询实时数据展示出来的。其二,看起来差不多的两个按钮或者两个输入框,包含的逻辑却完全不同,比如用户名输入框和手机号输入框

  • 用户名:6-20字符、英文字母和数字、不能和其他用户重名
  • 手机号:11个字符、只允许数字、一般以"1"开头

尽管交互元素看起来样子都差不多,但实际上每个元素背后的隐含逻辑都不一样,开发成本也就大很多。一个页面中包含的交互元素越多,则页面开发越复杂。

原则二 - 组件化程度越高越简单

每个网站都会有一些重复出现的元素,比如日期选择、上传图片、弹窗、Toast提示等等,为了最大化的复用这些相同功能的代码,提高开发效率,大多数开发团队会建设一个组件库,里面包含各种常用组件,业界比较著名的组件库有 bootstrap 和 ant design。有了这些组件,工程师开发页面就像搭积木一样简单,把这些组件拼凑在一起,再加上适当的业务逻辑代码,就可以开发出一个页面。

产品经理应该适当了解你们开发团队的组件化现状,如果基于这些组件设计页面,那对工程师来说会减少很多工作量。如果能从产品的角度对组件库提出改进建议,既能让工程师们从中受益,也能更好的支持产品开发,达到双赢。相反,如果产品形态和交互行为始终处于变化之中,那工程师也很难沉淀出一套适用的组件库,开发效率也大打折扣。

原则三 - IE浏览器

要求兼容 IE 8 及以下浏览器的页面,复杂度增加10000000000000000倍。

开发者的因素

由于主题是“页面复杂度”,应该是页面本身的属性而与开发者无关,所以没有列入三大原则之中。但如果回归到现实需求中,开发者实在是无法绕开的一个关键因素。

1、 开发者综合素质。除了技术实力之外,还有沟通能力、需求理解能力、责任心等,这些大家工作中已经有很多感触,就不再赘述。

2、 开发者对业务的熟悉程度。这一点尤为重要,也是容易忽视的一点。有时候会出现这样的情况,同样的一个需求,小A只需要1天搞定,小B则需要3、4天,很有可能是因为小A一直是这块业务的开发者,而小B刚刚接手这块业务。由于代码本身的强逻辑性特征,哪怕同一个开发者去读自己三个月前写的代码,即使是最简单的一段几百行的代码,也很有可能不太记得其中的逻辑。对接手新业务的开发者来说,要读懂前人的几千行甚至是上万行代码绝对是非常艰巨的任务,会需要更多的时间和精力。

一个小故事

最后分享一个小故事,在上家公司合作过一位产品经理,有一次我们周末有事找他,他说他没空,报了java培训班,要上课去了。。。要上课去了。。。要上课去了。。。快要被抢了饭碗的感觉。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4068 0
SNMP从入门到开发:进阶篇
管理信息库:MIB 我们要扩展mib首先必须清楚mib是如何定义的,用的什么语言,有哪些约定,遵循哪些规则等等。这些基本东西掌握过后,我们就可以很轻松的来写自己的mib文件了。 所谓管理信息库,或者MIB,就是所有代理进程包含的、并且能够被管理进程进行查询和设置的信息的集合,或者叫管理对象的集合,在RFC 1213 [McColghrie 和Rose 1991]中定义了MIB-II,即第二版的MIB库。
931 0
04.Eclipse下Ndk开发(以文件拆分合并为例模拟一下开发过程,参考文件加密的过程)
(创建于2017/12/6) 1.工具类PatchUtils package com.ren.ndk_file_patch; public class PatchUtils { static{ System.
816 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4485 0
SNMP从入门到开发:基础篇
SNMP协议入门 1、引言 基于TCP/IP的网络管理包含3个组成部分: 1) 一个管理信息库MIB(Management Information Base)。
904 0
fbh
js 怎样判断用户是否在浏览当前页面?
可以通过document.hidden属性判断当前页面是否是激活状态。 兼容性:IE10+,Firefox10+,Chrome14+,Opera12.
1287 0
offline页面开发常用方法及页面控件验证
offline页面开发常用方法及页面控件验证,对一些CheckBoxList操作进行封装,新人可以直接使用该代码。 1、返回上一页网址 /// /// Description: /// 返回上一页网...
690 0
+关注
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载