每天都在为未完成的需求和无法修复的bug而头疼吗？你还在为天天写业务代码能不能得到技术上的成长而发愁吗？而追求成就感的你，有没有想过，自己写的这行代码，会不会在反复的修改中迅速成为遗留代码，或者帮助公司腾飞，在生死的战场上脱颖而出？因此，本文将业务和前端结合起来讨论。讨论业务发展的不同时期，前端可以做的一些事情，既可以解决业务问题，又可以让前端同学摆脱代码工和图片切割工的定位。一千字胜一图，全文完结。大错特错，还是得细说。1.起步阶段业务起步阶段，在市场定位、用户需求、产品逻辑都已经明确的前提下，此时业务的核心需求是“尽快上线”快速验证和产品迭代。当然，质量必须能够过得去。所以这个时候，技术同学计划的重点是：快爽先说“快”。这样的话，所有的vue/react都要下地狱，老夫只会用jQuery！火葬场可以改造，项目启动后，收拾行囊走人……这时的牢度指的是尽可能复用集团/行业成熟的解决方案和结构，抑制重新发明的躁动车轮。这就涉及到另外一个问题：如何选择靠谱的方案？这是一个可以另开一篇的话题，但是我就我个人的经验简单说一下，主要是稳定性、扩展性、性能方面。.如何评估稳定性？如果一个项目能做到这些，我就放心多了。项目之星数量多。有单测，代码覆盖率在90%~95%以上。文档已完成。有常见的问答问题，处理流程和周期比较快。3天内响应，1~4周内关闭。有稳定的版本控制，不进行不兼容的升级。如果必须进行不兼容的升级，迁移工具应该是最好的。如何评估可扩展性？主要是指一些内容是否可以根据业务或已有的技术方案进行定制。比如组件库，是否可以自定义主题，组件的事件回调等，因为一些需求，组件除了要完成默认行为外，还需要执行嵌入等其他逻辑积分；比如单体测试工具能不能配置白名单，因为有些代码是兼容特殊场景的，写用例模拟场景的成本真的很高。这主要是根据技术需求和经验来判断的。性能问题在短期内很容易被忽视，因为跑起来就够了，但一旦埋下隐患，以后的坑再解决就异常困难。容易出现性能问题的地方包括：代码构建、长列表/表格滚动、大数据图表、复杂动画、3D全景渲染等，如果您的业务涉及到这些方面，在选择方案时一定要特别注意性能。如果实在想省事的话，create-react-app和umi一起开箱即用就可以了。我对“酷”这个词的理解是，当一个新产品出现时，它必须在用户体验或交互方面绝对领先于竞争对手。我还记得的一个例子是，乔布斯发布第一代iPhone时，演示滑动列表时，全场惊呼。乔布斯的一个哥们说：当你滑动页面时，我会被淋湿。前端领域的另一个例子是AntDesign。AntD之所以被广泛使用，很大程度上是因为其出色的视觉设计和动画效果。到目前为止，AntD的官网仍然说它是一个设计系统。因此，我认为，一款新产品除了提供刚需的价值外，在美观和易用性上应该领先对手一大步。虽然主要看设计师和产品的功力，但是前端同学的实现起码不要耽误。加载太慢，滚动太慢。蓝海市场和刚需产品可能不太重视这一点，但有些蓝海门槛较低，很快就会变成红海。另外值得一提的是，账号体系的搭建包括开放三方登录、免费登录等（客户端登录状态透传到h5），网上资料很多。我在这方面确实没有经验，这里就不说了。2.快速扩张是可以的。假设产品如期上线，数据缓慢上升，似乎一切都很好。那么问题来了，业务开始扩大，公司招了100个运营，10个PD，你会发现需求一下子翻了10倍。这个时候怎么办？只有一个答案：提高（jia）效能（ren）。所以这个时期的核心是：快速稳定提升效率最简单的方法就是加人，但问题是100个运营人员好找，100个能写出靠谱代码的前端就难找了。代码比重写还麻烦。看过《人月神话》的同学都知道，加人带来的效率提升是有瓶颈的，每个人的平均效率会随着人数的增加而下降。这时候就需要考虑通过技术手段提升效率，沉淀基础研发体系，包括：基础工具库+业务工具库，避免重复编写一些简单但容易出错的业务逻辑。UI规范+组件系统。UI规范非常重要。如果设计师们不能达成一致，出来的视觉稿肯定是天壤之别，你的公共组件就很难搞定。研发工具升级。主要包括构建性能优化、数据mock工具、环境切换工具、在线排查工具等。除了技术手段，人员的技术成长也很重要。毕竟技术方案是靠人来实现的。个人认为常用的方法有：CodeReview，帮助新人快速成长到一定水平，保证新人开发代码的可维护性。内部分享。分享提高研发效率的实用工具，分享底层原理避免在更深的坑上浪费大量时间，分享一些编码调试技巧。当然，还有一个提高效率的神技，就是切需求。切需求也是个技术活，有的高级工程师靠嘴解决需求。但并不是每个团队都采用分散管理（多亏了我这里的前任老板），给你足够的权力来削减需求和自己安排时间；有的公司采用集中管理，只有前端leader才能切需求和调度任务，也阻碍了很多同学在这方面能力的发挥。那么如何削减需求呢？简单听我说，有更好的套路欢迎。首先，端正心态。你砍需求不是因为你懒惰下班早，而是你砍需求是为了提高业务的整体效率。你要砍的是无效的需求和重复的需求，公司业务的核心需求不能砍。不然你就把公司的事干掉，自己去喝西北风？如果公司有幸上市，你不高兴吗？二、先问需要解决的业务问题是什么？判断：这个需求的优先级有多高，是否伪/重复需求，是否有其他替代方案。这里的伪需求是指不能真正解决用户问题的需求。第二，数据说话。相关数据是怎样的？如何推导出业务的问题？需求数据会变成什么样？最后，这个需求可能需要什么样的上下游合作。当涉及到其他环节的需求时，需要将上下游结合起来，考虑到所有可能出现的问题，统一一个方案，客观评估工作量。最后，最后也是最重要的就是积累共性需求，搭建一个组件系统或者业务模块系统。有了这个沉淀，我们才能更进一步，在需求上收敛。例如，我们不能说已经有一个滑块模块，你必须做一个类似的。业务提升在哪里？一般来说，一个重要且合理的需求可以更好地回答上述问题。第三点，用数据说话，也对企业的数据能力提出了要求。最基本的pv/uv、uv点击率、停留时间都是前端页面相关的指标。模块热度、函数使用。（上次做的功能你不要用！）还有业务指标，比如电商gmv，售罄率，但是这些跟前端没有直接关系。进阶一点的可以玩GrowthHack，全程监控细分用户群的使用情况，比较适合业务发展到一定规模，运营精细化的场景。大数据分析+洞察+数据可视化。将在第三部分进行介绍。还有一个不能忽视的就是如何变得更“稳”，因为大家都很着急，着急的时候容易出现线上故障，然后所有的时间都花在故障排除上，然后就是时间更紧迫，一个快速腐蚀的死亡循环，然后你能做什么？你只有猝死才能显示你的野心……常见的有几种方法：研发过程控制。未经测试不得上线。这也是阿里研发的红线。看似效率降低了，其实只是把时间花在了线上问题上进行测试。对基础库和基础组件进行单元测试，代码覆盖率90%+监控。在线404、页面白屏、js/接口报错等安全。做最基础的xss和csrf，然后整体升级https问题审核沉淀机制。再次避免同样的问题。如果解决了以上问题，前端同学就可以快速稳定的帮助业务度过高速发展期，迎来业务的深耕期。3、精耕细作俗话说：攻城易守难，但现在攻城没那么容易了。现在新兴的独角兽背后都有AT的影子，比如ofo、摩拜单车，双方想要一下子把对方干掉是极其困难的。就是比拼对方的内功，到头来极有可能两败俱伤。这个时候就需要稳、快。前两个阶段的C端场景，貌似跟前端的关系比较密切，那么这个阶段和前端是什么关系呢？我觉得有一些事情是可以做的：中后台系统的建设。操作人员的工作在线化，同时减少部分人工操作，提高效率。操作人员平时虽然大力使用excel，但也存在容易出错、腐败较多的问题。想想ofo被曝腐败严重的新闻。在很多缺乏前端的公司，这部分通常由后端的jQuery来穿梭。但是，后端系统通常缺乏交互意识（没有导航、错误消息设计等），不能做稍微复杂的布局（我见过float和flex很难），缺乏动态效果，SPA等等，和makessystem真的很不一样，是9012，让专人来做这个工作。记得加水印，包括清水印和暗水印，方便公司随时问责，间接防止公司机密外泄。大数据可视化。不仅是消费者端页面的访问数据，还有更深层次的公司运营数据。例如，ofo可以实时跟踪单车损坏率、监控车辆密度等，从而指挥调度车辆的调度，实现车辆交付与使用的最佳匹配。虽然这件事的核心是数据同学出的数据的准确性，但是前端同学的配合是必不可少的。可以用来做这件事的常见的有Echarts、HighCharts、G2等，虽然我们自研的一套基本不可能重复，但是取其精华，快速赋能业务才是前端的价值所在商业。平台。这其实是指大、中、小前台的概念。因为我们往往积累了一批中后台系统，但是如何让同一个系统更快的支持新的业务，对重复功能的中后台系统进行裁剪/合并，也是一种助力业务的手段。AB测试。根据以往的经验，电商不同行业的不同人群对于交互设计的偏好确实是不一样的。有的喜欢大图，有的喜欢小图。所以，通过ABTest的解决方案，对千人千面的细分和展示，也能略微提升业务。容器技术（混合和内核）和极致性能。其实刚才提到这个，是因为对于大多数公司来说，深入追求浏览器内核增强，真的没有任何价值和可能。混合方案是必要的，但在快速扩张时期应该差不多。极致表现也是一个比较秀的东西（前提是1~2s页面可以交互），短期内没有特别需要，但是在追求极致表现的过程中，相关同学不得不对容器技术、服务器、网关、CDN等底层技术有深刻的理解，并推动相关方的升级，经过长时间的积累，会带来人力储备和技术储备的提升。4、新赛道新增量期间，以上事项基本完成，公司业务进入平稳期。就是四处寻找可以做的新事物。（当然，破蛋可能还会有各种改版。）核心端的扩展包括各种小程序。名义上方便控制第三方，提供更好的体验。其实就是人为的拆分一个端，同时给它喂流量。但是没办法，谁让爸爸们有流量。但要注意，扩一端有维护成本，并不能直接带来流量收益，需要配套的运营方案。3D、全景、VR/AR。可能带来交互根本性变化的事物的缺点是技术不够先进，制作全景素材的成本高，VR/AR的应用场景不多。扑。智慧商业的智慧。例如，活动界面上有成千上万的人和面孔，根据算法计算界面元素的最佳组合。智能研发。比如FB上的Aroma，之前业界的psd2html，但是这个算法和普通电商推荐算法最大的区别就是容错率极低。一行代码后，整个系统无法运行。实在不知道前端有什么新东西要注意，但是想不通，就这样吧，欢迎指点。5.最后，看完本文，相信你已经找到前三个问题的答案了。不能再被一堆需求推开，不能再只写业务代码，得到属于自己团队的技术方案。最重要的是在这个商业世界中找到自己技能的价值，永远不要忘记极客的梦想，科技改变世界，摇滚世界。
