解决方案:云凤蝶-如何在企业级中后台业务实践低代码搭建

　　解决方案:云凤蝶-如何在企业级中后台业务实践低代码搭建

　　首先对云峰蝶这个产品做一个大概的介绍，因为目前它内部只服务于Ant，所以演示一下它的功能可以帮助大家有个印象。

　　第二篇会介绍云峰蝶为什么要做，解决问题的设计思路是什么，底层逻辑是什么。

　　第三节将详细介绍云峰蝶的技术实现，并选取两个重点进行分析。

　　最后简单总结一下，发个招聘广告~

　　一、云燕蝶产品介绍

　　主界面

　　首先给大家看一下云风蝶编辑器主界面的截图。可以看到它和VSCode这个大家每天都在用的IDE很像，但是最明显的区别就是除了编码之外，多了可视化的Canvas功能。

　　核心功能演示

　　无图无真相，下面用几个视频来演示一下云峰蝶的一些核心功能特性。

　　免费画布

　　第一个分享给大家的是云峰蝶的免费画布。

　　大家可以看看这个demo视频，我把两个antd按钮拖拽到页面，大家可以发现所谓的free canvas就是类似Sketch设计软件或者制作PPT的拖拽体验，比较符合具有用户直觉，并且入门门槛较低，没有编程技能的用户也可以使用。

　　当然，云峰蝶的免费画布在用户体验和功能设置上，还是远远落后于Sketch。如果你对这个领域感兴趣，欢迎和我交流~

　　智能向导

　　分享给大家的第二个功能是智能向导。

　　它实际上是一个UI生成引擎，直接从后台界面的元信息出发，通过对API数据字段类型的理解和Ant的Ant Design设计规范的把控，直接生成一个完整的真实的和可运行的应用程序。

　　比如这张图，就是我们早期做的一个对比。左边是我们设计师手工设计的大表单，右边是云峰蝶的智能精灵根据该页面的后台接口自动生成的表单页面。可以看到非常惊喜，质量竟然比机器生成的还要好！

　　经过不断的迭代和演进，到目前为止，云峰蝶UI生成引擎的产出量已经占到了我们平台总代码量的45%左右。

　　下面以视频演示智能精灵的主要使用过程。

　　基本上，你选择一个后台界面，云峰蝶会自动为你生成合适的表格、表格、图表、明细等，完成真实可操作的界面。您可以实时调整和预览它们。对其中收录的数据字段的理解也包括对设计规范的把控，也包括对整个低代码应用DSL的理解。

　　组件导入

　　分享给大家的第三个功能是组件导入。

　　对于一个组件化的搭建平台来说，组件或材料的丰富性和易用性是极其重要的一环。

　　云峰蝶采用开放资产系统，自动从代码世界导入组件。

　　像往常一样，我将向您演示。可以看到导入一个antd组件到云峰蝶使用大概需要几分钟的时间。

　　典型案例页面

　　看完以上核心功能的视频演示，你应该对云峰蝶有了一个大概的了解。云峰蝶的主要应用场景有哪些？

　　为了数据安全，我直接介绍开源的antd-pro网页截图。以antd-pro为代表的系统其实是云风蝶最典型的目标客户，而在能力上限上，我们也可以说，antd能达到的效果，云风蝶也能做到。

　　二、云燕蝶的设计思路

　　为什么做云凤蝶？

　　第一部分简单介绍一下什么是云风蝶，接下来这部分也简单介绍一下为什么要做云风蝶，它想解决什么问题？背后的想法是什么？毕竟，任何工具或技术产品或解决方案的诞生都会有其背景。

　　云风蝶诞生的原因很简单。主要原因是企业与人的矛盾。一方面，建模后的CURD中后台有持续的业务需求，但在整体效率和质量上存在问题。另一方面，虽然设计体系和基础技术发展迅速，但专业前端工程师的数量瓶颈依然存在。

　　云峰蝶解决问题的思路是什么？

　　云峰蝶解决这个问题的思路是什么？

　　让我们简单地考虑一下这个问题。参与人数乘以单个人的工作效率就可以大致得出工作产出，所以两端都可以努力工作。

　　一方面，我们尽量简单化，尽可能提高单兵的效率。比如我们可以提供一些更简单的解决方案：可视化拖拽、低代码、更好的工具：全链路一站式IDE等。

　　另一方面，我们想办法让更多的角色参与进来，并赋予更多的人权力。比如我们尝试让产品经理、设计师、后端等非专业的前端参与研发。我们甚至可以涉及机器智能。，毕竟做一些有格局的事情，人肯定是不如机器的。

　　综上所述，我们正在努力降低进入门槛，减少人工工作，并想方设法提高效率。

　　

　　前端代码开发可以优化哪些痛点？

　　前面介绍了云风蝶的低代码思想，那么低代码相对于“高代码”（Pro Code）有哪些优势呢？要回答这个问题，首先要深挖当前前端代码开发中有哪些共同痛点亟待解决？

