今天聊：除了页面-低代码也能够快速生产组件

前端早早聊大会，与掘金联合举办。加 codingdreamer 进大会技术群，赢在新的起跑线。

---

第二十七届|前端 Flutter 专场，了解 Web 渲染引擎|UI 框架|性能优化，6-5 下午直播，6 位讲师(京东/满帮/闲鱼等)，点我上车👉 (报名地址)：

全部往期都有全程录播，上手年票一次性解锁所有

---

正文以下

本文是第十六届 - 前端早早聊组件化专场，也是早早聊第 115 场，来自 1688-度城 的分享。

1、自我介绍

你们好，我是来自 CBU 体验技术部度城。今天来给你们分享一下《如何用低代码开发组件》。

2、前言

名词解释

首先来介绍一个概念低代码。你们可能在一些其余的渠道或者说在其余的一些站点上面了解过，它并非一个很是新的一个概念，相反它是一个比较老的概念。所谓低代码 LowCode 可理解为它的代码量会比较少一点。咱们在正常开发的时候，咱们大部分都是用的是源码，即将全部逻辑代码敲出来，可是咱们想但愿用另一种方式把一部分代码写出来，一部分经过其余方式来替代。源码方式 ProCode，还有一种方式叫 NoCode 就是一点代码都没有，主要在一些搭建的场景，它不须要有代码，就能够把一个页面或者说把一个组件搭出来。ProCode 就是咱们以前的源码方式。

方案比较

这三者之间有什么区别的？咱们把除了代码之外的另一种开发的方式，咱们把它叫作可视化的开发方式。什么叫可视化的开发方式呢？可视化就是除了代码之外的 UI 视图设置、GUI 的配置、产品化的配置方案、一些细节的高效抽象等。咱们把代码跟可视化设成两个比例：

• NoCode 所有都是可视化，没有任何一行代码；
• ProCode 所有都是代码；
• LowCode 一部分是代码，一部分是可视化，可同时兼顾效率和灵活性。

这里有这样一个箭头，从上到下来讲：

• NoCode 效率上是最高的，由于不须要去写代码，可能去采用一些可视化的这种方式好比拖拽这种形式就能够生成。
• ProCode 是最灵活的，你们知道那个代码是很是灵活的，能够写不少逻辑。
• LowCode 是有二者之间混合的。如今汽车有新能源车、有燃油车。新能源车它里面又分纯电动车和混动车，混动的车是一部分燃油，一部分经过电动的，它是结合这两种的优点，在现阶段里面是这样看的。

LowCode 本质

这边是个人一个总结：LowCode 是采用一种产品化或者可视化的方案来开发咱们平常的开发，比方说 UI、一些配置等等，来下降开发成本和门槛，同时来提高一些开发效率。写代码须要有一些专业的程序员开发，但低代码产品，在体验作的很是棒的状况下，不须要有很是多的开发经验，普通的一些业务人员，也能够经过这个工具去完成它须要的一个产品的开发。

这个左边是一个可视化。目前来讲，代码它是能够解决不少一些业务逻辑的问题，咱们在一些特殊的场景或环节，仍是须要经过代码来进行一些业务的开发，因此咱们会在整个平台上面嵌入了一个小型的 Web IDE 在线编码的方式来提高总体的一个灵活性和适应性。

低代码开发平台价值

今天讲的主题是怎么去作组件，咱们但愿可以经过低代码方式能多快好省的去作一些组件。什么叫多快好省？就是咱们的产量高、效率高、质量好和投入人少，是很是理想的一个状态。并非说咱们不须要去写代码，由于咱们发现 LowCode 里面的代码量会比较少一点，咱们只但愿去少写一些低效、重复的代码。

案例

低代码在不少场景是能够去应用的，好比中后台场景，你们在市面上能够看到不少低代码的产品，像微软、阿里的宜搭，若是不知道低代码的一个具体应用，也能够去看一下。我今天来说的是导购场景，一个 1688 的无线场景去作这样的一个低代码的应用。

