一天就涨了 280+ star ？！
最近我们的开源项目iMove一天内上升了280星，在github Trend 榜第，排名第一，取得了不错的成绩，说明这个项目定位准确，解决了开发者的问题。
今天通过这篇文章，我给大家介绍一下iMovie开源项目。内容包括iMovie功能及实现原理，原创在线代码运行能力，如何自动解析节点的npm包依赖。还是有很多亮点和创新的。
介绍下为什么做 iMove ？
本节简要介绍
我们为什么要做iMove？
我眼中理想的前端是什么样的？
举一个例子，我的过程可视化工具iMove最终解决了什么问题。
前端的难题
我觉得前端开发有很多问题，尤其是以下三点。
UI是变化的，这导致开发必须紧跟。
逻辑挑战，开发也要改代码，大量后端处理逻辑在里面。
接口，这是历史原因，主要是后端合作造成的。实际工具人的自我修养上，如果没有节点BFF层，会有很工具play跳蚤多问题需要组件来解决。
我眼中理想的前端
简单来说，其实我理想中的前端可以做到以下四点。
逻辑可组装性：实际上是最小粒度的接口和UI的复用。
流程可视化：这些可重用的最小单元可以按流程排列，进而达到简化操作的目可视化图表的。
配置趋同：这是由于多系统造成的运营成本高。最好是统一放在一起。
可流程玩性沉淀：让产品沉淀玩法，变得分享可重复使用的能力。
对于开发者来说，iMove正是完成这些目标的理想工具可视化编程。移动鼠标，记下节点功能流程图如何制作，导出代码，放到具体项目中直接使用。不方便吗？
那么，什么是iMove？
它是一种工具，非侵入性的。
双击函数，编译后的进程可以导出可执行代码，方便在具体项目中可视化音乐软件集成。
测试方便，直接右键，这里有创新。建设银行官网
让开发像操作配置一样完成功能开发，实现重用和低代码。
举个栗子
这些介绍，或许，可视化音乐软件没有任何体感，不容易理解。来看个例子吧~
如果有一天你收到详情页购买按钮:的要求
获取详细信息页面的产品信息。
商品信息包括以下内容
当前用户收到优惠券了吗？
领取优惠券需要关注店铺还是加入会员？
根据返回的产品信息，购买按钮有建设银行app下载以下形式
如果您已经收到凭证，按钮将显示“已收到凭证购买”
如果你没有优惠券
如果需要关注领建设取优惠券的店铺，按钮显示“关注领取和购买优惠券的店铺”分享会分享什么内容好
如果需要加入会员才能领取优惠券，按钮显示“加入会员领取优惠券并购买”
如有异常，显示底部样式。
注意：如果建设用户没建设工程管理有登录，建设银行app下载将会调用登录页面。
我们可以将上述复杂的业务逻辑转换成分享者下面的示意性伪代码：
//检查登录
const che可视化数据图表ckLogin=()={
返回requestData('/is/login ')。然后((res)={
const { isLogin }=res | | {工具人男配他觉醒了 }
return isLogin
}).catch(错误={
返回false
});
};
//获取详情页数据
const fetchDetailData=()={
返回request data( '/get/detail/data ')。然后((res)={
常数{
已经申请，
needFollowShop，
needAddVip，
}=res
如果(已应用){
setStatus('hasApplied'); } else { if(ne工具人男配他觉醒了edFollowShop) { setStatus('needFollowShop'); } else工具人是什么意思 i建设银行官网f(needAddVip) { setStatus('needAddVip'); } else { setStatus('exception'); } } }).catch(err => { setStatus('exception'); }); }; checkLogin().then(isLogin => { if(isLogin) { re可视化数据图表turn fetchDetailData(可视化工具); } else { goLogin(); } });诚如上述例子所示，虽然业务复杂度并不是非常高，但其背后的沟通和理解成分享功能暂停使用本其实工具英文并不低，想必大家在各自业务中遇到的实际场景比这复杂棘手得多。然而，业务逻辑的复杂度决流程图软件定了代码的复杂度，越复杂的代码越难维护流程图软件，假如某天你接手了一个逻辑很分享作文复杂的他人项目，这其中的维护成本是非常高的。不过这也正是 iMove 所解决的问题之一，面对上述同样的业务需求，我们来看看使用 iMove 是如何开发的。
如上所示，原本晦涩难懂的代码逻辑通过 iMove 以流程图的形式工具英文表达了出来，现在产品的业务逻辑一目了然。除此之外，iMove流程图软件 中的每个节点都是支持编写代码的，而流程图的走向又决定了图中节点的执行顺序，可以说“流程可视化即天然的代码注释工具人男配他觉醒了”。
因此，就从“易读性”和“可维护性”上来看：iMove 流程可视化的形式 > 产品分享会分享什么内容好经理的 PRD 文字描述形式 > 程序代码形式。
iMove 的应用场景
前端 React 组件一般在 ComponentDidMount 里发起请求，根据请求成功的数据完成渲染或其他建设银行app下载业务逻辑，这种可视化大屏是完全无 UI 的 Ajax 请求处理。除了组件声明周期，就只有各种交互事件里，这里面一般是 UI 和 Ajax 混用的场景。
- 前端流程，比如点击事件，组件生命周期回调等。
- 后端流程，比如 Node.js 或 Se流程图用什么软件做rverless 领工具人男配他觉醒了域。
- 前端+后端，比如前端点击事件建设银行app下载手机银行， Ajax 请求和后端 API 。
iMove 优势
上文提到的内容只是 iMove 的冰山一角，我们一起来看下 iMove 都有哪些优势：
1）逻辑可复用
面对频繁迭代的日常业务需求，我们一定会遇到许多相似、重复的开发工作。体现在代码中它可以是一段通用的 utils 工具方法，建设银行app下载也可以是一段通用的业务逻辑代码（比如分享），但究其本质它们就是一建设银行信用卡个代码片段。为了提高代码的复用，我们往往会将其封装成一些通用的类或函数，然后在各个项目中拷贝粘贴（做得好一点可工具play跳蚤以将其封装成 npm 包，但修改发布的流程又会稍显繁琐）。
而在 iMove 中建设银行，每个可复用的代码片段都可以被封装成流程图中的节点。当想在不同项目中复用逻辑的时候，直接引入对应的节点/子流程即可，每个节点还支持参数配置，进一分享欲是什么步提升了节点的复用性，使用体验可以说是非常简单了。
再往后设想一步，假如 iMove 已经在某个业务场景中沉建设银行app下载淀了一定量的业务节点，当下次再遇到相似的业务需求时，逻辑部分是否分享的英文可以直接复用现成的节点拼装而成。这可是大大提升了研发效率，缩短了项目的研发周期。
2）面向函数
在节点的设计方面，iMove 做得比较克制，每个节点其实就工具人是什么意思是导出一个函数，因此编码体验上几乎没有什么上手成本，只要你有JavaScript基础就能使用。你可以照常 import 其他 npm 包，也不用考虑节点之间的全局变量命名污染等问题，将它当做一个普通的 js 文件即可。
3）流程可视化
我们将流程可建设银行营业时间视化的这种开发方式称建设银行客服电话之为“逻辑编排”，它的好处（逻辑表达更为直观，易于理解）前文已经介绍过，这里就不再重复赘述。
4）工具人男配他觉醒了逻辑/UI 解耦
我们在日常业务开发流程图用什么软件做中经常会遇到：UI 样式经常变化，而业务逻辑较为稳定，甚至还会有建设银行app ABTest 需求查看改版效果。
然而许多开发者在组件开发之初并不会设想到将来会有这一步，因此一个业务组件往往会将 “业务逻辑” 和 “UI样式” 耦合在一起。而到了改版的时候才会发现要想抽离和复用业务逻辑并不容易，维护成本也大大增加。
不过当你使用 iM建设银行客服电话ove 开发之后就会发现：组件代码自然而然就拆成了 “业务逻辑” + “UI样式”。而且，不同版本的 UI建设工程管理 可以维护多套，但业务逻辑部分只要交给 iMove 维护一套即可。这样的开发方式不仅可以最大程度地复用业务逻辑代码，而且还提高了项目的可维护性。
5）更简单的代码测试
为了提升 iMove 的使用体验，我们实现了“浏览器端在线运行节点代码”的功能。这意味着当完成一个节点的函数功能时，你随时可以在浏览器端 mock 各种输入来测试该节点的运行结果是否符合你的预期。
也就是说，在无分享屏幕须引入测试框架、脱离上下文环境的前提下，你就可以单独对某可视化数据图表一个节点的函数进行测试，这大大降低了代码测试的成本和门槛。与此同时，你还可以顺手将每次的测试输入/输出分享通信作为测试用例进行保存，渐而形成一份完备的测试用例，这不但可以保障该节点的代码质量，还可以更放心得被引用在其他项目当中。
6）无语言/场景限制
虽然 iMove 本身是一个 Java流程管理Script 工具库分享作文，但在我们的设计中 iMove 并没有对使用语言和场景加以限制。也就是说，你不仅可以用 iMove 编排前端项目中的 js 代码，同样也可以用 iMove 编排后端项目中流程图用什么软件做的 java 代码，甚至其他场分享欲是什么景的其他语言。而这一切，流程管理其实最终只取决于 iMove 将流程图编译出码成什么语言而已。
iMove 技术原理
在对 iMove 的项目背景有了一定了解后，本文接下分享通信来将带大家一起揭开它背后的技术原理~
如何简流程再造单的搭建可绘制的流程图应用？
抛开 iMove 偏开发的功能不说，大家完全可以把它当做一个流程图的绘制工具来使用（画完之后还可以导出图片保存到本地~）。那么 iMove 又是如何绘制流程图的呢？想必大家一定对此比较好奇，这里必须得给蚂蚁团建设银行客服电话队做的 X6 引擎点个赞 ，真的很好用~
X6 本身并不和 React 或 Vue 捆绑，因此你可以在任何框架内配建设银行app合 X6 一起使用。除此之外，它提供了一系列开箱即用的交互组件和简单易用的节点定制能力，只需简单调用一些 API 就能快速实现相应的功能。
“投放配置schema”点击“编辑”
后续我们会专门出一篇文章介绍 iMove 如何使用 X6 快速搭建一个可绘制的流程图应用。
iMove 的建设银行核心就是基于 X6 协议实现的。
- 有节点：利用 X6 的可视化界面，便于复用和建设银行app下载编排。
- 有指向边：即流程可视化，简单直观，边上还可以带参数。
- 有 function 和 schema2form，支工具人的自我修养持函数定义，这是面向开发者的。支持 form，让每个函数都可以配置入参，这部分是基于阿里开源的 for可视化m-render 实分享通信现的。
整个项目难度不大，基于 X6 和 fo流程管理rm-render 进一步整合，将写法规范化，将编排工具化，这样克制的设计使得 iMove 具备小而美的特点，便工具人于开发使用。
如何将流程图编译成可运行代码？可视化音乐软件
相比于绘制流程图，i分享通信Mov分享的意义e 更吸引人的是它可以将流程图编译成业务项目中可实际运行的代码。
在线编译 vs 本地编译
首先，iMove 既支持浏览器端在线编译提供 zip 包下载，也支持本地命令工具英文行 watc流程管理h 实时编译出码。
1可视化）在线编译
为了降低 iMove 的建设工程管理上手成分享欲是什么本，我们加入了浏览器端在线编译出码的功能，这样开发者无需安装工具就能直接下载编译好的代可视化图表码。
具体该如何实现呢？经过调研，我们发现 jszip 是一个集读/写/改 zip建设 文流程图符号含义件于一身的 JavaScrip分享小故事及感悟t 库，而流程图怎么做word且还支持浏览器端运行。因此，我们完全可以按照出码的文件目录生成一个 json 丢给 jszip 打包，最后再用 file-saver 提供下载即可。
// key 是"文件/目录名"，value 是对应的"文件内容"
{
"nodeFns": {
"node1.js": "...",
"node2.js": "...",
"index.js": "..."
},
"context.js": "...",
"dsl.json": "...",
"index.js": "...",
"logic.js": "..."
}2）本工具play跳蚤地编译
在线编译的方式固然简可视化音乐软件单，但在项目开发中会遇到一个问题：每次修改代码都需要重新下载 zip 包并解压到指定目录，尤其是调试时需要频繁修改代码会非常不便。为了解决这个问题，iMove 提供了本地编译的方式，通过 watch 流程图的保存操作，实时地编译出码到业务项目中。
具体该如何实现呢？上述问题的关键在于：本地如何监听浏览器端的流程图保存操作。但是反过来想，为什么不可以是流程图在保存时发送消息通知本地呢？这么一来，我们既可以使用 socket.io 等类库在浏览器和本地流程管理之间建立 websocket 通信，也可以使用 koa / express 等类库在本地启动一个 http 服务器，只要在接收到流程图保存信号时触发编译出码即可。
iMove 代码运行基本原理
解决完 iMove 如何编译代码的问题工具play跳蚤，再来看看 iMove 编译的代码又是如何建设银行营业时间运行的。
要想运行代码，iMove 需要解决两流程图如何制作个核心问题：
- 如何按流程图的顺序依次执行节点？
- 如何处理数据流（比如上一节点的返回值是下一节点的输入）？
RxJS 看起流程管理来是个不错的选择，函数响应式编程似乎天然解决上面的问题。但考虑到它的上手成本无疑会对 i可视化图表Move 的使用者造成巨大的心智负担，因此最终我们并没有采用这套方案。
1）对于第一个顺序执行问题，iMove 采用了一种低成本的方式来解决：
- 首先，X6 支持导出流程图的 json 数据，我们可以将其精简处理后保存为一份 DSL 文件。
- 其次，根据这份 DSL 文件，我们可以从中提取出每个节点的代码工具简笔画部分成为单独的文件，进而构成一个节点函数集。
- 最后，接下来只要按照节点和边的上下游关系顺序调用相应的节点函数即可。
2）对于第二个数据流问题，iMove 考虑到实际应用中节点对数据操作的各种场景，一共设计了四种数据读写方式:
- config:只读型，每个节点的投放配置，节点之间互不干扰。
- payload:只读型，logic.invoke 触发逻辑时，可以传一个 payload 值，每个节点都能读取该值。流程图如何制作
- pipe:只读型，流程图模板上一个节点的输出是下一个节点建设银行app下载手机银行的输入。
- c分享功能暂停使用ontext:可读写，某一个逻辑流中的公有数据，如果祖先节点又通过 setContext 设置数据，那么子孙节点可以跨节点建设银行app通过 getContext 访问到该数据。
至此，iMove 解决了流程图代码运行的问题。如果你有注意 iMove 编译后的代码，就能看到如下结构：
理解Flow
Flow的基本概念很简单，就是一个有向无环图（DAG），数据在节点间流动。

