1入产品深似海。身为产品汪,我想说产品汪和程序猿是两个物种,1个来自金星,1个来自火星,脑结构、脑回路截然不同,关键是他们还忘记!
虽然说“人人都是产品经理”,但也造成产品成为全部行业“鄙视链”的末端。
C开发看不起做C++开发,C++开发看不起Java开发,Java开发看不起C#开发,C#开发看不起做前端开发。但他们确都有个共同点,就是1致觉得产品是超低智商生物。
沟通不容易,但不能不沟通!
听不懂的时候怎样办,如果只是干等,那同等挖坑埋自己。和开发沟通之前1定要做足作业,否则分分钟被喷!10几个开发1起喷你,那就是群殴。
希望这篇文章能给刚入门的产品补点技术能量,关爱程序猿。
曾你以为,产品的平常黑话是:
我不管,反正你要实现!
做这么点东西要那末久吗,分分钟就可以弄定吧!
要不你先做1版,先看看效果再说,不行再改。
我的需求很简单,很简单的,照着这个做就好了,1模1样就好!
现实却是:
好的,我今晚加班,晚上把原型和RFP邮件发给你们。
别慌,我去跟领导申请下增加开发资源!
稳住,你们先光荣1把吧,晚上1起加班呀。
如果你还行走在互联网圈子里,基础技术知识是产品必须要了解的。
我平常游走在1群前后端狂魔中,被灌输很多毒药,但也只能自行逐一消化,现在逐一吐露。
1、少不了的接口
说到接口,它“无处不在”,当打开APP的时候,你会看到1个菊花转啊转啊转呀,然后加载出来的那些文字、图表、炫酷的动画就是前端ajax通过接口提交数据从后端要求回来的数据。
1个完全的APP项目1般都是由客户端(前端)和服务端(后端)相结合。
- 接口,就是后端将数据源或数据库提供给外部利用去调用的1段程序。
- 接口可以完成某个任务,但是它需要有相应的输入(即入参)。在工作中,少不了要定义5花8门的接口。
后端定义好URL,前端依照规定的格式要求它,它就会把数据给你,这就是接口。
前端负责将数据展现给用户并快速响利用户所有的操作(点击、长按、左滑、右滑、下拉刷新等等),后端则负责将数据在服务器上进行1系列处理(增、删、改、查)后返回给前端。
前端负责拿到数据并处理数据展现出来。
千万不要觉得前端工作简单,不就是写个html页面展现数据,但是他们需要斟酌各种阅读器的兼容性、各种土豪、土鳖等装备适配性,响应式设计、VR、AI、3D效果层见叠出的新概念新挑战,且行且珍惜。
接口4要素:
- 方法 :Post(增)、Delete(删)、 put(改)、Get(查)
- url: /userinfo
- 要求参数:字段、说明、类型、备注、是不是必填
- 返回参数:code/message/data
看个示例:
{
“code”:200,
“msg”:“成功”,
“time”:“677788888”,
“data”:{“name”:“张3”,“age”:“23”},
}
规范的接口得保证:
- 要保持好身材,瘦,瘦,瘦!尽可能前端不要处理业务逻辑、不进行金额计算、且减少处理要求参数的校验;
- 要有可拓展性:文章、图片最好由后端来提供;
- 要可靠安全、性能优化、体验流畅。
在项目进行中,接口联调尤其关键。
接口联调,就是[前后端平心静气、坐在1起校订数据]==[1言不合就开怼、项目1完就吹水。
联调主要是为了解决数据格式问题和数据参数问题。
这里提1下接口文档。
接口文档1般由后端进行编写,需要和前端1起协商补充,注意要沟通、沟通、沟通!在项目开发进程中,前后端工程师会根据这份文档为主,要共同保护和更新它,直到项目结束。
- 它可让前后端工程师围绕1个统1的文档进行沟通交换开发,减少沟通本钱;
- 项目保护中或项目人员更迭,方便后期人员查看、保护,减少学习本钱;
- 也可1定程度上体现程序猿的表(wen)达(mang)能力;
- 最重要1点,它可以是后期甩锅的强有力证据。
通常,前端开发人员和后台开发人员是不同的人。固然,部份种子选手二者统筹,曰全栈工程师(仰望大神)。不过,前后真个思惟模式不1样,要打造1个全栈工程师,学习本钱极高。
1般来讲,核心业务都会分离开,毕竟人的精力有限,要保质保量保安全,1个人统筹不过来。
附上1小段前后端联调接口平常对话:
后台:接口好了,你试试。
前端:不行,500。
后台:我看看。
半个小时飘过。
后台:好了,修复了个bug,你再试试。
前端:不行呀,还是500。
过了很久……
后台:好了,我重构了下代码,参数改了,接口文档有更新,你看看。
前端:好的(心里MMP)。
产品:下周1提测哦。
前端、后台:网易云音乐-凉凉……
2、坑不死你的“写死”
不是你们说的那个编剧又把男主角写死的那个意思。
回到正题,我们前面说到了接口可以要求到数据。
对1个页面而言,页面的数据1方面由前端直接写死,也就是静态数据,另外一部份需要有后端接口提供,前端需要从后端要求接口拿到数据并依照要求展现到页面上,比如淘宝的商品列表。
但数据有静态数据和动态数据,有些数据可以由前端写死的,雷打不动。这就是静态数据。
例如某些APP首页下方的那些TAB栏,就是写死的,由于那些TAB基本不会有变化。
类比你去饭店吃饭,你点了个螺狮粉,老板问你要不要辣,你头脑1热就说加辣,那端上来的肯定是红彤彤的1端,基本就这样了。如果你觉得辣,那你只能重新点1碗。
- 优点:减少和服务端进行要求。
- 缺点:后期如有扩大,要填坑。
3、高逼格的组件及框架
跟前端小伙交(si)流(bi)多了,组件这个词,除非你聋,不然1定会有所耳闻。
前端在写页面的时候,发现很多页面有类似的地方,类似的地方功能也相同。比如都是1个表单,1个banner轮播图,1个下拉框。So,为了提高代码复用性,减少重复性的开发,就把页面封装起来以便下次复用,这就是1个组件。
组件可以看做是自定义的CSS+HTML+JavaScript重新组合,它是1种可拼装的功能集合。
简单说下HTML+CSS+JavaScript,举个某宝的首页,首页看到的图片、文字都是1个个的HTML元素,然后页面的背景色彩、图片大小,按钮位于全部页面的甚么位置,这就是CSS做的。
至于JavaScript,简称js,可以看成首页的大脑,主要实现内部的逻辑,比如按钮点击以后怎样处理,界面之间如何跳转,甚么时候刷新信息,如何要求数据。它需要把后端返回的数据添加到页面中,或让元素运动起来,或是改变页面的CSS,或是操作HTML元素。
类比产品Axure作原型图,每一个页面都需要有顶部状态栏,我们会应用几个按钮、矩形框进行组合,命名为母版。
类比我们之前高考备战采取大量的习题战术,我们会有1本错题集,学霸们会怎样利用这本错题集呢?他们会依照考点对错题集分类。对组件也是1样,有类似的功能可以归并为1类。
你写的代码愈来愈多,你封装的组件就愈来愈多。渐渐的,你就有个组件库,包括样式组件、UI组件、基础组件、业务组件等等。Perfect,组件还可以进行再组合,把组件再整合起来,是1种组件间相互关系的设计。
类比你手机装了支付宝APP,它可以用来买理财产品、可以用来买保险,可使用第3方服务,但是对1些人而言,他不需要这些功能,他只是把钱放在余额宝里,偶尔迷茫的时候去看1眼。
框架不是越大越好。框架只需保存基本的功能,但是它会提供方式给你去扩大,这才是好的框架。
4、每天念道的DOM
- DOM全称Document Object Model,翻译就是文档对象模型。
- DOM是1系列功能集合,是处理HTML和XML文档的编程接口。
- DOM允许开发人员从文档中增、删、查、改页面数据。直白的讲,它给文档提供了1种结构化的表示方法,可以改变文档的内容和显现方式。
- DOM技术使页面可以动态地变化,如可以动态地显示或隐藏1个元素,改变它们的属性,增加1个元素等。
- 可以把DOM认为是页面上数据和结构的1个树形表示。
- DOM的功能是把阅读器支持的文档(包括HTML、 XML、 XHTML)都当做对象来解析。
请看下面这个HTML文件:
html
head
titleDOM/title
/head
body
h1DOM Lesson one/h1
phello world/p
/body
/html
你可以看出,最外面1层是html,html嵌套着head和body标签,head嵌套着title标签,body嵌套着p标签。
同理,DOM也是1层1层嵌套着,这类层级关系不是随意定的,是有1定的规则。
- 这可类比于我们寄存的文件路径: 我的电脑-CDEFG盘-学习资料-日本语音-岛国电影。
- 也可类比于我们博大精深的亲人关系表。
DOM它易用性强,并且遍历简单,直接操作DOM无所不能。
但操作DOM效力低,解析速度慢,内存占用量太高,且DOM机制中所应用的大量对象的创建和烧毁影响效力。
所以出现了虚拟DOM。这个我就编不下去了。
5、Cookie、Session、Token哪家强
在传统的web利用中,服务器端通过1种存储机制保存了会话信息(Session)。
Session可以理解为后台服务器的1小片内存。
每一个会话信息都对应1个唯1的编号:Session ID,这个字符串随机产生,服务器端会把Session ID放在Cookie里面,Cookie数据寄存在客户端。Session的状态是存储在服务器端,客户端存的只有Session id。
Cookie是服务器给客户真个凭证,可以理解为存在客户真个1个txt文件。
里面包括你登录信息之类,这样你下次在登录某个网站,就会自动调用Cookie,取到Session id到后端服务器获得对应的Session具体信息,进行数据的保存和修改,但Cookie寄存在客户端易被盗用篡改,不是很安全。
这类比于你去逛超市,你寄存了私人物品在储物柜子里,它会给你个取件的纸条,等你逛完超市后,就能够扫描纸条打开柜子。
在前后端没有分离的时候,前端页面常常都属于后台管理,这个大部份是同源要求。
但是在前后端分离后,这个时候1般触及到跨域,跨域的要求不携带Cookie,要携带Cookie又要后台指定允许的跨域地址,比较麻烦,因而出现了Token。
Token就是令牌。
Token1般是由uid+时间戳+装备号+自定义规则经过算法加密后的1串字符串。字符串通常很长,难捏造。
这类比于服务器生成了1个单号返回给客户端,客户端带着单号过来要求要求器,这时候候怎样证明单号是服务器生成的呢,可以通过单号来检查。
比如你授权(登录)1个程序时,它就是个根据,判断你是不是已授权程序;Token的状态是存储在客户端。
在APP开发中,都是使用Token作为验证后的凭证。
1般采取的措施是客户端输入用户名和密码,客户端登录后,服务器端会返回1个Token,以后所有的要求都会带着Token,客户端把Token放在要求头(header)里,在利用中1般使用https会增加安全性,拿到Token才能进入页面内。
后端通过检验要求头判断是不是登录、是不是正常要求、是不是安全后再提供服务。
6、程序猿又说要重构
开发人员常常抱怨 :
“这么烂的代码,保护不了啦,需要重构!”
“这代码怎样能这么不优雅?谁来重构1下?”
我。。。。忍不住给你们这些出色的工程师打Call。
重构是对代码做任何更动,以增加可读性或简化结构,而不影响输出结果。
- 轻1点:优化原有代码,改良代码质量,比如3行代码用1行就解决,下降复杂度。
- 重1点:完全重写,几近不用原来的代码。
- 再严重1点说:为了有事干!知道它的重要性了吧!
重构成功的话,从长远来看应当是利大于弊的,对用户而言:更快、更流畅、更美观;对码农而言:易保护,更容易读,1看就是优雅的代码,特别是人员活动比较大的项目。
作为产品经理,我表示:重构有风险,重构需谨慎,得做到:
1. 充分的测试!!!!
看似简单,但是常常都做不到,项目成员对充分的定义标准都不1样,产品经理永久都觉得没有测试足够,也不可能百分百的覆盖率。这个时候,利用自动化测试工具未免不是1个有效途径。
2. 充分的沟通!!!!
很多需求提出方不理解为何要重构,但他们却要为重构买单,在他们看来常常就像个骗局。
对新功能的重构,应当融入到正常开发进程中,如何让上帝理解重构的价值,反思1下遇到的问题:是由于早起技术架构的缺点,还是业务领域模型变动太大?如何避免今后再次遇到,得到上帝的理解和认可,这相当重要。
3. 充分的思量!!!!
斟酌时间本钱!人力本钱!学习本钱!尽可能避免大的重构,这样可以减少多方的工作量,也会减少项目延期的风险。
对1些核心功能,进行重构之前尽早告知团队,并重点论述下重构的周期、目的和会触及到的业务区域,这样做1方面可让项目经理公道地安排排期。尽可能避免上线前进行重构,由于风险没法预估。
7、调试、打包、部署
啊,不是那个你去店里点餐,跟老板说的那个打包!
程序猿做项目的时候,会在本地搭建1个开发环境,用于调试自己的代码。
程序猿说的码代码只有程序猿自己才认识,计算机根本不认识,计算机只认识2进制。
打包,就是将自己写的代码(Bug)打包成1个文件,即2进制文件(010101这类格式)。
但要辨别下,前真个打包,实质是合并紧缩处理前端资源文件:包括HTML文件、js文件、CSS文件、图片、字体、svg等等。
前真个打包工具, 流行的有:Gulp、Grunt、Webpack等工具。
打包工具可让开发网页的时候使用import export require,像后端程序员1样进行模块化开发,每一个模块异步要求加载,可以减少要求提高性能,这样阅读器可以通过少许的要求获得到所需要的前端资源,节省流量,加快页面加载速度,关键还起到混淆代码的作用。
打包是为了运行,打包完了就代表整装待发了。
项目要上线的时候,程序猿要将自己的代码部署到生产环境上。这需要你准备就绪:版本号要高于线上版本、去除1些调试信息、混淆、签名、做对齐等等。
部署,1般指服务器端程序上线,但是要给程序提供所需要的资源,让它好好的运行起来。
就像你养花,你如何让它在花盆里面存活,你得有空气,有水,有养料。
一样,要运行起你的1大坨代码,就要配置好环境,比如使用几个服务器、放在甚么服务器上、开甚么端口、怎样才能扛住大量的要求等等。
8、负载均衡有1手
负载均衡(又称为负载分担),英文名称为Load Balance。
官方说法:
将负载(工作任务)进行平衡、分摊到多个操作单元上进行履行,例如Web服务器、FTP服务器、企业关键利用服务器和其它关键任务服务器等,从而共同完成工作任务。
通俗来说:就是将用户要求分发到N台服务器,1台服务器需要处理的任务分给N台服务器来处理,但不能简单理解为分配给所有服务器1样多的任务,由于服务器的承载能力各不相同。N台服务器1起处理任务叫集群。
负载均衡装备不是基础网络装备,而是1种性能优化装备。
负载均衡的核心就是“分散压力”,使所有的服务器都不会超过自己可承受的程度,避免宕(dang)机。
为何要有负载均衡,对网络利用而言,其实不是1开始就需要负载均衡,当网络利用的访问量不断增长,单个处理单元没法满足负载需求时,网络利用流量将要出现瓶颈时,负载均衡才会起到作用。
类比你每逢节假日逛超市的时候,就可以看到“负载均衡“的例子,收银员高峰期只能服务10位顾客,当作活动时有20位顾客需要服务的话可能就会排长队,这样购物体验将会很差(类比客户抱怨系统/网站访问太慢)。最简单的办法就是再招个营业员,重新开通1个收银窗口。
9、F5不是1个快捷键
其实,1说到负载均衡,就会联想到F5=刷新快捷键吗?就服你!
其实F5是只是负载均衡产品的1个品牌,其地位类似于诺基亚在手机品牌中的位置。
F5作为1级路由器,它是流量总入口,相当重要,由于它扛着外界所有的要求压力。
有人会问?为何不弄多台F5?
F5如此出色稳定,固然贵呀!贵呀!贵呀!死心了吧。
所以在它这里不会去做运算,它需要做的就是转发流量<,转发给2级路由器nginx,nginx需要解析协议内容,做更加精细化路由。
F5和nginx其实只是负载工具,只是分工不同而已,这是他们的价值所在。
10、负载均衡实现123
1. 重定向
这类方式,是通过将要求全部发送到前置机,由前置机通过算法得出要分配给那台利用服务器,然后响应给客户端,由客户端重定向到利用服务器的1种方式。
类比个例子,1家公司举行招聘活动,每一个人都可能要去往不同的楼层进行投递简历,所有的面试者都会先集中在1楼前台处,然后由前台MM为大家逐一查询所对应的楼层,然后告知每个面试者对应的楼层,由面试者自行前往自己的楼层投递简历。
你可以看到,每个的要求,都要重定向1下,效力不高。
2. 反向代理
这类方式,是通过在前置机使用反向代理方式,将要求分发到利用服务器,客户端无需再要求1次,实现方式通常有两种,1种是用交换机实现,还有1种是用nginx实现。
这就相当于前台MM为面试者查询到对应的楼层以后,直接将简历分发到对应楼层。不需要面试者再自行跑1趟。楼层收到简历后,也会响应要求。
这类方式,对照重定向,效力较高,但是由于要求和响应都是通过前置机来的,所以对前置机的考验很大。
3. 数据链路返回
这类方式,通过给利用服务器设置虚拟IP,然后通过修改mac地址的方式,将要求分发出去,而利用服务器收到要求后,可以直接响应给客户端,而不需要经过前置机。
这类比于面试者不需要通过前台MM,自己直接将简历投递到对应楼层,楼层收到简历后,会想要面试者的要求。
这类方式中,由于前置机只需要接受要求,不需要响应数据,所以,效力较第2种较高。
101、风风火火的小程序
上次前端小伙在进行内部份享的时候,我去偷师了1下。
小程序=高逼格1点的H5页面。
微信自己定义1套html标签,称之为wxml,又封装了1些样式规则,叫wxss,其实就同等于html+css+js。
封装1方面是为了下降开发本钱,根本上是为了收拢控制权限,开发者能用的东西越多,微信需要操心的事情也就越少。
1.要做小程序开发,你得装个开发工具,微信提供的;
附上开发地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=20171227
2.然后,你需要去微信公众平台开通个小程序账号;
3.接着你就要去学js;
微信小程序用js来作为开发语言,用定义的wxml来描写界面,用wxss来表达样式,这些也是最基本的几个要素。开发语言不用说,js非常成熟,解析js的引擎也有很多。
102、写在最后
作为打不死的产品,我的座右铭:与天斗 、与地斗、 与程序猿斗, 其乐无穷。
千万不要影响他们的开发,程序猿需要1片净土。没有买卖就没有伤害。
最后,脑容量有限,欢迎各位补充。写这类文章,我也很慌,有不对的地方请多多指教,谢谢!
作者:黄丽嫦,微信公众号:野生派产品录