版权归作者所有。商业转载请联系Scott获得授权，非商业转载请注明出处【务必保留全文，请勿删改】。当早期汽车诞生以取代马夫时，政府下令将汽车的速度限制在4英里以内，并且必须三个人驾驶，其中一人必须挥动小红旗为汽车让路。共识变成了“4个轮子+1块电池+1台电脑”，甚至无人驾驶，这就是科技进步的力量。2014年，互联网整体进入移动化进程，各种创业APP满天飞。小菜的前端团队也是在这样的时代背景下开始组建的，而小菜的业务团队需要多地协同工作，更重要的是敏捷和效率。从2015年开始，内外部产品和协作工具也都选择了App作为载体。直到今天，所有协作工具都已经移动化，主阵营从App扩展到小程序、H5、公众号，甚至覆盖PC网站等配套基础设施基础，技术栈在近几年发生了翻天覆地的变化。可以参考下面刻度比较粗的时间线：这篇文章写于2018年底，发表在掘金小册子上。作为开篇，大家可以跟随小菜从前端的角度，快速回顾一下导致这些变化的背景，以及不同技术栈带来的优势和挑战，同时也了解这个团队的技术变化最近几年。SavageEra·jQuery+native【FromScratch】创业初期没有前端工程师，服务器+外包公司最初的业务试点是到市内一批菜市场买菜，卖给第二批蔬菜。商家需要大量的销售、采购和物流人员，而销售必须要有交易平台，所以宋小菜这个APP呼之欲出。自然是荒野创业的时候技术积累不多，准备时间不够，所以才上线。构建网页版混合应用，即在原生shell中嵌入浏览器，选择jQuery作为浏览器网页的DOM和事件库，为用户下单和购买提供交互能力.这当然是一个过渡性的方案，因为内部嵌入的网页在价值数百元的Android机器上性能并不理想，体验很差，勉强能用于商业。除了支持交易的手机APP，还需要对采购、订单、物流进行精细化管理，自然需要PC版的ERP系统。该系统最初是由一家外包公司开发的。后端是Java+VM，前端是绘制页面的时候，JS库还是jQuery。无论前端后端，代码质量和系统架构都非常粗糙和原始。随着公司整体技术的升级，最初的架构已经从历史包袱变成了历史包袱，甚至出现了一些重大的问题。幸运的是，蒸汽时代即将到来。冷兵器时代·jQuery+native+RN【形成战力】创业初期，客户端工程师+前端工程师<=3。糟糕的体验显然不能很好地支撑业务，这个时候还是2015年，我们看到Facebook开源了ReactNative，也就是RN——全套的JS+一些native组件可以快速搭建一个手机app，所以我们实现了苹果版有RN的app，而安卓就没那么幸运了，因为RN的安卓从不支持到支持用了一段时间，而且支持也不是很完善，所以安卓的宋小菜是用原生Java重写的，而iOS的宋小菜是在RN上重写了。除了交易APP，采购、销售团队和客户关系管理也成为刚需。否则，完全依靠离线的Excel和ERP是无法响应toB业务的时效性的，于是第二个和第三个APP诞生了。服务于采购的彩米，服务于销售系统的CRMApp宋小福，都是用RN开发的。这个时代，在线APP的前后端已经完全分离，但是后台的界面设计还很年轻，前端的RN框架应用也很暴力，一大片大量的全局变量被注入引用，大量的三方包直接被魔改丢失。进入node_modules，和git仓库一起去。大量的UI组件在多个App中被复制复制。JS的语言语法栈虽然我们用的是RN，都是最新的语法特性，但是在整个工程层面上就像粘贴一样。混合在一起时很难保持相同。这是这个时期的特点，既先进又混乱。多种前端技术方案混杂，编程思路和工程组织混乱。达摩宝剑虽在手，却不能从内功到招数结合，犹如谢逊手持龙刀，勇而不虚。Steam时代·jQuery+React+RN+native【生产力初步解放】创业初期，客户端工程师+前端工程师<=6，随着RN的不断应用，App端的开发效率有量级提升，硝烟弥漫的冷兵器时代即将结束，进入了挑战更高的蒸汽时代。已经是2016年了，采购、分销、销售都有采购和销售，也有CRM客户工具，但是没有分销工具和服务商工具。新增两款App——服务物流配送司机的宋小仓和服务供应商的卖菜。这些新App都是使用RN开发的，架构基本统一。ERP后台也从jQuery逐渐切换到Webpack+ReactJS。技术栈逐渐统一带来的好处是显而易见的。它可以继续以少量人员快速支持业务调整。这对于toB这样对效率和成本非常敏感的创业团队来说是非常关键的。无论是新建APP，还是在现有APP上增加业务模块，都提供后台接口，前台结合页面。经营节奏和发展节奏自此进入双快期。没有基础设施基础和规范保障，很快就会出现混乱和风险。这是这个时期的特点。虽然所有的App都有独立的仓库，但是仓库之间的组件代码并没有实现真正的意义。共享，而是通过复制来复用代码，而且路由、定位、页面容器甚至项目结构都大不相同，RN框架的主版本也大不相同，给新人带来巨大的学习成本。团队本身带来了巨大的维护成本。一旦业务进入稳定状态，对性能、稳定性、可维护性有了更高的要求，这些暴露出来的问题就变得致命了。电气时代React+RN+Node+GraphQL【进一步解放生产力】创业中期，前端工程师<=9人类有了电之后，文明进化的速度瞬间加快，小菜的前端电来自NodeJS，我们使用RN构建App，因为它从开发成本到打包构建都非常敏捷，更重要的是它可以支持热更新。无需向AppleStore和Android渠道提交版本，即可实现App内的功能更新。也就是发布与否，对于业务每周都在变化的创业团队来说，是一剂救命良药。所以在2017年，我们用NodeJS搭建了自己的RN热更新平台。这是我们第一次尝到甜头，但也带来了很多问题，尤其是蒸汽时代，很多问题不是单纯靠人肉就能解决的。盘点创业到2017年，几乎所有的前端基础设施都处于0状态，此时有点像权力的游戏中的多斯拉克部落。英勇的战力也很充沛，但配套的攻城装备、高级攻略和工具都没有。同时，大家的气势也更加的嚣张了。这也是多斯拉克人被无垢者军团打败的关键原因。下图是2017年下半年整理的，从工具、规范到业务基础架构。截图：举个例子。比如业务基础设施的报表场景，需要前后端配合。后端写各种SQL，然后把接口输出给前端。只有达成共识，才能在前端表中输出无错的报告。该报告还可以支持日期和时间段的检索和排序。这时候就需要在接口中加入多个参数，将用户的动作传递给服务端。这样的报告通常有1到3天的开发周期。每次都需要前后端团队分别排程，进入review，然后开发测试最后发布，还有后期的维护升级。对于【数据就是真理，决策就是生死】的业务对于决策者来说，公司跑了3年，开发了50多份报告，决策时间总是滞后。这样的问题显然是致命的。针对这个问题，前端工程师将这样的报表做了一个SQL的正反汇编。结合GraphQL实现自动展示系统后，第二年很快就出200多份报表，所有业务方都搭好了。竖起大拇指，每一位工程师都充满了自豪感。从内心深处，我们都深深地明白一件事。基础设施的基础是核心能力的前提，基础设施的核心能力是NodeJS开发能力。只要遇到NodeJS，就会带来无数的技术挑战，这些挑战会随着基础设施体系的进一步建设和业务规模的扩大而变得越来越紧迫。电网时代React+RN+Node+GraphQL+C#+Python【生产工具全面升级】创业中期<=12名前端工程师，1名前端技术专家。在电气时代，我们受益于两个宝藏，一个是NodeJS，一个是GraphQL，之前的能力都是点状和线状的，在将NodeJS融入到前端团队工程的方方面面之后，再结合GraphQL，中间聚合数据层，前端能力可以形成一个网络建立起来。这个网络的中心是人。最好的改变必须首先从人开始。我们盘点了2017-2018年不同时期几家使用RN或者依赖客户的创业公司的人员与工程师的比例，如下图所示：我们发现我们的团队还处于比较早期的阶段，但总体技术进步已经上了一个新阶段。新的阶段不是靠等待来实现的，而是靠疯狂的基础设施榨取效率，所以在电网时代，我们受限于人力。推团队的核心成员，技术栈的深度和广度都发生了更多质的变化，让能腾出的资源一定是资源继续支撑基础设施，基础设施的成果肯定会吸引更多优秀人才。工程师走进团队，这样才能形成一个健康的基础设施生态，让基础设施、业务支撑、人才成长相互反哺，整个团队才能正式走上正轨。判断团队是否走正规，可以从业务支持程度和技术沉淀来评估。下图是我盘2018年10月的前端支持情况，包括以下重要技术沉淀：节点服务框架Cross，2019年将支持十几个在线系统前端PC框架（支持H5）Highway，以及2019年将支持十几个在线平台RN的统一路由/组件框架Brick（图中未显示），2019年将继续可视化9个App数据上报系统，技术栈Node+GraphQL+C#+Python，将支持2019年公司业务数据透视上图中我们特意标注了人工时代-工具时代-工程时代-智能时代来对应之前宇博提到的前端团队的发展轨迹，确实和前端非常吻合-小菜完结，所以我们前几年的技术栈是在人工时代和工具时代，但是现在我们正在从工具时代跨越到工程时代，工程时代的思维方法会很和以前不一样。这个话题在未来至少会伴随我们团队2年。未来2年我们也会不断更新工程时代的思考和智能时代的一些尝试。共同进步。小结本文带大家快速回顾一下团队技术栈的发展历程。你脑子里可能有无数的疑问，比如NodeJS在团队中做了什么，如何平衡基础设施和业务，业务和个人成长如何结合等等，我们把这些问题都一一分解成了小话题，我们将在后面的章节中一一讨论。建议大家看的时候结合你的团队和你的职业规划，结合我作为管理者会如何选择，用这种代入感多发问，最终从我们的总结中得到启发和收获。在过去的两年里，无论是线下和线上的面试还是技术分享，Scott都认识了很多前端同学。由于团队原因、个人原因、职业成长、技术方向，甚至家庭原因等等，理想国与现实存在差距，在放弃与坚持之间，不断摇摆，心碎，大家可以和我聊南北，更了解工程师的命运，多看多听，Scott微信：codingdream，也可以关注斯科特关注我的消息。本文未经许可不得转载。请联系斯科特以获得许可。不然直接在公众号转载，尤其是删减内容后，我直接投诉。
