AppSmith 使用体验 | 踩坑记录

简介

延续上一篇文章 # Strapi v4 使用体验: 到处是坑 | 踩坑记录, 目前依然是在调研各类低代码的工具和平台, 于是尝试了惦记已久的 AppSmith, 打算基于 AppSmith 复刻一个已有的管理端列表页.

在复刻页面的过程中踩了许多坑, 在此记录一下以便大家后续调研时作为参考.

读完本文将节省你约 1 周左右的深度调研时间.

由于 AppSmith 是一个在线服务, 因此本文提到的内容具有时效性, 阅读时请注意当前时间与文章发布时间的间隔, 内容仅供参考.

TL;DR

建议有开发能力的同学直接基于熟悉的 admin 模板项目进行开发, 自由度/灵活度相比 AppSmith 高很多, 而且现有的前端 UI 框架也不比 AppSmith 自带的 UI 库要差.

正文

什么是 AppSmith ?

AppSmith 是一个低代码平台, 有许多开发者基于这个平台搭建了企业级的应用.

从官网上公布的使用场景 来看, 主要还是以开发管理端/控制面板为主.

体验如何 ?

优点

缺点

  • 拖拽控件到已有的页面上时有可能会打乱布局
  • 容器控件的高度无法选择为适应窗口高度, 只能选择自动或者固定高度.
  • 免费版不支持环境变量/多环境数据源.

    商业授权起步 40 USD 每月, 提供 100 小时使用时长, 后续按 0.4 USD 每用户每小时按量付费, 每用户每月最多收取 20 USD, 对单个应用而言门槛相对较高.

    建议在同一个账户下创建多个应用来分摊授权成本.

  • 网页编辑器上的 JavaScript 代码格式化功能约等于没有, 而且快捷键 Shift + Alt + F 很难触发:

  • 编辑 HTTP 请求时, 无法在脱离鼠标的情况下快速地填写内容, 而且你很难准确的判断按下 Enter 键以后究竟是换行还是确认当前输入的内容:

  • 调试 HTTP 请求时需要打开 Chrome 的控制台, 选中 execute 请求并将 form data 设置为 view source 模式,否则默认的 view parsed 模式下看到的都是二进制字段:

  • JS 和 UI 的编辑器是两个互斥的页面, 导致没法像本地开发一样将 IDE 和浏览器放置在同一个窗口中进行分屏调试.

变通方案是在字段的 Computed Value 里将 JS 代码调试好, 再复制到 JS 对象里, 去引用这段代码:

  • 自带的 moment.js 没有安装中文本地化的配置, 虽然查询出来已安装了 en, zh, zh-cn 三种本地化配置, 但实际都是英语.

  • 无法从第三方库中导入任意内容. 例如: 无法从 dayjs/plugin/duration 中导入 duration 插件:

  • 因为 JS 对象是跟页面绑定的, 所以无法很方便地创建多页面共享的工具类 JS 对象.

    可选的变通方案包括:

    • 把工具类复制到其他页面, 可能会导致潜在的工具类实现不一致/不同步的问题.
    • 花钱上企业版, 用 AppSmith 的 Packages 功能
    • 或者发布一个自定义的包到 NPM 上, 再通过安装第三方库的形式使用这个工具类.

结论

目前来看 AppSmith 相比接触过的几个 admin 模板项目只是多了一个拖拽式的布局生成功能, 在前后端分离的场景下似乎并没有便捷很多, 反而是它的 JS 部分功能有限.

相关内容

推广

欢迎大家尝试电脑微信多开小工具, 12 Mb 的小工具, 可以帮你在电脑上多开微信.

大家遇到什么使用问题或者有任何建议都可以私信我.

相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6415 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js