关于前端:可视化搭建的一些思考和实践

传统前端业务开发中，组件角色定位、演变

在传统 Web 开发过程中，前端我的项目的技术架构形式大略分为几个步骤，个别咱们先确定一个根底的技术选型，比方 Vue 或者 React，随后，咱们会抉择性能组件库，比方 ElementUI 或者 antDesign，之后再依据业务须要，二次封装一些定制化的业务组件，这基本上就实现了咱们对中后盾零碎的技术构造搭建。

随后，在一直的业务开发过程中，咱们再依据理论须要，形象一些公共区块模块，通过与日俱增，通过这些业务区块组件，咱们就能够疾速的去搭建一个新页面，从而极大的晋升团队的开发效率。

然而，在这种场景下，咱们依然不可避免的，须要被动去创立新的页面，这个过程链路仍旧很长，针对这种状况，咱们就须要思考有没有更优雅的形式，将这种开发流程状态进行形象，规则化，从而缩小这种页面反复搭建过程。

组件化的一些局限性

1. 针对局部团队，前端我的项目十分多的状况，咱们仍然须要对每个前端工程独自引入业务组件，这个过程自身也会造成效率的低下。
2. 针对一些简单零碎或者跨部门开发，多个零碎之间的页面，也可能会共享业务组件，这就不可避免的会带来沟通和研发老本的晋升，甚至在很多时候，咱们不得不去在团队工夫中做出一些斗争和共识，能力实现业务开发。
3. 我当初一部分的工作会来自不同的公司、行业，在跨行业、跨公司主体或者第三方社区时，咱们也不足一种规定来实现不同主体之间的高效的流通。

低 / 无代码的充要条件

1. 组件的流通：目前针对组件的流通，咱们不足跨主体的一些协定，比方物料组件的生产、生产、治理、二次封装、编排等等。
2. 丰盛的物料库：基于业务组件的物料库是低代码平台必备的环节。
3. 编排：编排的次要能力，是为了不便开发者轻松设计、制作、配置业务组件。
4. 渲染器：当咱们的业务开发者开发结束一个页面，咱们须要提供一种形式让用户去预览或者公布，这就须要一个渲染器将咱们生成的代码进行页面渲染、展示。
5. 出码模块：基于低代码平台开发完一个我的项目后，咱们须要交付源码包或者我的项目，不便咱们的开发者进行生产部署或者二次开发。

低代码的一些局限性

低代码是须要业务、产品、技术等等，多方之间进行一定量的斗争，咱们只能解决 30%~60% 的业务场景，最终的成果依然须要进行业务验证。

低代码实际 -H5-Dooring

H5-dooring 是去年下半年，开源的一个低代码平台，次要的目标是不便用户疾速搭建一个简略的低代码我的项目，从 2020 年下半年至今，Github 上曾经有 4500+stars，同时有 50+ 家企业、1000+ 用户基于 H5-dooring 生成页面。

低代码交互的三大实现思路

第一种是钉钉宜搭采纳的这种天然流布局形式，它的长处在于这种开发方式更贴合咱们传统的开发流程，它的配置灵便度也十分高，并且也更容易去做适配，但相对来说开发门槛略高，对没有技术开发教训的小白开发者不太敌对。

第二种是咱们 H5-Dooring 采纳的这种智能网格布局计划，它的劣势是咱们开发者能够去通过拖拽来更轻松的搭建一个组件、页面，但毛病就是无奈去对一些更简单的层级组件进行实现，比方图层或者图片之间的叠加，或者对多个组件之间的灵便度，有着十分高要求的场景。

最初一种就是自在布局计划，自在布局是当初很多 lowcode 平台广泛采纳的计划，比方易企秀、鲁班、字节魔方等等，它的益处不言而喻，对有着自定义需要的业务场景，它的反对颗粒度十分敌对。

H5-Dooring 整体架构简介

H5-Dooring 的整个架构次要包含以下几个模块：物料库、布局画布、属性面板、性能面板，以及一些其余的拓展能力。

渲染方面：H5-Dooring 的页面渲染是基于 schema 信息，动静进行组件的渲染，布局形式次要是利用 schema 中，组件的地位信息来动静计算网格地位，从而渲染出整个页面。另外组件的加载，也是基于 schema 组件信息按需进行加载，所以针对一个简单页面的渲染，它的加载速度也不会很慢。

属性面板、表单设计：H5-Dooring 的属性配置采纳动静配置面板，外部基于一套 DSL 规定进行实现、解析，反对灵便的属性设置。另外，咱们也封装很多罕用的表单组件，反对开发者疾速进行页面搭建。

动静数据源设计：当初很多低代码平台的数据源设计采纳的都是动态设置，比方多个业务组件应用同一个数据源，往往是进行多份数据的复制，之间不再产生关联。H5-Dooring 反对动静数据源设计，这意味着咱们能够在生产环境下动静去加载数据，从而进行数据更新、替换。

出码模块：目前 H5-Dooring 反对构建出 Dist 包和源码包，背地的实现是基于咱们的基座工程，它容许咱们的用户，在线生成 Dist 工程和源码工程的 Zip 包，并提供下载。

可视化搭建的将来瞻望

第一点是搭建引擎优化，从而可能去反对咱们做更多功能的扩大、以及丰盛业务组件物料，以来满足更多的利用场景。

第二点是离线化，很多公司受限于各种网络问题，须要一些本地离线化开发，咱们前期可能会通过 Electron 这样的能力去进行实现。

第三点是增强组件之间分割的动作零碎，以反对咱们业务组件的交互跟合作。

第四点是咱们监控零碎的智能化搭建，咱们能够通过对用户操作、用户数据的反馈系统，剖析出一个用户他本人的偏好，而后动静通过一些个性化服务能力。

最初一点是跨端的需要，这种需要也是当初很多前端我的项目的刚性需要，咱们也会去构想一些实现计划。