一、产品介绍大家好，我是云集前端团队的一员。首先介绍一下我们的产品体系：麻机为什么叫麻机？因为我们在云集都是养鸡的！表格单子天天写，没进步没技术输出？组件库生态早就成熟了，砸了再建？Maji是一个基于Vue框架的中后台搭建解决方案。在云集应用一年多，已录用近200页，整体效率提升70%。No-Maj的优势：快速上手——拖拽组件配置，响应式预览快速开发——10分钟熟练操作一个页面，完善的开发测试流程，无需搭建，快速上线，需求快速迭代——速度更快应二次开发迭代需求，小迭代java包已经搭建并发布。访问速度快——saas平台，所有老页面都可以访问。全套——内置前端全套服务：埋点、监控、权限、灰度。Github：点我（移动业务相关流程、代码和组件除外，启动后进入127.0.0.1:8080/generate/lego/edit/form测试页编辑）演示地址：点我产品演示应用效果二、产品背景:随着业务的发展，尤其是2019年，业务需求迅速扩大。中后台系统越来越多，50+后台系统。中后台系统的需求占据了前端团队70%的工作量，人员占比更是高达60%。如何快速响应中后台系统的需求，是业务方、产品经理、项目经理最关心的问题。中后台系统要求复杂度低，至少90%的页面可以标准化，大量人员投入重复性工作，成长空间狭小，开发者实际能力不足不能得到充分利用。该产品的状态自2019.4起建立。由于产品定位反复试错，于2019.10投产，赋能有一定编程基础的前端、后端、产品测试同学。适配表单页、列表页、详情页三种页面类型，包含38个功能组件。截至目前，云集内一共推出了近200个使用麻鸡配置的页面。产品定位赋能**->由核心团队开发，可供公司研发人员使用，包括前端、后端、测试。通过简单的图形化配置和少量代码，不仅直接实现业务需求，还提供权限、环境、灰度、埋点、监控等能力。流程优化**->集开发、调试、测试、发布全链路于一体的一体化低代码开发平台，不局限于工程项目，老项目接入方便快捷前端资源从中后台释放后端系统，组件配置是从操作角度设计的。中间越做越不对，麻鸡成了转移工作量的工具，并不能真正提高效率。经过审核，我们明确麻鸡的定位是主要服务于前端和后端的学生。在后续的组件设计中，我们逐步引入了代码开发、模板语句等，直接增加了配置页面的可扩展性。3.麻鸡架构设计1.架构设计2.工作流前端技术日新月异，需求的迭代让我们无暇重构。iframe已经成为跨技术栈整合项目最直接的方式，无论是jsp、vue1、vue、React都可以方便快捷的对接。3.组件生态4.数据协议设计在组件数据设计方面，只有两个核心字段type（组件类型）和id（组件id），其他属性可以归类为业务属性，属于业务配置组件内部的字段，渲染引擎不关心它们，只要正确渲染组件并填充数据即可。vuex中的设计是floorList（主页floorid），idModule（组件配置数据）对组件数据进行离散化管理，将组件嵌套关系归类为业务配置，渲染组件可以在组件内部更自由的操作。需要用到moduleId，组件自己匹配配置数据渲染到目标组件中。5、代码注入功能设计代码注入功能提高了组件生态的自由度，根据组件生命周期或事件插入执行事件，目前支持componentCreate（组件创建）、componentWillDestroy（组件销毁前）、beforeSend（接口请求构建前），afterSend（接口请求完成）和valueChange（表单数据变更）这五个场景足够日常开发使用，后期扩展也很方便。为了让在web编辑器中编写代码的生成体验与在ide中保持一致，这里使用了VSCodeMonacoEditor插件。json中存储的自定义函数是字符串格式的，需要定期处理去掉头尾，放入函数中才能使用。保持this通过bind指向当前组件的vue实例。四、痛点及解决方案1、无需重复请求多个select组件配置同一接口请求的外部数据源，页面初始化会同时执行多个重复接口解决方案。解决方案：在不改变原有组件交互和配置数据结构的前提下，实现全局重复接口的合并，很容易想到实现2.统一封装的http方法中配置数据的历史包袱。每当我们回头看几个月前的代码，是不是会有新的想法？更好的想法或产品需求的变化需要重新设计原始解决方案。对于可配置页面，历史包袱是一个核心问题。解决方法：页面初始化存储JSON到vuex时，存储数据时会为所有组件执行一个historyDataUpdate方法，同步需要的组件的旧数据，减少组件内部兼容处理，只更新数据维度操作。、Q&AQ1：为什么不生成代码？A1：生成代码的形式对老项目结构有侵入性，中后台系统的迭代需求大于新页面的需求。生成代码的形式，不方便二次配置，而且我们中后台系统中有古老的jsp项目，使用iframe可以快速访问Q2：其他玩p2c和d2c的大公司有什么区别，都是还兼容vue和react？A2：建系统开发投资成本高，其他大厂体量大，同类型需求量大，投入产出比合理。大多数企业内部使用的构建系统可以明确地限制边界。框架体系、标准化视觉、标准化接口、标准化交互，可以大大降低配置的复杂度，否则得不偿失。6.总结Lowcode和nocode是近两年最热门的前端项目之一。我们在打磨过程中走了很多弯路。总结起来，开发这类项目有两个核心问题：用户是谁？满足什么业务场景？我们不是在转移复杂性和工作量，而是以如何为团队赋能为核心出发点。在特定的业务场景下，构建系统才能发挥最大的价值。软件行业拥有广泛的生态系统。为了实现通用化和商业化，增加配置的复杂度是不可避免的，但是当需求受到特定领域的限制时，复杂度就大大降低了，我们可以通过规范来限制变化。作者：云集前端团队https://github.com/yjfe/maji链接：https://juejin.cn/post/690603...来源：掘金，github版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
