大前端不全栈
作者|李俊辰
随着业务和技术的快速发展，大型前端工程的复杂性越来越高。前端业务发展变化快，项目规模不断扩大，对迭代速度的要求越来越高。随着云计算的普及，云工程也是一个值得探索的热点。在工程实践中应该如何选择最合适的方案？全栈和大前端有什么异同？有必要建前端中间站吗？带着这些问题，InfoQ采访了腾讯前端技术专家/总监、IVWEB团队负责人刘恒兵(河伯)，请他告诉我们前端人员在开发过程中是如何学习和提高的。
一个
大型前端工程
大型前端工作的核心是工程，目前工程的需求不仅限于前端领域，涵盖的大型前端范围更广。工程的出现是基于企业/团队对R&D效率的需求。如何在生产R&D的过程中尽可能地使用工具来释放对人力的占用是工程R&D的核心目的.从建立一套完善的规范开始，到IDE配套工具，到Mock/debug/joint debug的研发，自动化测试，CI/CD，最后到在线业务运维监控，覆盖产品上线的全过程，这是工程应该做的。
多团队合作项目解决方案
所以大型前端工程是基于大型前端技术进行工程研发的。从广义上讲，它不仅可以支持终端的工程能力，还可以满足R&D在基于云系统建设的工程能力下的所有终端和后台的工程需求。从狭义上讲，核心满足了端的工程需求(前端、终端)，特别是解决了多人协作中本地端工程和云工程能力的同步，保证了R&D团队所有R&D人员在同一个R&D系统中，避免了不对称带来的各种团队协作问题。
同时，好的工程可以带来很多好处。
首先可以避免团队项目交接、人员交接等各方面的沟通成本和学习成本。R&D模式，代码风格，工具使用都在同一个维度，团队CR会更容易。
其次，有了工程系统，加入团队的新人可以以更低的成本熟悉业务，以更快的速度融入团队，减少不必要的熟悉和等待时间，这也是目前很多团队迫切需要解决的痛点/问题。
大型前端工程探索
它主要涵盖R&D进程的所有环节，核心是尽可能提高R&D效率。具体来说，R&D规范是最基本的，所以团队花费了大量的精力来构建和不断完善团队的R&D规范，以确保后续的工程建设有证据可循，团队有共同的目标和理念。
有了规范，下一步就是根据规范实现自己的R&D工具。最重要的是在R&D过程中构建基于IDE的工程工具，让R&D过程中的问题发现可以放在代码编写过程之前(而不是CI/CD)，问题可以尽快解决。除了基本的Lint，还有团队开发的更重要的工具，模板脚手架，团队组件系统，自动监控能力，MockServer，联合调试/代理，自动测试系统，A/B Test，统一代理层，全链接监控等等。
以团队的常用工具为例，每个团队都有自己的内部/外部工具，所以这些工具是分散的。在工程R&D的过程中，这些分散的工具要统一组织打包，可以打开插件系统支持工具扩展。所有工具都在一套R&D系统中，可以大大降低学习和使用成本。
2
大前端不是一个完整的堆栈
我们通常指全栈，基本上是指前端和后端全栈R&D，基于传统技术R&D人员的视角(前端、终端和后端)。早期的网络R&D。NET，前端分离，在ajax兴起之前)基本上可以称为全栈，既需要后端逻辑，也需要UI经验。现在全栈的概念还是一样的，只是后端R&D语言变了(java，php，nodejs，go等。).
大前端更多的是技术和端R&D，包括终端技术(Android、iOS)、前端技术(h5、Hybird、Nodejs)、物联网等端设备R&D技术。大前端全栈是指基于Nodejs的全栈R&D。可以看出，两者所描述的维度是不同的，存在一些交集和差异。
构件系统的构建
如前所述，在工程建设中，构件体系建设也是一件极其重要的事情。无论是全栈还是大型前端研发，都离不开组件系统。一个好的构件系统可以很大程度上提高团队效率。详细的
细来说，基于现有体系（诸如 npm、github 等）建设业务的组件生态，提升组件二次研发、组件使用效率。基于好的组件生态，可以实现更复杂的智能研发能力。可以说组件是很多团队业务研发的基础，因此好的组件生态尤为重要。更应该注重解决问题的能力
前端工程师，首先需要不断自我革新的学习能力，技术层出不穷，需要有一个好的心态，不极左，也不极右。选择合适自己及业务的技术学习并应用是必备的技能之一。
其次，精力之余拓展边界，Nodejs 全栈是一个不错的选择，进入后端研发深水区，选择其他传统的后端语言（java、go 等）解决关键性能问题也是需要考虑的。不局限在一个语言技术，因地制宜，核心是能解决问题。
3
前端中台只是解决问题的一种方式
互联网的产品变化较快，很多团队 / 企业在很多领域都有投入，那这些业务之间的一些共同技术建设，如能复用起来能降低业务冷启动成本，提升新业务研发效率。中台建设也是基于这个核心诉求，基于中台能力建设，能做到跨业务、跨领域技术复用，缩短新业务初创时间并节省资源。同时，复用的前提是解耦，能做到通用的能力和业务个性化能力完全解耦。解耦的架构设计，可以降低系统本身的维护成本，增强体统健壮性。解耦的设计能更好的业务之间复用。
大前端中台建设类似，问题存在就得用方案去解决，中台建设是其中一种方式（大中台、小前端）。中台不是万能的，不能解决所有问题。技术复用带来如何满足个性化诉求的问题，需要进一步思考如何更好地解决各个业务之间个性化能力。从火热到冷静也更能反映技术本身的演进，冷静并不是代表放弃，而是面临新的问题如何进一步解决。
前端中台的分层架构
回到前端工程化的能力，针对前端中台来说，一定程度上工程化就是在前端中台的事情。把前端通用的一些规范、工具、能力、组件统一化中台建设，提供不同的业务支持。
因此从设计上，应该包含基础层，统一网关，组件层，业务层。基础层提供基础的工具和能力支撑（诸如全链路监控基础工具）、统一网关（统一路由分发、业务个性化插件）、组件层（基础通用组件、组件二次开发体系、组件组装、智能研发）、业务层（业务逻辑与业务组件等）。
每一个环节都很关键，能够把我们业务开发的基础、插件、组件、业务完全隔离开来，尽可能做到不同复用。
中台的拆分与合并，我们该遵循怎样的原则
架构解耦和拆分工作，本身就是一个度的把握。原则上既要解决逻辑耦合，又不能过度设计，允许一定程度的冗余。在开发过程中，要看到实际业务之间可行的复用能力、模块、组件，而非理想情况下的复用。基于实际的复用诉求，进行业务提炼解耦，并做一定程度的超前思考（原则就是做有意义的拆分）。
前面提到的架构设计中，统一网关层插件、组件二次开发就是要解决这些问题。支撑不同业务自定义插件（或许这些插件之间存在部分重复，但不影响整理架构复用）、组件二次开发进行复用，能做到整体上架构一致和不用业务之间个性诉求。
前端中台的建设实践
上文已经提到了刘恒兵老师团队的前端中台方案和设计。那么其中遇到的问题主要还是怎么尽可能复用以及业务个性化诉求。我们经常会超前研发设计一些拆分与解耦，但后续实际过程中发现是一个伪需求。比如说组件，很多时候提炼的业务通用组件发现后续业务并不能直接复用，业务个性化诉求太多了。
方案上，通过组件二次开发体系建设，解决这类问题。我们发现虽然业务组件不能直接复用，但又能复用其中一部分，直接使用不满足诉求，重新开发浪费精力。其实这里核心的问题并不是复用，而是复用的效率，最后搭建二次研发体系方便研发能够快速二次开发，提升二次开发效率，达到复用的目的。
4
回顾与展望
2020 年，疫情下的“前端”
回顾 2020，我印象比较深的有三件事：一是 TypeScript 的大范围普及，二是工程化的发展，三是全栈深水区。
相比于 2019 年，2020 年 TypeScript 已经深入人心了，各前端框架对 TypeScript 的支持进一步推动了 TypeScript 的应用和普及，语言层面的发展能非常快速的促进一个领域的发展，正如 Node.js 促进前端领域发展一样。
2020 年的疫情给整个社会带来的新的挑战，企业对于研发效率的迫切需求进一步促进了工程化领域的发展。以前工程化对于很多研发人员仅为了解或者认知仅限于工程构建。疫情期间的工程化已经演变为对企业效率的诉求，各个领域都需要工程化体系帮助远程办公、移动办公提升效率。
2020 年，大前端全栈逐渐进入深水区，不再是仅仅满足基本的 SSR/BFF 等诉求。对 Node.js 新的期待逐渐变多，承担更多的场景。中台化后统一的服务、网关都是需要 Node.js 去承担，因此带来的服务质量、容灾等各方面诉求就对 Node.js 提出了新的要求，全链路监控、Serverless 服务质量 / 性能等都需要进一步建设和完善。当然，这些挑战也会进一步促进 Node.js 的生态发展。
2021 年，前端人如何成长？
刘恒兵老师表示，在他看来，以下三个方向都很值得关注：
Node.js 全栈，当进入深水区之后，大家要研究的就是如何进一步突破瓶颈，包含当前遇到的 Serverless 性能（冷启动、并发）的挑战。
云工程化 (含 IDE)，提升企业远程办公、移动办公效率。
智能研发，改变研发模式，对于业务基础的、通用的 UI 还原可以释放资源，让机器代替研发，提升效率。
前端从业者一直面临的挑战应该就是不断学习的能力，从历史来看，新的技术层出不穷，需要保持不断学习，那么明年或许一样，也会有新的技术诞生。对于我们自身来讲，保持客观的心态，认知每一个新的技术、领域的时候需要从问题着手去了解（解决了什么问题，对当前业务的帮助），然后合理应用。
针对全栈领域进入深水区后，需要提出更高的质量标准要求，搭建工具并抽象解耦复用，提升服务质量。
嘉宾介绍
刘恒兵（河伯），腾讯前端技术专家 / 总监，IVWEB 团队负责人，行业技术大会 TLC 发起人。2011 年加入腾讯，NOW 直播、QQ 群课堂、腾讯看点直播等移动直播产品技术负责人，负责整体架构设计和开发。有着多年 Web & H5 移动开发经验，对移动监控和优化有深入研究并专注于全栈技术架构优化，推动组件生态，致力于打造高复用、高效率的全栈开发体系。同时，IVWEB 团队是腾讯专业前端团队之一，培养多位行业讲师和技术专家，团队致力于新技术研究及行业交流分享。