We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
可视化编辑工具的技术栈涉及ReactJS+NodeJS，如果想做好做深入可鞥需要深入到AST(抽象语法树)。
我厂目前有着低代码甚至0代码开发的需求，这个应该不算需求，更像是目标和愿景，需求需要具象化。
正所谓知己知彼，百战不殆。我们要做对的事情，就需要充分了解目前的背景。下面我会阐述我厂目前的背景，和遇到的问题。
我入职的部门属于公共产品部负责前端部分开发，我部门主要负责根据我厂的基础组件库，开发具有业务封装的组件库。目前这部分组件库已经从0到1，有了当前使用的稳定版本。所以我们的客户更多的是为一线开发人员服务，他们有负责业务模块开发的前端、二次开发的人员、后台开发人员。目标对象对于前端工程化可能了解不多，他们更专业的方向是业务，所以我们需要为目标对象提供更加快速的页面开发方案，让他们更专注业务开发。
所以工具的定位一目了然---面向初级前端开发者或者后端开发人员能能够通过某种方式快速生成前端页面，搭建项目，让他们只专注业务逻辑的开发
之前我只做过H5软文页或活动页的开发，没有接触过可视化编辑工具的开发，所以一脸懵逼的。经过这几天的学习和调研，终于对低代码/0代码开发有了初步的了解。
总的来说无论是低代码开发、还是0代码开发都是为具有一定开发能力的人服务的。提高开发的效率为目的。
提升开发效率的方式总结起来大概涉及如下几个方面：
下面会解释上面涉及的点：
特性1：初始化整个项目。跟vue-cli类似，用命令行方式可交互的快速初始化一个项目。能够快速初始化一个符合我们规范的项目架构和相关依赖。工具发布到npm仓库，使用者可以全局下载，然后用命令行方式使用，可以避免使用者一步步新建项目，也可以实现初始化项目的一个标准流程。
特性2：可以通过特定的命令快速生成文件到某一个目录，或者生成多个文件到相关目录（例如Laravel tinker）
做一套项目规范，这种规范不会是细化到变量函数规则等，更多的是大规范，保证标准化输出
比如开发VSCode插件，针对我们自己的规范和项目结构做代码自动生成
比如storybook，集成了组件开发，预览，调试和文档说明一整套方案，组件代码可以直接复制使用，方便我们快速系统的研发组件
综合以上的，较少手写代码量就是效率的提升
可以把封装过的组件和区块（区块这个概念可以参照antd-design那套），把页面级别的区块当做一种资源，这种资源可以做版本维护和修改。在需要的时候直接拿来用。
也是我接下来要做的工作的重点。通过预置组件，然后拖拽生成页面布局，继续拖入组件丰富页面，然后编辑器工具读取组件的props配置信息，用可视化配置方式配置组件的props，使用者可以预览组件，最后保存代码到项目中，进行业务开发。整个过程对于初级前端开发人员来说可以少些很多代码，对于后台开发人员，他对页面设计做到了可视化开发，不需要了解太多前端开发的细节。
上图更直观，两张图描述完整的业务架构
以上这些概念：组件、插件、区块、模板，统称为物料资源。目的就是代码复用和较少代码量
图中是组件props配置的原理图。当某一个预置组件被拖入到主操作区的时候，点选当前组件对象，组件的props配置信息会通过不同值类型的表单组件展示出来。例如：String类型就是input组件展示，Boolen值就是Switch组件展示。配置表单组件具体是哪种是由需要配置的值类型决定的
首先看整体，形成了闭环，我们整个可视化编辑工具和配套的CLI工具等等提升开发效率的配置设施是可以循环往复。 从右下角看，这些工具最终会生成一个完整的项目。 项目是由CLI命令行初始化后，然后由一个个组件构成的。 这些组件聚合成区块，也就是页面级别的组件。 再通过拖拽方式，将组件拖拽到编辑器的主操作区，形成组件数据树形结构，编辑器通过拖拽构造一套组件树对象，拖拽的时候其实修改的是组件树的json结构。通过修改数据，然后驱动页面的即时更新，这部分其实交给React去完成就好。核心就在于操作JSON数据树描述好组件树和组件配置props以及组件之间的层级关系就好了。 编辑器输出的是JSON数据，然后通过解析引擎将JSON对象编译还原成组件。生成一个大的组件树，通过React模板文件，最后生成一个file.jsx的react文件
下面具体讲讲上图中涉及的概念：
组件包括：UI组件+业务组件 最小资源级别 开源UI组件库 自己开发维护的一套业务组件库
组件包括：UI组件+业务组件
组件是系统里最小的资源级别，其他的大区块都是基于这个构建的
区块就是快速搭建页面可复用管理的代码片段 页面级别的开发物料资源 JS->CSS->Model->Service->Pages 下载区块->基于区块初始化好的页面组件修改代码 可自定义、版本维护、快速创建区块模板的CLI 可以依靠拖拽工具配置生成 直接生成页面和路由(单入口/多入口路由)
区块就是快速搭建页面可复用管理的代码片段
区块是页面级别的，可以通过代码库实现版本维护，具体可以参照antd-design的区块理解
快速创建项目的目录结构、布局、主题 项目初始化级别 UI布局主题可配置切换/配置面板清单 项目初始化时可以选择，预览 可以版本维护 CLI命令行实现/git clone ****
快速创建项目的目录结构、布局、主题
模板可以理解为一个主题，项目初始化的时候会选择一个主题色，主题布局等。主题也可以做版本维护
AST抽象语法树代码转换/代码自动生成的原理支持 源码编译识别 代码自动生成底层原理 词法(拆分代码块)->语法(抽象语法树AST)->代码生成 DSL领域特定语言：AST/Schema/模板渲染引擎 CSS Tree / JS Tree / Html Tree
AST抽象语法树代码转换/代码自动生成的原理支持
其中配置的方式不仅仅局限于props一种，如下方式可以考虑：
数据驱动模式是我们一定要做好的思维模式转换，你拖拽操作最终映射的就是数据结构变化，将数据交给react vue这样的框架，让框架去做UI渲染。所以深层次的数据机构与算法是大家要重视的两方面能力。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
可视化编辑工具的定位
可视化编辑工具的技术栈涉及ReactJS+NodeJS，如果想做好做深入可鞥需要深入到AST(抽象语法树)。
我厂目前有着低代码甚至0代码开发的需求，这个应该不算需求，更像是目标和愿景，需求需要具象化。
正所谓知己知彼，百战不殆。我们要做对的事情，就需要充分了解目前的背景。下面我会阐述我厂目前的背景，和遇到的问题。
我入职的部门属于公共产品部负责前端部分开发，我部门主要负责根据我厂的基础组件库，开发具有业务封装的组件库。目前这部分组件库已经从0到1，有了当前使用的稳定版本。所以我们的客户更多的是为一线开发人员服务，他们有负责业务模块开发的前端、二次开发的人员、后台开发人员。目标对象对于前端工程化可能了解不多，他们更专业的方向是业务，所以我们需要为目标对象提供更加快速的页面开发方案，让他们更专注业务开发。
所以工具的定位一目了然---面向初级前端开发者或者后端开发人员能能够通过某种方式快速生成前端页面，搭建项目，让他们只专注业务逻辑的开发
之前我只做过H5软文页或活动页的开发，没有接触过可视化编辑工具的开发，所以一脸懵逼的。经过这几天的学习和调研，终于对低代码/0代码开发有了初步的了解。
总的来说无论是低代码开发、还是0代码开发都是为具有一定开发能力的人服务的。提高开发的效率为目的。
如何提高开发效率
提升开发效率的方式总结起来大概涉及如下几个方面：
下面会解释上面涉及的点：
脚手架
特性1：初始化整个项目。跟vue-cli类似，用命令行方式可交互的快速初始化一个项目。能够快速初始化一个符合我们规范的项目架构和相关依赖。工具发布到npm仓库，使用者可以全局下载，然后用命令行方式使用，可以避免使用者一步步新建项目，也可以实现初始化项目的一个标准流程。
特性2：可以通过特定的命令快速生成文件到某一个目录，或者生成多个文件到相关目录（例如Laravel tinker）
工程化
做一套项目规范，这种规范不会是细化到变量函数规则等，更多的是大规范，保证标准化输出
编辑器插件
比如开发VSCode插件，针对我们自己的规范和项目结构做代码自动生成
组件设计系统
比如storybook，集成了组件开发，预览，调试和文档说明一整套方案，组件代码可以直接复制使用，方便我们快速系统的研发组件
减少代码量
综合以上的，较少手写代码量就是效率的提升
物料资源
可以把封装过的组件和区块（区块这个概念可以参照antd-design那套），把页面级别的区块当做一种资源，这种资源可以做版本维护和修改。在需要的时候直接拿来用。
可视化编辑工具
也是我接下来要做的工作的重点。通过预置组件，然后拖拽生成页面布局，继续拖入组件丰富页面，然后编辑器工具读取组件的props配置信息，用可视化配置方式配置组件的props，使用者可以预览组件，最后保存代码到项目中，进行业务开发。整个过程对于初级前端开发人员来说可以少些很多代码，对于后台开发人员，他对页面设计做到了可视化开发，不需要了解太多前端开发的细节。
可视化编辑器工具
业务架构
上图更直观，两张图描述完整的业务架构
以上这些概念：组件、插件、区块、模板，统称为物料资源。目的就是代码复用和较少代码量
编辑器配置原理
图中是组件props配置的原理图。当某一个预置组件被拖入到主操作区的时候，点选当前组件对象，组件的props配置信息会通过不同值类型的表单组件展示出来。例如：String类型就是input组件展示，Boolen值就是Switch组件展示。配置表单组件具体是哪种是由需要配置的值类型决定的
编辑器总体技术架构
首先看整体，形成了闭环，我们整个可视化编辑工具和配套的CLI工具等等提升开发效率的配置设施是可以循环往复。
从右下角看，这些工具最终会生成一个完整的项目。
项目是由CLI命令行初始化后，然后由一个个组件构成的。
这些组件聚合成区块，也就是页面级别的组件。
再通过拖拽方式，将组件拖拽到编辑器的主操作区，形成组件数据树形结构，编辑器通过拖拽构造一套组件树对象，拖拽的时候其实修改的是组件树的json结构。通过修改数据，然后驱动页面的即时更新，这部分其实交给React去完成就好。核心就在于操作JSON数据树描述好组件树和组件配置props以及组件之间的层级关系就好了。
编辑器输出的是JSON数据，然后通过解析引擎将JSON对象编译还原成组件。生成一个大的组件树，通过React模板文件，最后生成一个file.jsx的react文件
下面具体讲讲上图中涉及的概念：
组件
组件是系统里最小的资源级别，其他的大区块都是基于这个构建的
区块
区块是页面级别的，可以通过代码库实现版本维护，具体可以参照antd-design的区块理解
模板
模板可以理解为一个主题，项目初始化的时候会选择一个主题色，主题布局等。主题也可以做版本维护
编译
可视化配置
其中配置的方式不仅仅局限于props一种，如下方式可以考虑：
数据驱动
数据驱动模式是我们一定要做好的思维模式转换，你拖拽操作最终映射的就是数据结构变化，将数据交给react vue这样的框架，让框架去做UI渲染。所以深层次的数据机构与算法是大家要重视的两方面能力。
Nodejs服务支撑
CLI工具有哪些功能？
即时编译预览
参考文章
The text was updated successfully, but these errors were encountered: