不久前，我很幸运能够分享深圳GMTC大型前端建筑演化特别会议。后来，在编辑Ye Ran的邀请下，他总结了这次分享的演讲，“腾讯在线教育前端建筑的发展之路”。首先，让我们自我介绍。我是的工程师。我于2016年加入了 QQ浏览器，目前在在线教育部的前端团队中工作。本文对于前端团队的建筑发展以及探索团队的研发效率的工程建设具有一定的参考意义。

1。在线教育部的业务介绍

技术团队的发展取决于业务的发展，我目前正在教育行业。该团队目前拥有三种教育产品，即企鹅辅导和腾讯教室。

它是儿童英语的产物，可以帮助儿童学习英语并进行互动教学；

企鹅辅导是K12通识教育产品，帮助小学，初中和高中生进行以考试为导向的教育；

腾讯教室是成人阶段的教育，例如辅助教学，例如证书检查，雅思和公务员。

介绍我们的业务产品后，让我们简要列出团队的前端技术堆栈地图。我们的产品涵盖了几乎最常见的用户场景，例如应用程序，迷你程序，PC，H5S等。业务场景包括大多数电子商务方案，即2B面向面向的机构和面向2C的学生。我们的教学场景主要是音频和视频，以及一些互动教学方案，这是我们业务前端的常见技术堆栈。

业务发展面临许多挑战。对于开发而言，最直接的问题是：技术改进，协作管理和梯队建设；后者的重点是在过去几年中如何升级团队的技术堆栈，以及该团队如何开发效率工具以促进协作办公室工作。

2。大型前端体系结构的演变过程

以上是过去几年团队发展的不同阶段。

顺序是：技术堆栈的统一；组件实现；应用程序的动态业务构建；服务中端构造以及目前正在探索的云集成。

提高业务效率的最简单方法是：组件！

组件化可以优化团队效率并提高产品质量。但是，在实践过程中，业务也遇到了技术堆栈混乱的问题。

技术堆栈中的混乱是由多种原因引起的。每个团队可能会遇到不同的历史背景，例如业务合并，这些背景以前是不同的团队。例如：随着业务的发展，该行业的技术趋势发生了震惊的变化，许多历史项目必须面临重建和升级。

我们的团队也面临这些问题，前端技术堆栈也很复杂。因此，我们决定下定决心要统一技术堆栈，以便它可以促进代码重用，深度技术培养和统一升级。

我们放弃了FIS，NG和VUE，专注于和谐。因此，该团队在这两个技术方向上创建了一些具有技术降水的学生，这可以解决我们在日常生活中遇到的各种困难问题。

统一技术堆栈后，我们进行了组件构造。组件的实施相对提高了团队的发展效率，并且也有助于协作。可以看出，沉淀组件的过程是缓慢形成团队规范的过程。

前端在线教育的动态构建

问题：如何解决实时应用问题？

随着业务的开发，灵活和可变的产品需求，尤其是对有效性的需求，产品还对应用程序的动态功能提出了强烈的需求。这导致了体系结构演变的第一部分：为客户探索动态解决方案。

从时间表来看，企业使用了许多方法来适应产品需求，并在其中找到了开发人员的价值。我们的应用以混合方式开发。换句话说，上述所有能力都散布在不同的业务模块中。

客户动态解决方案确实是一种选择。如果不是为了苹果的问题，客户动态本可以很久以前实施。这确实是一个业务问题。

优点：可以配置和更新；缺点：需要预先添加，并且可伸缩性不足。

优点：动态更新，开发和维护成本较低；缺点：比较，绩效问题

我相信每个团队都使用了离线软件包解决方案。在4G和网络条件下，它仍然是一个很好的解决方案。但是，在许多手机上，确实很长一段时间来解析和执行JS，因此不可能实现更好的极端优化，但是页面响应速度也可以在一定程度上进行优化。我们也在PWA上已经有一段时间了，但是由于浏览器具有白屏，因此别无选择，只能将其放入客户端。

在出现之前，它应该是最具影响力的跨端解决方案。

他的优势：维持JS开发并提高渲染性能；缺点：不同的平台有差异，需要兼容和处理，并且代码不强，因此速率略高。

现在它仍然是最成熟的跨平台解决方案。阿里巴巴的WEEX也来自此基础。

2017年爆发的风险使该集团担心其业务，因此该团队还呼吁投资探索跨平台解决方案。当时，我们仍在SNG中，我们与“ ”和“ ”的同学联手探索项目并实施了业务。在2019年930年后，BG重新划分了，该项目破产了。很多时候，技术探索纠缠在公司战略的制定中，导致了很多不确定性。技术的长期发展不仅面临着技术本身的挑战，而且还有许多不可预测的风险和问题。因此，只有变化本身保持不变。但是，技术探索确实为参与的学生发展了很多。