3、1688 前台场景业务背景

你们能够根据我这个 Case 看看有什么启发，在本身的一些应用场景能够用这种方式去作一些事情。先大体介绍一下 1688 前台场景业务：咱们能够简单理解为 B 类的淘宝，批发商须要去采购商品能够在一些工厂或者二级的批发商那里去采购。总体业务的分配比例是无线的用户会比较多一点，因此今天讲的比较多的是在无线场景这块的一个应用。大体的一个链路是这样，中间有一些导购的场景，咱们有不少的产品，经过这些导购的场景去给到不一样端，不一样端又有不一样人群。

从开发页面到搭建页面

在作任何技术平台以前，产品或宣传须要有一个场景，一般是直接手动去开发一个页面去知足这样的一个需求。后面会发现页面上有不少组件是差很少的，业务的每一个页面有些是同样的，有些又是不同，须要有这样一个组合的关系，因此就会产生搭建平台。搭建平台是用来把不一样的组件来产生一个页面，这里有一个比较简短的演示，上面有不少组件，这些组件是能够配置参数或数据源就会生成一个页面。这里能够看到两个组件就能够把它搭起来，搭起来后，就生成了一个全新的页面。因此咱们开发的小伙伴就不用每次去开发这样的页面了，他就会把精力放在组件上去。搭建平台是由产品或运营去搭建，这样能够把开发小伙伴给释放出来，解决了一些业务组件的复用问题、增长了一些页面的灵活性和产出效率。既然平台可搭建页面了，那能够把开发小伙伴的精力重点放到开发组件上去。也就是说经过组件开发，而后在搭建平台使用，就能够生成一个页面，因此咱们的精力主要是去开发组件。

业务场景 - UI 多样的前台场景组件

来看一下总体前台导购场景这样的一个 Case，你们能够看到导购场景的组件样式、排版是很是多的，UI 的展现也是很是多的。

4、面临问题

这里就会出现两个问题：

• 一是 UI 这么复杂多变。因为人员是比较有限的，或者说投入的精力是比较有限的，咱们如何在一些固定的、少许的人力投入下，来构建足够多的一些 UI 组件。
• 二是有不少端的需求。手机端怎么去面对各类各样的 APP、怎么经过一套代码来完成跨端的需求。

如何在有限的人力下构建多变的 UI 组件

如何快速构建多变的 UI

左边是典型的导购卡片，咱们怎么来去作一些提效，最开始想到的是把组件模板提取出来，至关于左边的样式、排版把它固定下来。但最后咱们发现组件它在不一样的 UI 里有不一样的展现，你们看下左边，发现组件模板是很难把它沉淀下来的，UI 是无法进行收敛的。接下来就得想办法怎么去构建 UI 进行提效，既然组件模板无法收敛，咱们会在开发层面想办法怎么去提效。

UI 主要是由两部分组成：节点和样式。形容下面的一些代码片断同样，这个是它的一个节点。咱们但愿可以把片断以前采用手动的方式去把它构建出来，接下来咱们但愿经过一些工具，也就是经过半自动的方式，能经过机器的形式把它构建出来。有两个方式，第一个方式就是说这个节点能够经过可视化拖拽把它生成出来，第二个方式更加直接的，UED 通常会有视觉稿，咱们是否是能够直接经过视觉稿来进行导出，这样的话咱们就能够跨过 UI 开发这个过程。

快读构建视图 - 物料线上化

先来重点讲一下可视化 UI 拖拽这种形式。左边是一个常见的列表，对于这个列表进行拆解，咱们把它每一部分叫作物料，有导航、文字、图片和容器列表，咱们须要可以把这些物料线上化。这就须要经过一个协议，通俗来讲就是经过一个 JSON 描述，把上面的一些物料属性记录下来。比方拿这个图片来举例，咱们就会分红两个属性：一个是属性值，比方说图片地址、渲染方式等；还有一种是样式，比方说高度、宽度和边距等等。有了这些属性了后，可经过这些属性及物料注册到线上，经过产品的方式，把刚才的图片地址、渲染方式，经过一些可视化 UI 的方式进行展示。能够看到上面右边那张图上，图片连接、属性和布局样式。