　　首先，我想从宏观架构层面来探讨。HTML等XML的设计有两个架构特点：“垂直嵌套和水平扩展”。

　　垂直嵌套是指标签相互嵌套，水平扩展是指标签本身的类型可以无限扩展。

　　而这样的特点也导致了目前的三大前端框架基本都是以组件抽象为中心，分而合之。

　　比如图中，大家可以看到三个框架在Component层面的设计理念和API的复杂程度。

　　这些因素加在一起，导致代码开发门槛高，效率有提升空间。

　　具体有以下几个问题：

　　注：对这部分题目感兴趣的同学，推荐阅读Model编程的前端架构设计

　　此外，还有很多常见的问题，比如：

　　这里其实有一个有趣的细节。事实上，Mobx 诞生于低代码领域的明星公司 Mendix。如果你有兴趣，你可以阅读：

　　让 React 具有反应性：追求高性能、易于维护的 React 应用程序

　　云峰蝶选择什么样的应用架构？

　　云风蝶虽然是一个低代码平台，但本质上是在完成前端应用的开发。难免还是要思考云峰蝶推荐的应用架构？

　　说到前端应用架构或者GUI软件开发架构这个话题，其实大家应该能想到很多耳熟能详的名词。

　　我按时间整理如下：

　　应用架构如何指导低代码平台设计？

　　整体来看，云峰蝶的宏观架构是：视图与逻辑分离，宏观分层，不同层采用不同策略提高效率

　　当然，这里的意思并不是说做视图和做逻辑的人真的是同一个团队里的两个不同的人，而是表达这两个工作其实可以分管不同的角色，他们的技能要求而特点其实是不一样的。

　　比如一些先行者，微软的Blend for WPF，XAML的可视化设计器，希望设计师负责界面，工程师负责逻辑。

　　另一个例子是虚幻引擎的蓝图可视化脚本系统。其思想是试图对一个大型软件中不合理的部分进行分割和重组。

　　三、云燕蝶技术实现

　　上一节介绍了它的设计内容、原因和方式。这部分将重点介绍云峰蝶部分核心功能的技术实现。

　　建筑大图

　　首先我们来看一下云峰蝶的宏观架构。我会根据前后端来区分，大致如下。

　　整体来看，前端技术栈以TypeScript和React为主，收录的模块从底层DSL到编辑器、运行时、UI生成引擎等，还有独立的资产体系。

　　后端主要基于Node.js、Java和Serveless技术。

　　但由于时间因素和个人专业范围限制，本次分享将只围绕免费画布和大型Web IDE技术架构这两个话题展开。

　　如果对云峰蝶的更多细节感兴趣，可以参考云峰蝶视觉构造的推导与实现-SEE Con​​f2020

　　免费画布

　　它是什么，为什么？

　　遇到问题，第一个要问的问题是什么？

　　我想用过Sketch做设计稿，用Keynote或者PowerPoint做演示的人会更容易理解什么叫做free canvas。

　　为什么选择这种模式？我觉得好处也很明显，因为它更容易上手，屏蔽了专业的前端概念，更符合普通用户的思维，让设计师、产品经理等角色参与到研发环节。

　　如何实现鼠标选中、拖动、调整任意组件？

　　Free Canvas 的核心功能无非是点击、拖动、调整大小等。

　　大家可以想一想，一堆react组件组成的页面，如何通过点击鼠标绘制出相应的选中边框，并且组件可以随意拖动调整大小？

　　这里我们只简单介绍一下云峰蝶的核心原理和思想。

　　核心原理是标记dom，然后通过Dom的MutationObserver机制*敏*感*词*所有组件的dom组件的坐标。当鼠标点击时，可以通过鼠标光标位置与组件dom位置的关系计算出算法。选择了哪些组件。

　　至于拖拽的核心原理，就比较简单了。只要在编辑状态下通过绝对定位渲染所有组件，那么就可以通过计算拖动时的鼠标移动差来完成定位更新。

　　如何将海量交互和展示附加到原创渲染结果上？

　　

　　免费画布有点像设计软件，有很多辅助功能，比如缩放、拖动、对齐、测距、吸附、分布等等，如图。这么*敏*感*词*，每个功能都有自己的事件*敏*感*词*，处理逻辑，ui渲染，这些东西怎么和原来的组件渲染结果融合？

　　答案是燕尾画布的分层架构。这个思路是参考了设计软件的层概念，将渲染层和交互层分开，将逻辑和dom分开。只有视觉位置重叠，这样代码的可维护性和运行的性能和体验都会有很大的提升。

　　如何让页面和布局更低代码化？

　　上面说了free canvas，但是Sketch和PPT都是做静态布局的。云峰蝶不写css怎么做出自适应页面呢？

　　这背后有3个核心设计：

　　云峰蝶整体布局系统简化如下：

　　之所以下这么大功夫屏蔽CSS，主要是因为CSS非常复杂，中后台场景的布局方式比较收敛，不需要全套的CSS能力。

　　大型Web IDE技术架构