2018年，我们首次参加了GDD，这是2019年第二次参加，我们的业务在实践中实施。技术优势：可比性的性能和一致的多端渲染；缺点：不支持动态，当前的生态系统不如RN，前端写入Dart，与前端JS生态系统分开。

为了满足产品的快速迭代，当团队实施第一阶段时，他们将其用作UI技术来平滑iOS的重复开发和两端。因此，使用了许多基础客户端功能，使用了传输层，并且iOS和iOS之间的呼叫差异得到了平滑。

由于该官员不支持动态和Web合并版本，因此该团队试图实施TO Web，并得出结论，当前版本的Web版本不适合追求绩效，而是适合非终端方案；它可用，但并不容易使用；仍然有可能解决一些紧急情况的动态。

为了总结动态解决方案的探索，它实际上是渲染方法的转换。从浏览器渲染到客户端渲染，再到自发发动机的渲染。不理解它是Skia的渲染解决方案。它代表了一种新趋势。它代表了自我开发的跨端引擎时代的开始。也许这项技术在将来不一定会成功，但它很可能是对这种自发跨端引擎的解决方案。

前端在线教育的中期服务的建设

问题：如何改善业务体验？

由于客户的渲染速度，因此在前面简要提到了问题的原因。在某些机器上，页面的渲染性能存在很大的问题，主要是因为客户加载和解析时间太长。此外，再加上耗时的网络加载资源，该页面很难在几秒钟内打开。因此，需要将客户端渲染迁移到服务器渲染。这导致了我们的服务系统的构建。

在共享服务构建中，我们选择了Team Node 的基石与您讨论案例研究。

例如，上面的体系结构设计基于HAPI和插件打包1.0。每台业务机器仅运行一个实例，即通过PM2进行过程管理，包括启动，重新启动，监视，日志处理等。当用户请求时，PM2将请求分配给不同的处理并返回响应。

每个实际上都很重，其中包括两个部分：层和业务层。在业务的早期阶段，所有人都分享了一个。该设计确实在业务的早期阶段提高了开发速度和产品迭代速度。原因很简单。该应用程序开始编写更少的代码，可以使用每个人的代码，而解决的问题几乎相同。在业务的早期阶段，该框架解决了取代Java VM的解决方案，并优化了团队的研发模型，实现了提高发展效率的目标。

经过一段时间的业务积累，1.0设计的缺点逐渐变得明显。由于它不仅可以进行直接服务，而且还实施了一些业务逻辑，因此公共代码具有很高的耦合学位。缺乏合理的规格会导致发展效率降低；高耦合会导致服务问题，并且所有服务都会出现问题，因此偶尔有雪崩的风险，因此决定升级。

2.0基于KOA的洋葱模型的设计，所有组件和功能都可以嵌入插件的形式。其中，它是核心入口，封装KOA以及一些常用的组件和中间件。 - 核心负责流程监视和文件加载策略，并且还保持了相对标准化的开发模型，但是一个集成的功能；

-CORE：定位是当前的服务 - 守护程序过程，负责管理：过程异常捕获，异常出口，服务重新启动；检测可以保护业务的安全出口，定时的心跳检测；

自动机制将指定的目录文件加载，并自动将方法注入应用程序对象，简化应用程序过程，更改经常将代码的重复性劳动为业务，并提高开发效率。收集参考路径，为将来的无损重新启动的热门更新铺平道路。

许多技术中间平台都是根据2.0团队得出的，例如管理后端，事件操作平台，基于Page Out SSR的API服务以及消息推动中间平台。

随着技术领域的扩展，前端开发人员仍面临许多挑战，例如操作和维护的压力。那是正确的，前端的到来可能会减轻遇到的困难。

让我们看一下：无服务器体系结构，触发，功能实例和调用后端服务。当云功能平台接收触发该函数的事件时，它将启动一个容器以运行功能代码。如果此时已收到新事件，并且上一个容器仍在处理上一个事件，则该平台将启动第二个功能实例来处理第二个事件。实际上，它不应该那么复杂。简而言之，它是为了使前端远离无服务的操作和维护设计，并使用使用该功能来解决业务中遇到的问题的设计思想。

在这里，我们比较传统节点服务之间​​的差异。它们本质上是在这些方面运行的，但是触发因素和多样性在原件上发生了变化。因此，我们还进行了一些业务改编和较小的转变。使用 @/ - ，现有服务可以无缝迁移到新服务。