来看一下简单的一个事例：左边是正常的一张营销卡片，这个时候咱们能够去设置它的宽和高，设置后继续生效，能够去改变图片地址和边距，这是在编排模式下。在预览模式下，它能够正常的展现，这个就是刚才保存修改过的一个值。

节点拖拽实现原理解析

原理是有一个编排拖拽面板和一个预览面板，是经过 Schema 协议的方式把它串起来。这是刚才每一个物料的属性，下面是它的样式的描述。有了这个协议后，在拖拽时把这些物料接入进来，经过物料的属性面板，对每一个物料进行调整，在渲染时把物料导入进来，经过 react create element 直接把它转成虚拟 DOM 进行渲染。

快速构建视图 - Sketch 导出

还有一种更简单的方式就是直接经过视觉稿进行构建。咱们美术同窗或者 UED 同窗，经过 Sketch 设计的一个视觉稿，能够经过视觉稿的插件把它导出，而后经过一些机器学习的一些算法，能够把它的 UI 样式和结构直接还原出来。最后须要通过一些少许的调整，二次加工了后，就能够把整个 UI 直接能够展示出来。在这里咱们再来看一下简单的一个 Case，这里咱们已经把它导出来，导出完了后，咱们在面板里进行导入。你们能够看到导入的时候它是一个 Schema，这个时候它已经在咱们的系统里面，咱们能够对它进行二次编辑。但这里有个要求，视觉稿须要有必定的规范，须要 UED 同窗按照必定规范去作。这一套工具的叫 imgcook。你们也能够去搜索它，去用这个工具，它是能够把一些 PS 格式或 Sketch 格式的一些 UI 直接导入出来，进行代码的一些识别。

验证可行性 开发 AB 实验

刚才也讲了，怎么去还原这些 UI、怎么经过工具的形式去作一些 UI，在尝试着用这个方案的时候，咱们也去跟咱们以前传统的编码方式进行了一些比较。咱们作了两组实验，来看一下经过这种方式是否可以加快 UI 的开发速度。第二种就是咱们传统的一些编码跟样式的一些开发。咱们发现一旦掌握了可视化的开发之后，咱们在后面的一些组件开发时间上大幅度的降低。这个是咱们作的一些测试后得出的一个结论：它能有效的提高咱们 UI 的构建效率。

将数据和事件与可视化 UI 结合

刚才咱们看到了在场前台场景须要展现一个组件，光展现 UI 是不行的。不少时候咱们须要有一些数据，这个是很是必须的，咱们怎么去展示它里面的数据是什么。还有一些事件，UI 点击了之后，它触发什么样的一个事件，好比说去领个红包或者发一个请求等等。正常的一个组件它须要有这三个元素进行一些交互和融合，最后才能成为一个完整的组件。

数据源低代码设计

咱们再来看一下低代码，这个平台里面它们是如何把三个元素进行结合。刚才咱们也看了 UI 是怎么进行产生的，咱们如今来看一下咱们的一个请求，咱们这里叫一个数据源。这里是咱们的一个请求，有请求地址、请求入参、请求方法等等，经过一个面板把几个元素属性整合起来。填写请求地址，比方 JSONP、GET 或 POST，下面就是具体的一些参数，在请求时咱们会有一些比较特定的处理，好比回调函数的一些处理。这个时候经过面板的方式是很是去难以去解决的，因此咱们在里面嵌入了一个小的代码编辑器，这里面它是能够去处理一些回调的一些逻辑等等，咱们能够把一些东西填在这里。这个逻辑是怎么去执行的呢？咱们填完了之后，在线的会把它源码转换成 ES5 的语法，在执行的时候，这是个 String，咱们直接 new Function() 就能够去执行了，这个原理也是比较简单的。