- 节点 Node
- 节点是组成流的主要单工具元，负责对流入节点的可视化音乐软件数据进行处理，并输出到后续节点进行进一步的处理。
- 端口 Port
- 每个节点拥有输入和输出端口，输入端口负责数据流入节点，输出端口负责数据流出节点。每个节点都可能拥有一个或者多个输入和输出端口。
- 连接 Link
- 一个节点的输出端口连接到另一个节点的输入端口，节点处理好的数据通过可视化数据图表连接流入其后的节点。
Flow的实现基本思路就是用一个函数function实现一个节点，输入端口映射为函数的输入参数。输出端口映射为函数的返回值。

流中有一个节点被设置为终流程图用什么软件做点节点（End Node），通过节点间的连建设银行接关流程图模板系，以终点节点开始通过连接搜可视化分析索所有的依赖关系（树形查找），得到一个节点运行的栈。例如上图，我们就可以得到一个 [node1，node2, node3] 这样的栈。按顺序出栈的方建设银行app式执行每一个节点的功能就可以运行整个流。（注意，这是一个简单版本的Flow的实现，仍然是一个批处理，工具人男配他觉醒了不是 streaming）
需要假定每一个节点的功能是无状态的分享会分享什么内容好，这样就可以利用输入输出端口对计算结果进行缓存，但输入值是已经运算过的值的时候，不需要运算，直接返回已经计算过的值。
以上是Flow-bas建设银行app下载e programing（FBP）里的 Flow 概念可视化是什么意思。其实这和 iMove 里的概念是一样的。imove 基于 x6，x6解决了可视化管理 DAG 实现和可视化问题，再结合节点扩展函数写法，继而实现面向开发者的逻辑编排工具。殊途同归，就是这么简单。
如何在线运行节点代码？
iMove 有个比较 cool 的功能就是可以在浏览器端在线运行节点流程图模板函数代码，实时看到运行结果。这工具play跳蚤种所可视化工具见即所得的开发体验对使用者来说还是很友好的，不但测试调试的成本大大降低，还能成为测试用例集进一步保障节点质量。
在 iMove 里编写代码，双击节点即可。
右流程图键执行代码，即可可视化数据图表完成对单个节点的测试。
打开运行面板，填写对应参数，即可执行具体代码。
在线运行 iMove 节点代码需要解决以下分享屏幕一些问题：
- 浏览器端如何直接运行建设银行app节点中的 import/export 等 esm 规范代码
- 节点中 import 进来的 npm 包还有可能是 cjs 规范，浏览器又该如何运行
- 同时选中多个节点时，又该如何运行代码
iMove 实现的背后原理主要还是借助 htt分享小故事及感悟p-import，后面我们会专门出一篇文章介绍它的实现原理，敬请期待~
如何自动解析节点的npm包依赖？
由于每个 iMove 的节分享欲是什么点都支持 import 其他 npm分享作文 包，因此每个节点都有 npm 依赖。但是，如果这项工作让开发者手动填写体验会非常差，因此我们做了自动解析的功能。
原理其实比较简单，了解 npm vi建设银行app下载ew 命令即可。就拿 np分享m view lodash.get 举例来说，查看命流程图符号含义令行输出可以看到:
$ npm view lodash.get
lodash.get@4.4.2 | MIT | deps: none | versions: 13
The lodash method `_.get` exported as a module.
https://lodash.com/
dist
.tarball: https://r.cnpmjs.org/lodash.get/download/lodash.get-4.4.2.tgz
.shasum: 2d177f652fa31e939b4438d5341499dfa3825e99
maintainers:
- phated <blaine.bublitz@gmail.com>
dist-tags:
latest: 4.4.2
published over a year ago by jdalton <john.david.dalton@gmail.com>如上所述，该命令成功获取到 lodash.get 这个包的最新版本。当然，np工具简笔画m view 命令不适合在浏览器端执行，但究其本质都会走网络请求查询。我建设银行信用卡们再用 npm view lodash.get –verbose 就能看到执行过程中其实发起了请求:
https://r.cnpmjs.org/lodash.get。
接下来就很简单了，只要根据 import 语法规则分享小故事及感悟用正则匹配出节点代码中的依赖，再调用上面的 api 就可以自动解析出该节点的包依赖了。
总结
在 UI 侧有 imgcook 这样的设计稿转代码的工具，应对变化是足够的。但在逻辑领域，真正能解决问题的又面向开发者的少之又少，iMove 算这个方向的一个探索。相信通过上面的讲解，大家都能够感受到它的魅力。
iMove工具人 的口号是Move your mouse, generate code from flow chart，即动动鼠标，写一下节点函数，代码导出，放到具体工程里就可以直分享会分享什么内容好接使用。像运营配置一样开发，这已经不是愿望，而分享的英文是已经实现了的。如果大家对 iMove 感兴趣，也可以一起参与开源项目中。