因此，基于基于组件的结构，已经得出了对在线教育的大型前端体系结构的全景。最高水平是业务发展。较低级别的左侧是诊断功能，业务定位问题，发现的时间和效率是团队能力的核心指标。如果您想成为一支优秀的团队，那么确定是否可以优先考虑对当前网络问题的反馈非常重要。较低级别包括业务，组件，中间平台和操作环境，这是支持业务快速发展的基本能力。正式，由于它们的存在，业务可以更快地运行速度更高！

在线教育的前端研发效率工具的演变

从需求开发的角度来看，这包括许多重要阶段：需求提案，审查和宣传；设计和产品协议以完成1.0的演示原型； PM和开发应用资源用于确定开发时间和时间表。这将体验产品内容的PK以及有关技术解决方案的设计和建筑发展的思维。进入开发阶段，有必要调整协议，技术解决方案，项目里程碑，然后进入开发，联合调试和测试阶段；完成后，产品体验，UI检查，错误修复，然后灰度，释放和完整音量。

在这里，我只是概述了从想法到目标的过程，这实际上是一个非常复杂和系统的工作流程。当前的团队已准备好完成产品要求，并且开发领导整个开发过程。需求需要对整体需求进展有相对良好的控制。带领十个人参加开发过程的确是很大的压力，该过程每天持续数百人。

参与并完成一些商业实践后，我将在此处提出一些未成熟的建议：

好的，让我们来指出，开发阶段 - 本地开发，接口联合调试和测试发布，我们如何加快速度！

在当地开发阶段，业务开发需要更好的脚手架，以帮助开发人员改善其发展经验。以上四个是我对CLI工具的理解。该团队还孵化了类似的脚手架工具，以帮助我们解决一站式商店中的前端开发体验问题。

得益于JSON，EDEN和同学，CLI工具的实施可以使开发更加关注业务。

前端只是软件开发系统的一部分，而不是团队的整体开发效率，因为也有客户和后端工程师。因此，是否可以预先定位接口协议和联合调试风险的风险，降低沟通成本并反复劳动是为了提高效率。

就是这样的一组工具（）。完成了接口数据输入，CGI模拟以及简单的数据采集和测试功能。在业务实践过程中，开发方法的解耦将发现该协议将首先出现，这将节省接口调整时间的1/2-> 2/3。

多亏了清阳和过去的练习。

调试本身仍然不可避免。然后上面仍然有许多问题。如何解决？

该团队基于它得出了这样的工具！

大多数学生可能都使用了它，所以我不会介绍它。

当然，这很有用，有很多选择。但是，我仍然非常喜欢。您可以找到可以访问的Aven。多亏了Aven，，，在过去的一段时间内登陆了他们的投资

在测试阶段，使用TAPD管理错误订单的状态可降低通信成本并促进后续统计。与数据交谈很重要。企业微信中的小型机器人也非常忙且易于使用。定期提醒，数据统计和产出降低了人工成本。在整个过程中，我们已经连接了QTA在核心业务中的自动测试。谢谢Fang Jie和其他同学的贡献。

测试后，有发行版。我个人认为该版本有很多问题。操作异常，不规则性，释放冲突等需要依靠流程来确保释放成功率并陪同业务。因此，我们在发布周期中拆除了核心路径，并为杀死怪物和升级的关键节点设置了关键节点。通过机器简化释放过程的重复性劳动，并确保通过流程发布质量。

谢谢伊甸园，在过去的一段时间内所做的努力。

产品发布后，如何进行动态操作是一个复杂而系统的项目。我对过去一年所取得的成就感到非常满意。除了依靠研发责任外，我们还需要工具箱方法来帮助每个人一起完成质量的构造。数据报告 - >数据统计 - >定量评估 - >快速响应！

工具只是手段。您可以选择自己选择和使用的任何东西，目标是解决问题！我要感谢我所有的朋友。质量提高不能与每个人的努力分开，这对每个人来说都是一个普遍的成就。

研发过程是一件非常有趣的事情。经过深入了解，您会发现团队有许多痛点要解决。当我第一次来到团队时，我批评了研发标准。幸运的是，领导人不是小气的人，我没有被解雇。今天回顾过去，我看了过去，写了许多。确实是很多人！从那时起，经过2年的迭代，每个人都取得了长足的进步，并且经验仍然是一件有趣的事情。

让我们在这里抽象一下，在我的理解中，提高效率和质量的手段是规格和工具。

规范：这将使团队更加专业，并朝着工业化时代发展 - 形成技术建筑系统！

工具：这将使团队更有效，并朝着情报时代发展 - 形成研发式组装线！

3。摘要和前景

团队开发的建筑演变与上面的图：统一技术堆栈 - >组件 - > R＆D效率工程 - >服务中间端口---->云集成！一切实际上都是平行的。不必在串行中进行一个接一个地处理。您的团队现在最需要的是您要解决的问题。我认为，只有首先生活才能生活得更好。危机的感觉导致了生存的愿望和饥饿的存在将使人们更加热情。