在线代码转化/执行

最后，咱们须要把咱们请求的数据挂载到 UI 上面。咱们须要经过把字段的直接可视化的挂载挂载在 UI 上面，比方说刚才请求了一个列表，那列表里面我要展现一张图片，我要把图片字段要挂在特定的一个 UI 的一个展现上。仍是以刚才那个 Case，拿这个数据去作一个展现，这里是请求的一个数据，你能够理解成是一个列表，这个列表里面我会咱们会把这个数据挂在右边的列表的这样一个容器上面。有了这个数据，接下来刷出来的结构，就会有一个一个列表的数据。可是这个列表你能够发现它图片都是如出一辙的，由于咱们图片如今默认是一张静态图，咱们接下来须要把这张静态图替换成一个动态的图片，这里咱们会有一个绑定变量。在绑定变量里面，由于是一个循环体，这里每个循环的 key，咱们把它设置为一个 item，这里取的是 item 的一个字段，这个 item 就是数据的一个字段，这就叫 image 字段，咱们把它绑定上了之后，这个时候咱们从新刷一下，咱们会发现案例表的数据已经发生了变化，已是变成咱们数据的真实的一个值。

数据挂载 UI

可视化开发还有一个好处，咱们常常会去作二次开发，好比一个组件开发完了之后，过了一段时间，另一个同窗去接手作这个事。这个时候可能他要去迭代一个需求，需求也很简单，好比改一个字段或增长一些小的逻辑等等。正常的状况下，咱们须要把以前的代码通读一遍，知道它具体改的地方在哪里，具体它的逻辑在哪，可是咱们经过可视化左边的展现，会很是直观，比方说我要改一个文字，我就选择文字，把文字绑定的一个变量作一个改动，或者说我作一个逻辑变更。这个在可视化的一个产品里面，咱们是能够很是方便的去作一些二次迭代的，这也是整个低代码平台对后面维护的一个好处。

如何面对跨端的需求

第二点咱们再来说一下如何去作一些跨端的需求。

多端能力支持

咱们如今有不少端，比方说 Web 端、在阿里内部的一些 APP 里还会有一些 Weex 端，其余的一些端上，比方说它要支持一些小程序等等，阿里内部有一个 Rax 框架，这个框架它是能够把它转成 Weex 端、Web 端。Rax 框架它也能够经过转码这种形式去支持小程序。咱们怎么去把咱们把低代码 Scheme 实现相似 Rax 转码，咱们也是经过 AST 的这种转码的方式。由于 Schema 是一个跟代码无关、跟 DSL 无关的这样一个逻辑性的描述。比方说你能够把 Schema 转成 React 形式、Rax 形式、甚至 Vue 的形式均可以。可是我最初的 Schema 是不会有任何变化。比方说你后面再过一段时间，可能有另一种 DSL 产生的，或者说另一种更高级的 DSL 产生，我照样也是能够将 Schema 经过必定的转换逻辑把它转出来的。因此经过 Schema 的好处就是说它能够很是简单的去收拢各类 DSL 的这样一个能力。

Schema 转码方案

具体怎么去经过 Schema 去转，咱们会把 Schema 里面会进行一些拆解，Schema 里面有不少的节点，比方说有一些专门负责作视图描述的节点，它告诉你这个结构是怎么样的。还有一些数据请求节点，告诉你这个请求地址、请求参数和请求类型等。还会有一些生命周期的参数，还会有一些交互事件的一些函数，咱们把它进行一些拆解，拆解了之后，经过 AST Babel 插件进行一个解构，把它转成形如这样的一个目标的 DSL 的代码。

CBU 无线场景 LowCode 落地数据