　　第二个话题跟大家分享一下。以上介绍了Swallowtail的诸*敏*感*词*。那么大家可以猜猜，在这么大的架构图中，Swallowtail的这么*敏*感*词*，前端需要多少代码？

　　您认为如何组织这些代码会更合适？

　　如何组织代码？

　　早期的云风蝶采用的是最容易引导的，传统的src式自上而下的代码组织方式。当产品已经走过了从0到1的阶段，当我们的功能迭代节奏越来越快，越来越多的时候，逐渐暴露出很多问题。

　　最重要的问题是：一个代码文件应该放在哪里，谁能用，谁能用，没有范式

　　这将导致

　　另一个问题是，云峰蝶的编辑器本质上是在以可视化的方式生成一个应用程序dsl。早期我们采用前端直接读写json dsl的架构，造成了一个5000行，300+接口的庞大单体服务，修改无处不在，不可控。

　　在做云燕2.0的时候，我们的想法是借鉴一些业界最好的设计模式进行重构。我们的主要参考资料是：

　　此外，我们还建立了Swallow Butterfly IDE 2.0的两个宏架构设计：

　　如何避免包之间的循环依赖？

　　上一节提到Swallow 2.0的架构是从一个巨大的src文件夹中拆分出很多子包，那么下面的问题就是如何避免这些包相互引用时产生循环依赖？

　　这个其实在vscode和thiea中都有很成熟的解决方案，即“依赖注入”。

　　简单来说，consumer使用TypeScript Interface作为协议进行注入，让consumer只依赖类型，不直接依赖实现。类型在编译后会丢失，因此对实际代码模块没有直接依赖。

　　并且类型也可以更好的起到文档化的作用，提高可维护性。

　　至于TypeScript依赖注入的核心实现原理是“反射”，即利用TypeScript的装饰器和reflect-metadata在运行时获取类型信息，从而找到匹配的实现。

　　它的使用方法如图所示，基本分为构造函数参数注入和类成员属性注入两种。

　　如何将多个包的代码组合起来运行？

　　上面说了Swallowtail 2.0的架构是从一个巨大的src文件夹里面分成了很多子包，那么这些子包的代码是怎么跑起来的呢？

　　其核心原理其实是基于依赖注入技术实现了一种贡献和贡献的扩展机制。

　　可以简单理解为去中心化配置。

　　为了更好的理解，我们来看一个实际的应用。IDE 上有很多行工具栏。这些工具栏中的每个具体功能可能来自不同功能模块的业务范围，它们的代码应该单独维护。各自的业务包交给不同的人维护，贡献机制负责采集和渲染。

　　四。概括

　　更多有趣的话题？

　　如前所述，由于时间关系，本次分享只讨论整个云峰蝶架构中非常小的编辑器的细节。事实上，还有很多具有挑战性的课题，比如：

　　招聘

　　上面提到的极具挑战性和趣味性的题目难度都很大，非常需要有兴趣的同学一起来共同探讨。

　　所以在这里发一下云风蝶的招募贴也是在所难免的。我们是蚂蚁金服-体验技术部-云峰蝶团队。我们不仅招聘前端，还急需Java、Node.js、产品、设计等各类人才。加入。

　　京东具体招聘请参考：蚂蚁企业应用生产平台招聘中！，也欢迎扫描二维码加我微信交流~

　　说早推书

　　最后，根据会议的要求，推荐一本我认为对coding非常实用的书。谢谢你。

　　解决方案:站群的另一种模式泛站群，什么是泛站群呢？

　　当今社会，SEO和SEM是新兴职业，网络营销推广也离不开SEO和SEM。有些人已经在做站群，为了搜索引擎排名和引流。其实除了一般的站群模式，还有一种不同的站群方式，就是“pan站群”，那么什么是pan站群呢？

　　

　　Pan 分析 Pan 站群

　　

　　如果你实际操作过网站，了解过域名解析，那么相信你应该知道，域名解析方式可以指定前缀，字母、数字、下划线和减号的任意组合，甚至可以不指定前缀,直接用顶级域名，一般来说只有一个点. 即使是顶级域名（url后缀前面只有一个点.），顶级域名连最常见的www前面都没有，所以还有另一种使用方式不太常见的是“pan-parsing”，字面意思是广泛解析，相当于通配符，可以使用任意前缀，然后网站的程序根据访问的域名匹配页面,

　　我们今天要说的泛站群是通过对域名进行泛解析来实现的，泛解析是指使用一个域名，然后自动生成大量的子域名，从而产生大量的子域名。 网站的数量，这是黑帽子SEO优化的一种手段，一般通过网站或者软件采集来实现。当然，这种黑帽操作方式早就没有搜索引擎的胃口了，不过子凡也看了一些网站泛解析到主站，也就是无数个子域名被解析到主站，形成重复站，不过还是有不错的收录，至于排名好像不重要，因为这些站一般选择卖链接或者做访问软文平台，他们基本上可以赚取丰厚的利润。（这种泛解析泛站群其实就是利用域名的二级域名来做站群）