中间平台已经讨论了太多。在这张照片中，让我与您分享我们的前端中间平台的外观！前端的复杂性和前端的系统性已经发展到更适合前端增长的环境。我很高兴遇到了一个好时代。无论是传统的前端，多端还是业务后端还是数据处理机器学习，还有更多的事情可以完成，前端跨度现在是整个软件开发系统。

过去几代人的持续努力不断地打破了边界。因此，我们的价值可以扩大！今天有产品的地方，必须存在前端！这并不是说开发必须是前端开发，而是要参考前端思维，如何更好地成为面向产品的，面向设计的和以用户为导向的思维。对经验和可用性有更多深入的理解和思考。

提高经验和优化性能的最佳方法是引入新技术。值得注意的是，新技术的投资应适应当地条件。为不同类型的业务和产品选择不同的方法。以下是一些技术要点，可能需要花费一些时间在教育方案上投资未来。当然，在商业社会中，技术只是一种手段。为了追求利润和价值，我们可以选择合作或购买以介绍我们的业务。尽可能科学地解决业务问题并为产品创造价值是业务开发的核心。当然，工具产品的性质可能不同。选择一种适合您解决问题并创造价值的方法是技术人员的核心能力之一。

我了解的团队规模：一支小团队中的10人内；中型团队中有20人 - > 50人；大型团队中有100人 - > 200人。我在这里总结了一些必要的条件，这是中型团队可持续发展的基本目标。在大多数情况下，业务团队很少有100多人的前端尺度，并且基本上是中小型团队，维持不到50人。因此，以上三个基本视图支持了我这样一个团队能够长时间发展的基本要求。

左边的团队官方帐户，右边我的微信，欢迎沟通

研发过程是一件非常有趣的事情。经过深入了解，您会发现团队有许多痛点要解决。当我第一次来到团队时，我批评了研发标准。幸运的是，领导人不是小气的人，我没有被解雇。今天回顾过去，我看了过去，写了许多。确实是很多人！从那时起，经过2年的迭代，每个人都取得了长足的进步，并且经验仍然是一件有趣的事情。

全文摘要

“作为网络开发人员，稳定的技术时期已经到来，2019年也是一个新阶段的开始。我们还可以期待未来的网络技术开发。随着人口统计学的股息结束，移动中的所有时代逐渐结束，并且多末端平行的时代正式开始了培养实际的产品体验和详细介绍的详细信息。

从技术角度来看，PWA进入了一个稳定的时期，以下是填充基本功能，例如推送和离线。但是，在桌面上应用NW将逐渐侵蚀传统客户开发的领域，从而节省了时间和精力，并可以统一技术堆栈。今年的开发人员会议没有提及，但WASM确实可以为Heji 和视频提供更多的开发空间。跨端领域对未来发展仍然非常乐观。它可能是下一个跨平台移动终端的最终解决方案。在语言层面，TS，DART和GO也进入了前端发展的愿景。最后，必须提到的三个主要框架和迷你程序符合标准化和网络。

在看似繁荣的前端世界中有太多令人眼花乱的选择确实是一件有趣的事情。您可以判断这是一个繁荣的时代，无论是虚假的繁荣还是开发商的自我努力！透明

上面的段落引用了我曾经写过的评估：“在2019年开发人员会议上的参与感。”确实，前端技术的发展已经达到了相对稳定且陡峭的攀登状态。更多地专注于垂直领域的深层种植，例如VR，AR，音频和视频；例如，水平字段和客户方向的多末端集成，RN的持续开发或与后端字段相似的微服务体系结构的设计，等等。

众多的技术系统还使当今的应用程序更容易，支持大规模服务的成本越来越低，并且对技术开发人员的全面功能的要求也发生了很大变化。 API男孩一词将来将成为许多人的新标签，现在甚至被绞死在许多人身上。如何找到价值，如何提高价值以及如何创造新价值是每个发展学生将来需要考虑的问题。

在这里很明显它是发展，而不是前端开发！我希望在未来几年内，无需在所有应用程序开发中区分前端，客户或后端。我们是软件开发工程师。随着工程师的能力的提高，边界将继续被打破，组织将受到欢迎。

我的直觉是，业务产品支持的开发将更加精简，并且将逐渐形成基层分散的建筑。

将来，我们将对普通用户更加友善，尊重技术本身，并更多地尊重发展学生。

该团队隶属于腾讯，是中国最专业的前端球队之一。

多年来，我们一直专注于前端领域，并负责数十亿级的企业，例如QQ信息，QQ注册和QQ组。目前，它重点介绍在线教育领域，精心抛光腾讯课堂，企鹅辅导和三种主要产品。