这个是咱们本身的一个落地数据，咱们用了这个产品之后，咱们发现内部的提效也是很是明显的，提效了 400%。不少时候咱们须要去写，可是咱们用了这种开发方式后会发现可能须要一个简单的拖拽就能够了。

收敛技术，高效协同

最后来说一个问题，就是技术收敛跟高效协同的问题。

在一个团队开发的过程当中，常常会出现一些问题，比方说我须要用哪一个组件、我不知道哪一个组件能用、个人组件构建发布它是怎么去处理的、不少文档比较散不大好找和刚才说的二次开发的问题（去看别人代码，程序员最怕看别人代码很是累）。这就是咱们原先线下的开发方式，由于它是每一个人本身去执行的，很难收口，规范也很难执行。固然咱们也能够经过一些特定的规范，比方说工程的这种方式来作一些收敛，这也是一种方式。咱们能够把这种方式搬到线上，工程也好其余方式也好，把它线上化，你们入口是同样的，你们进去都是一个入口。我能够在这个平台里面我能够知足我作任何的事情，线上的话我能够很是好的去管控你，很是好的去规范，比方发布构建和代码的质量，能够把它所有收拢起来，只要看一个文档就行，不须要去管其余的东西。这种比较适合一些对技术要求不是特别高的，可是它又要知足它的一些业务的整个场景的推动。由于是一个线上的，因此它是能够经过 Web 平台作一个统一的收拢，对使用者来讲，只要体验好这个产品，就能够完成一些开发任务。

整合开发链路

这个是传统的开发链路，它有不少构建、搭建环境等等。可是咱们经过线上化后，都是采用云构建、云预发和部署的方式，它没有这种环境这种概念，由于它都是在 Web 上面，因此只须要作一些开发调试、接口调试等基础工做就行，其余的工做都是经过平台或者产品的方式把它包装好就好了。由于步骤开发少了、链路少了，开发效率确定也会提高。

构建与发布

咱们还常常会有一些发布构建的问题。比方说咱们须要建仓库，不一样的部门、不一样的公司建仓的脚手化等等都是不太同样。新人都须要把流程所有走一遍，可能还会有一些其余杂七杂八的细节，好比说安装依赖、调试方式等等。咱们经过产品的方式、低代码的方式，怎么去作呢？新建仓库或叫初始化，经过在 Web 上去新建一个组件，在组件里面把一些逻辑写在后台，或者调试的时候，经过实时的预览，只要按调试按纽，就能够把预览界面展现出来，不须要去写什么其余的一些命令，或者是装其余库等等。

这个是咱们新人注册的时候，只要填一些信息就行。调试的时候咱们会把这些包所有都会拉下来，这个是调试的这样一个逻辑。咱们还会有一些本地开发和构建的问题，若是有线上线下的构建，咱们须要去作一些分支，或者说作一些发布部署等等。经过云构建的方式，能够把这写东西所有放在后台，前台只要发一个命令或请求，能够在云服务器上把这些东西作了。

传统开发与低代码开发对比

还有一些传统的开发方式，比方文档、组件库，代码的开发风格你们都是因人而异的，每一个人的开发方式写法都不同。经过平台的方式，有统一文档，物料也是在线的，你们在面板里面有多少物料，你们能够本身选，反正有就有了，没有的话咱们就提需求，你们再去扩充，这样是一个很是统一的。最后转出来的代码都是同样的，由于你们都是用机器转的，风格是彻底统一的。对整个团队或者说对一个技术团队有一个很是好的收敛。

低代码开发平台的目前存在的问题

低代码也有本身问题，并非说特别牛逼的。

