前端工做流中，如何更好的与上下游沟通

本文是面向团队内部的小分享，对象是前端上下游中非技术或者非技术出身的合做伙伴（产品/设计/测试）。公司采用的是native + h5的Hybird开发模式。

1. 这个功能能不能实现？

能。若是你在其余同类APP中或者移动端浏览器上看到某个炫酷/贴心/惊艳/好玩/好想抄的功能，别问能不能实现，别人能作到的咱们就必定能。大多数依赖现有的技术栈能够实现，可是因为技术栈不一样/技术能力的差别/兼容性要求差别，会致使时间成本太高/体验不够好等问题。因此当你看到一个好想抄的功能时，先预估下你能接受的成本，而后你能够这么问：这个功能花三天的时间能不能保证80%的用户能够用？固然，前提是这个问题归前端管。

2. 这个问题归谁管？

因为开发模式的缘由，在求证一个技术的可行性或者定位Bug的时候，可能会纠结到底找谁：前端？后端？App？先就常见问题简单粗暴分个类吧：

• 样式/布局/特效/动画/交互：前端，大多数是前端的活/锅，可是若是涉及到顶部nav和底部tab的话，去问问App呗
• 数据调整/数据有错：后端，固然，也多是前端手抖拿到数据后放错位置了/算错了/写错了，不太相信前端的话先找前端查下接口拿到的数据也无可厚非，前端和产品/测试都是好朋友
• 逻辑错误：不涉及数据的找前端，涉及数据的找完前端找后端也或者先找后端再找前端，看你心情
• 页面挂了：找后端/App/运维，若是是外站的页面就先去找App，虽然可能最后会扔回到前端

3. 遇到棘手Bug怎么办？

重现，重现，重现。先重现，再分析。重现不了？return;

• 若是是内测/外测/灰度发现bug不要急，参考上面第二条，该找谁找谁

• 若是是生产环境：

  • 广泛性bug：不论是影响用户体验类的，仍是数据错误类的，也或者逻辑错误类的，只要是广泛性bug，首先都须要考虑代码回退，再分析解决
  • 页面挂了：若是是刚发生产，验收时发现，立马回退需求代码，在外测/灰度尝试重现，而后该找谁找谁，解决后再上；若是需求发了好几天才发现，收拾收拾准备找下家，咱们随后就来
  • 个别机型有问题：重现，重现不了给截图+描述，描述中必定要包含机型/系统版本/App版本，而后咱们再尝试重现，重现不出来的话只能盲改，盲改基本用处不大

4. 页面能不能优化一下？

我能优化，你能帮我申请到排期吗

• 页面慢

  • 换个100M宽带/5G/4G再看看
  • 若是白屏时间较长，可是从看到进度条到页面出来东西的速度还能够，找APP/后端
  • 若是从进度条到页面出来时间较长或者页面出来到彻底展现出来时间较长，重要页面，给前端排期，基本都能优化一些
• 交互反人类/页面丑的无法看：约会，找产品/后端，确认新的交互，出交互稿出图，排期。一年换一版都算比较频繁了
• 体验不是很好：分状况，好比这里手机号码输入能不能3-4-4？能；好比这里的键盘下去后Toast能不能不闪一下，不能；具体直接找前端确认就好

5. 更多细节问题

• 字体：正常状况下，设计图请不要出现特殊字体，都会被替换成默认字体。目前的技术方案不会支持特殊字体（除非直接切成图放上去），不远的未来会支持我的重要页面，我的特殊字体

• 图片：除非必要，常规前端开发过程当中比较排斥图片的。固然像一些活动什么的，周期短，又须要气氛的，大张图大张图往页面上贴没问题的。常规静态页面中，可使用css完成的样式效果就必定不会用图片，好比一些背景图、icon。前端css3支持的样式效果包括不限于

  • 样式：线性渐变、径向渐变、圆角（26个英文字母包含的简单图案都可实现，参见http://www.webhek.com/post/cs...）、透明、阴影、滤镜（灰度/褐色/饱和度/色相旋转/反色/透明度/亮度/模糊/对比度/阴影，参见https://www.w3cschool.cn/cssr...）等
  • 动画：简单的移动（3D）、缩放（3D）、拉伸（3D）、旋转（3D）以及上一条中全部css样式的渐变过程，好比忽然宽了，慢慢圆了，不知怎地就绿了，好比小球落地弹起的duangduang的物理过程仿真
  • 其余：canvas/svg/webgl等，能够实现大型网页游戏，虚拟现实等。遗憾的是我就会点简单的canvas和svg
• 兼容性：PC：ie8以上不乱，如下能用便可。 H5：iphone6及以上保证还原度，如下及安卓无明显样式错乱

其余的，想到再说吧