本周最流行的开源低代码编程工具:Mometa

想知道这周GitHub上趋势榜周排名第一的是什么项目吗?

图片

就是这款 面向研发的低代码元编程,代码可视编辑,辅助编码工具\

mometa

图片

现在市面上低代码开发工具有很多,但是mometa可能和大多数此类工具不一样,mometa对于吾等程序员来说,在概念上更像一个美工使用dreamweaver的感觉。

来先看看mometa的主要五大特点:

  • 面向研发的代码可视化编辑
  • 可定制团队内物料库
  • 多语言、多生态支持,目前暂只支持 React,后续有计划支持 Vue
  • 接入友好,Webpack>=4 插件化接入
  • 开发友好,物料库支持热更新,不破坏已有开发模式

按作者的说法,mometa 是在基于本地开发的的基础上,新增了可视化编码的能力,所以它不是说你一点代码都不需要懂,而是在你懂代码的基础上,更好的辅助你提升效率,这样解释其定位似乎更合适。

实际的使用界面如下:

图片

使用者也不用担心对低代码平台会形成依赖,二次开发可以无缝进入代码开发模式。

小伙伴们肯定接着好奇,怎么无缝接入呢?

那我们要说说下面两种情况:

就是如果只是从头开始全新的开发,其实就三个步骤。

  • 1、使用团队开发指令,新增一个空的占位路由 & 页面
  • 2、进入 mometa,查看本地物料,和远端物料市场,选中自己需要的物料,直接拖拽,基本成型的页面布局完成
  • 3、进入 ide,完成数据联调,数据传递等,源码开发

但是如果是对已经存在的功能进行优化,只需要:

  • 1、进入 mometa,物料操作插入
  • 2、反向定位直接进入 ide 源码开发

这里所说的反向定位是指支持从视图定位代码位置,就像这样:图片

下面TJ君再来教你如何快速上手,先下载相关代码:

pnpm install
pnpm run start:app:cr # 开启本地开发预览模式 

安装依赖

npm i @mometa/editor -D 

安装 antd 物料

npm i @mometa-mat/antd -D

在项目根目录中创建 mometa-material.config.js

module.exports = [require('@mometa-mat/antd').default]

接入编辑器,修改webpack.config.js

const MometaEditorPlugin = require('@mometa/editor/webpack')

module.exports = {
  module: {
    rules: [
      {
        test: /.(js|mjs|jsx|ts|tsx)$/,
        // 注意,只需要处理你需要编辑的文件目录
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
        }
      }
    ]
  },
  plugins: [
    isEnvDevelopment &&
      new MometaEditorPlugin({
        react: true,
        // 开启物料预览
        experimentalMaterialsClientRender: true
      })
  ]
}

这里需要注意一点:

不需要开启官方预设的 react-refresh,记住哦

然后,启动 webpack dev server,开启 http://localhost:${port}/mometa/就可以了。有了这个是不是一下子觉得编码更容易了呢?

小伙伴们可能还想知道mometa实现的原理,TJ君简单和大家一起探讨下。

一个就是React的实现,对于下面这段 React 应用代码:

function App() {
  const [list] = React.useState(['p1', 'p2'])

  return (
    <div>
      <h1>Title</h1>
      {list.map((text, i) => (
        <p key={i}>{text}</p>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, window.root)

可以通过 babel 插件 babel/plugin-react,编译时注入 JSX 的元信息 __mometa 至 props 中,包括 colNumber, lineNumber, filename 等;这一步骤就是在编译时提前注入代码元数据。

function App() {
  const [list] = React.useState(['p1', 'p2'])

  return (
    <div
      __mometa={{
        start: { line: 5, column: 4 },
        end: { line: 10, column: 4 },
        filename: '/App.tsx',
        name: 'div',
        text: 'raw text',
        // 以及其他数据
      }}
    >
      <h1 __mometa={{...}}>Title</h1>
      {list.map((text, i) => (
        <p __mometa={{...}} key={i}>{text}</p>
      ))}
    </div>
  )
}

更多关于mometa的深入内容,可能需要小伙伴自己体验一下尝试一下才能更好的发掘咯,项目地址如下:https://github.com/imcuttle/mometa,如果觉得不错,记得持续关注TJ君的公众号TJ君哦!

请登录后发表评论

    没有回复内容