• 但相比传统的开发体验而言，它须要有必定的学习成本，对于一些特别是一些开发习惯来上来说，由于有些开发同窗他习惯了手写代码，忽然有一天对他说不用手写代码，只须要拖拽用产品这种可视化方式，他可能不太习惯，这有一个成本习惯去调整的，这是一个问题。
• 有些产品特别是一些中后台的产品，它的逻辑很是复杂，可能有几千行，他有各类交互，这个时候你把这个东西放到可视化的产品来讲，它自己对低代码平台产品的体验来讲是很是高的，须要有一个更好的这样的体验，才能把这些逻辑经过 UI、经过产品、经过可视化去把它搭建起来，否则维护起来会很是麻烦，可能比你单独写代码还麻烦一点。
• 是否是能够跟现有的一些源码模式可以有一个更好的互通。比方说组件的形式，能不能把一些已经写好的组件导入进来，我作完的组件也可以跟其余的一些源码组件不一致，我都是同样的，你们都是能够在一个大的一个容器里面去用，可以跟现有的源码体系作一个更好的结合。

5、将来规划

这是咱们将来的一些规划，咱们这个引擎目前用的是阿里本身写的一个低代码引擎，咱们也努力的去把它完善，后续还会把它作得更加好用，如今只是一个能用的方式。咱们但愿后面可以输出一些通用的引擎，可能咱们在之后会把引擎进行开源，你们能够把全部的业务，只要你用 React 或者 Vue 的产品，这种框架我均可以用引擎去解决一些业务上的一些问题，甚至我能够在一个引擎上面进行二次开发，造成本身在业务、公司或部门上的比较业务化的这样一个平台，这个引擎就像一个框架同样，去解决一些问题。

6、总结

总结一下，主要讲了两大问题。第一个是说咱们怎么经过低代码有限的方式来构建的一些 UI 组件，这里咱们讲到了是经过一些智能导出，经过可视化拖拽的形式来替代手写快速实现 UI 开发。咱们怎么来进行一个跨端需求，比方说多 DSL 的需求，咱们能够把 Schema 做为一个中间态，这个 Schema 跟 DSL 无关，经过一些转换的方式，这里写的是用 AST 方式去转成不一样的端。最后咱们也讲到了一个咱们怎么样经过云平台方式去作一些技术收敛，经过在线的开发方式来解决咱们以前线下开发方式的一些问题。

7、团队介绍

介绍一下咱们的团队，就是咱们这边的一个 CBU，我是属于 CBU 搜索广告团队的，我这里打个广告，咱们整个团队的话是负责作 CBU 搜索，Web 无线的，还有 CBU 大流量广告这两块业务。咱们的核心的技术也用了不少大流量的 Node BFF 的应用，包括咱们刚才讲到的低代码的一些开发方式，在咱们业务里面已经全面启用了，咱们也有不少一些前端加智能算法，智能算法在咱们的业务里面去用。有兴趣的同窗、想投简历、想跟我聊一些低代码相关的一些同窗也能够加我一下个人微信，后续咱们进一步进行沟通。

8、推荐书籍

我推荐的书是一些老书，你们可能都听过，可是不必定你们都看过，但我以为这些书是一些比较基础的比较经典的书，你们能够有时间的话能够去看一下。

9、QA

Schema 里面包含了 onClick 函数的字符串，那怎么处理做用域呢？或者跳转页面这些操做应该要怎么处理？

在 Schema 会有函数，首先实例化。低代码是以组件或者页面维度，因此在实例化这个函数的时候，咱们会把容器的一些对象、函数的 this 对象和函数的 target 对象等等，咱们会把它们注入进来，咱们会把一些父元素的一些节点、一些变量咱们会把它注入进来。这样在函数里面使用 this 或其余属性的时候，是能够去用到这些对象。

若是是正常的页面跳转的话，是能够在咱们物料上面去配一个连接地址，去作一些页面的跳转，咱们整个低代码也是能够以页面纬度作去作页面的。你能够在整个系统里面去配置一个路由，去处理一些页面跳转关系。

---

别忘了 6-5 下午直播哦，点我上车👉 (报名地址)：

全部往期都有全程录播，上手年票一次性解锁所有

---

期待更多文章，点个赞