尝试用imove做前端项目与感受

这几天我需要在公司做个分享，说现在有一个叫imove库，可以可视化的写代码，让我做个研究。

阅读了imove文档后我决定用vite开始搭建项目

yarn create vite my-react-app

要使用imove，首先得全局安装imove cli

npm i -g @imove/cli

然后在项目中初始化imove

imove -i

再启动一个move的服务器进程

imove -d

这个时候imove会打开本地的3500端口监听数据变化

使用imove编辑器
网络打开（貌似打不开了，用本地启动吧）
65hzt.sse.codesandbox.io
本地启动
github.com/i5ting/imov…

无论是本地打开还是网络打开，imove的前端app都会跟前面打开的本地3500端口链接，这样就可以通过3500端口向项目写数据了。

这块我一开始整了一小段时间，这里给大家画一个示意图方便理解

imove流程图分为3类

• 开始节点
• 判断节点
• 处理节点

双击节点即可编辑代码，按保存快捷键（ctrl+s/command+s）即可保存代码到项目的src/logic目录

接下来我们来做一个实际的例子

需求

1. 如果未登录，在界面中有一个登录按钮，点击登录之后，如果登录成功，显示用户信息
2. 如果已经登录，显示用户信息

src/index.tsx

import { useEffect, useState } from 'react';
import Logic from './logic';
import './App.css';

function App() {
  const [isLogin, setIsLogin] = useState(false);
  const [name, setName] = useState('');

  useEffect(() => {
    // 监听 action 事件
    Logic.on('action', (payload: any) => {
      if (payload.status === 'SUCCESS') {
        setIsLogin(true);
        setName(payload.data.name);
      } else if (payload.status === 'FAIL') {
        setIsLogin(false);
      }
    });
  }, []);

  const loginClick = () => {
    // 开始执行 Login节点
    Logic.invoke('LoginClick');
  };

  return (
    <div className="App">
      {isLogin && <div>欢迎你,{name}</div>}
      {!isLogin && (
        <div>
          <div>您未登录，请登录</div>
          <button onClick={loginClick}>登录</button>
        </div>
      )}
    </div>
  );
}

export default App;

<判断登录是否成功的代码>

export default async function(ctx) {
  await new Promise((resolve,rejected)=>{
    setTimeout(()=>{
      resolve();
    },2000);
  })
  return true;
}

[处理登录成功的代码]

export default async function(ctx) {
	ctx.emit('action', { status: 'SUCCESS',data:{name:"立超"} });
}

此外，变量还可以通过Logic.invoke()的第二个参数传入到UI管道中使用。（官方文档并没有提这一点，尝试了一下可以这么做）

使用感受

》优点

逻辑可视化

》缺点

与react hook代码无法很好的结合，代码变得复杂：逻辑图中编写代码无法直接使用hook变量，操作起来变成了两头写，还需要不停的切换浏览器窗口。

使用存在风险：逻辑被编辑器取而代之，意味着你的大量代码依赖于imove编辑器，团队新成员需要额外的学习成本。此外谁都不能保证这项技术在未来有长远发展，如果未来变成了淘汰技术意味着你的代码变成了一堆烂代码，难以维护。

这不是一个代码生成器，而是一个逻辑显示工具：很多人看到这么一个工具或许以为他可以为你生成代码什么的简化工作，实际上它只是把逻辑判断的部分图形化了，该写的代码可以说是一行不少甚至更多。