AppSmith 它到底好用吗?

最新推荐文章于 2024-06-05 10:06:47 发布
最新推荐文章于 2024-06-05 10:06:47 发布
阅读量890 收藏 25
点赞数 27
分类专栏： 使用体验 文章标签： 前端 react.js low code 低代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XieEDeHeiShou/article/details/136845348
版权
团队尝试使用低代码平台AppSmith更新老旧管理端，发现其优点如OAuth2集成和丰富的数据源，但也存在控件布局问题、代码格式化不足和局限的JS功能。结论是，在前后端分离场景下，AppSmith不如熟悉的模板项目灵活。
摘要由CSDN通过智能技术生成

简介

前段时间公司里一个给经销商用了挺长时间的管理端需要更新一下, 补充一些功能, 于是我们把项目代码翻了出来, 发现是一个基于 Vue 2 的简易管理端和 Spring Boot 2 后端组成的项目.
简单规划了一下需要改动的范围, 确定好方案之后很快就完成了业务上需要的功能.

本着项目难得更新一次, 不如这一次一并更新一下技术栈, 避免项目腐化的想法, 我们团队内部讨论了几个方案, 包括更新到 Vue 3, 使用 Nuxt 3 进行重构, 使用低代码平台进行重构等.
讨论了一番后, 我们决定尝试一下低代码平台, 于是我们找到了 AppSmith, 当时的搜索结果页大概是这个样子:

  • AppSmith 官网
  • 最强开源低代码平台 - Appsmith 功能介绍与使用体验 - 知乎
  • Github 最火开源低代码 Appsmith: 我们是如何达到 28K Star 的?

团队成员都表示, 哇, 这个项目看起来很厉害啊, 我们试试看吧!

本着调研的心态, 我们把此次改动的管理端列表页作为参考, 打算使用 AppSmith 对这个页面进行一个 1:1 的复制.

接下来就让我们一起来看看 AppSmith v1.16 在真实项目中的表现如何吧. 🧐

Note:
由于 AppSmith 是一个仍在活跃开发的项目, 因此本文提到的内容具有时效性, 阅读时请注意当前时间与文章发布时间的间隔, 内容仅供参考.

所以 AppSmith 它到底好用吗?

让我们先来看看它的优点

  • 管理端项目免不了需要使用登录功能, 正当我们准备随便糊弄一下登录页的时候, 我们发现在新建页面时有模板页可供选择, 真是减少许多调研的工作量 👍:
    image.png
  • 支持标准的 OAuth 2 认证方式, 可以快速的将业务系统的登录功能接入进来, 配置好以后还可以将访问令牌注入到 HTTP 请求中, 并自动刷新令牌. (只可惜这个项目的 Spring Boot 后端没有用标准的 OAuth 2 认证协议 😂)
  • 数据源类型丰富, 支持直接连接到多种数据库, 使用 HTTP 请求或者使用 Open AI 服务等.
  • 可以拖拽式的进行页面布局, 方便开发者像搭积木一样将界面原型搭建出来.
  • 支持编写 JavaScript 函数作为数据源或事件监听器, 自由实现业务功能.
  • 支持导入第三方 JavaScript 库, 扩展平台能力.
    image.png
  • 支持基于 React 或原生 JavaScript 创建自定义控件.
  • 支持将项目持久化到 Git 仓库里.
  • 支持多分支, 允许开发人员在分支上进行开发而不影响已发布的版本.
  • 支持环境变量/多环境数据源, 方便开发者在测试环境的数据源上进行调试.

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

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

那它有哪些文档上没提到的缺点呢?

  • 我们在开发列表页时, 发现拖拽控件到页面上时有可能会打乱已有的布局: 比如拖拽中的控件穿过已有的布局时会导致其下方的控件被挤到其他地方去.

    建议拖拽过程中绕过已有的控件, 尽量从布局的边缘进入画布中间.
  • 容器控件的高度无法选择为适应窗口高度, 只能选择自动或者固定高度 (" 留白是一门艺术 ").

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

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

  • 所有的数据源操作都是由 AppSmith 的代理服务器执行的, 意味着你不能像调试其他 Web 项目一样从 Chrome 控制台里直接找到你想要的 url.

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

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

image.png

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

  • 自带的 moment.js 没有安装中文本地化的配置, 虽然查询出来已安装了 en, zh, zh-cn 三种本地化配置, 但实际都是英语. 这也进一步引发了下一个问题.
    image.png

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

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

    可选的变通方案包括:

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

结论

我们最终花了大概 1 周左右的时间, 一边翻文档学习 AppSmith 的基础知识, 一边弄脏双手进行实践, 最终发现 AppSmith 并没有想象中的那般美好: 目前来看 AppSmith 在前后端分离的场景下似乎并没有显著的优势, 相比接触过的几个 admin 模板项目只是多了一个拖拽式的布局生成功能, 反而是它的 JS 部分功能有限.

如果团队有比较熟悉的 admin 模板项目的话, 建议直接基于熟悉的项目进行二次开发, 自由度与灵活度要比 AppSmith 高出不少, 而且现有的前端 UI 框架也不比 AppSmith 自带的 UI 库要差.

相关内容

推广

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

image.png

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

邓超-码农加点中
关注
  • 27
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
appsmith安装手记:3.appsmith安装
清风弄影
01-28 1163
安装说明见：https://docs.appsmith.com/getting-started/setup/installation-guides/docker ，建议使用 Docker Compose 进行长期的 Appsmith 部署。bash: docker-compose: command not found... 【原因是docker-compose中间的横线导致）终于到了安装appsmith，这个也简单，真是越到后面越容易。http://IP 你就可以打开你安装好的appsmith了，
Appsmith 的中国化项目，是一个开源的、声明式的、可视化的前端低代码框架，可以用来制作 web 应用，微信小程序
06-02
PagePlug 是 Appsmith 的中国化项目。基于Appsmith做了整体性能的优化及汉化，也集合了特色表单解决方案Formily组件、图表解决方案Echarts组件、低代码小程序开发等，是面向研发使用的一个开源的、声明式的、可视化的、符合开发者直觉的前端低代码框架。PagePlug与市面上其他的低代码（轻流、宜搭、微搭、简道云、轻流、活字格等等）面向的使用人群不同，后者更倾向于非编程人员使用，让业务线人员自行构建应用程序。而PagePlug这款低代码产品是面向To D研发人群使用的，它旨在加速开发人员的开发过程，内部系统、工具的开发更简单。
appsmith：一个开放源代码平台，用于构建管理面板，工作流，业务应用程序和任何内部工具
02-03
Appsmith是一个基于JavaScript的可视化开发平台，用于构建内部工具。 · Appsmith是基于JavaScript的可视化开发平台，可快速构建和启动内部工具。 拖放预构建的小部件，然后使用JavaScript将它们连接起来以创建交互式页面。 将UI连接到您的API和数据库以在几分钟内构建复杂的工作流。 UI组件：表格，图表，表单，地图，图像，视频等。 API支持：REST API 数据库支持：PostgreSQL，MongoDB，MySQL，Firestore，Redshift，Elastic Search，DynamoDB，Redis和MSFT SQL Server 托管：云
推荐项目：Strapi 插件 — 数据导入导出
最新发布
gitblog_00010的博客
06-05 300
推荐项目：Strapi 插件 — 数据导入导出 项目地址:https://gitcode.com/Baboo7/strapi-plugin-import-export-entries 在当今快速迭代的开发环境中，数据迁移和备份是每个开发者或运维人员不得不面对的任务之一。Strapi作为最受欢迎的开源Headless CMS之一，其强大的可扩展性让第三方插件得以发挥关键作用。今天要向大家推荐的是St...
Appsmith是一个Web框架，用于构建仪表板，工作流，表单和任何内部工具。-Node.js开发
05-27
Appsmith是一个Web框架，用于构建仪表板，工作流，表单和任何内部工具。 该框架附带UI小部件，例如表格，图表，表单，地图查看器等。 轻松连接到REST API，Postgres，Mongo和MySQL。 邀请用户并允许使用Google帐户登录。 Appsmith建立仪表盘，工作流，表单或任何内部业务工具的最快方法。 建立同情心，不仅仅是:red_heart:︎Appsmith是一种快速，轻松，安全的方式来构建任何自定义内部工具。 构建方法如下：使用预先构建的UI组件（如表格，图表，地图查看器和表单）创建页面。 将UI组件连接到任何REST API或数据库，例如MySQL，Postgres和MongoDB。 用JS编写任何逻辑。 将内部工具部署到客户
低代码开发平台横向评测排名，来看看什么是比较好的低代码产品？
weixin_52213728的博客
11-16 276
本文汇总了几种业界的低代码，如果找到了对应的场景，同时又可以真正解决问题，低代码比原本敲代码要快，会是一个很好的发展空间。
使用AppSmith（PagePlug ）低代码平台快速构建小程序应用实践
发现问题，面对问题，分析问题，解决问题，总结问题
03-04 7611
Appsmith 是一个开源框架，可让您的团队更快、更协作地构建自定义内部应用程序，如仪表板、管理面板、CRUD 应用程序。PagePlug 是基于 AppSmith 打造的更适合中国开发者的开源前端低代码项目。无需侵入客户架构，直接连接数据源（API、DB），无需学习任何第三方概念，使用基础 js知识就可以快速生成多平台前端应用，包括 PC 端 web 应用、微信小程序等。PagePlug提供的几款模板参考。
appsmith创建应用
低码开发
04-16 913
添加数据源： 新建一个查询： 新建一个组件： UI这块的内容暂时不做介绍： 添加一个API的数据源：
appsmith和budibase两款低代码平台基本使用与对比
mmlover_zsd的博客
03-16 4398
作者体验了两款低代码平台，分别是appsmith和budibase，总体来说appsmith开发更灵活，下面就简单的数据库查询并绘制曲线这一应用场景来说明。
低代码开源框架Appsmith
热门推荐
wbsu2004的博客
10-11 1万+
什么是 Appsmith ？ Appsmith 是一个用于构建内部应用程序的低代码、开源框架。通过拖放组件来构建完全自定义的管理面板、CRUD 应用程序和工作流。使用 30 多个 React 组件来构建没有 HTML/CSS 的页面。构建速度提高 10 倍。 其工作原理????并不复杂 前期准备 因为需要数据来演示，所以老苏在 https://dev.mysql.com/doc/index-other.html 下载了 world database，解压出来的 SQL 脚本可以在 phpMyAdmin
AppSmith(安装与练习4套)
Mogeko1的博客
05-01 2248
AppSmith(安装与练习4套)
appsmith-docusaurus
05-05
网站 该网站是使用 （现代的静态网站生成器）构建的。 安装 yarn install 地方发展 yarn start 此命令将启动本地开发服务器并打开浏览器窗口。 大多数更改都可以实时反映出来，而无需重新启动服务器。 建造 yarn build 此命令将静态内容生成到build目录中，并且可以使用任何静态内容托管服务进行服务。 部署方式 GIT_USER=<Your> USE_SSH=true yarn deploy 如果您使用GitHub页面进行托管，则此命令是构建网站并推送至gh-pages分支的便捷方法。
appsmith-release.zip
07-21
【appsmith-release.zip】是一个压缩包，包含了低代码前端项目的源代码。低代码开发平台是近年来兴起的一种软件开发模式，它允许开发者通过图形化界面快速构建应用，减少了编写大量传统代码的需求，提高了开发效率。...
低代码 —— 初步认识 Appsmith.doc
07-08
低代码 —— 初步认识 Appsmith Appsmith 是一个低代码、开源的框架，用于构建内部应用程序。它使用基于 JavaScript 的可视化开发平台，构建 CRUD 应用程序、仪表盘、管理面板，而且速度快了 10 倍。Appsmith 提供...
Github最火开源低代码Appsmith：获4100万美元B轮融资
AppsmithCN的博客
07-22 507
Appsmith 由联合创始人兼首席执行官 Abhishek Nayak 领导，提供开源低代码软件，帮助开发人员在数小时内构建内部和 CRUD（创建、读取、更新和删除）类型的应用程序。软件工程师使用预构建的组件构建用户界面，通过将应用程序编程接口(API)与任何数据库连接起来对业务逻辑进行编码，然后测试和部署一个 Web 应用程序，在其中使用仪表板对用户进行身份验证。 推出不到两年以来，该开源软件的下载已超过1000万次，并在GitHub上有超过19.4KStars数和192位贡献者......
appsmith 怎么用？评价如何
蒋川@卡拉云
03-07 1568
AppSmith 是印度一家创业公司开发的低代码开发工具，它的原型是另一家名叫 Retool 的美国的创业公司。AppSmith 从 2019 年开始开发，到现在已经发行了 1.x 版本，也就是处于正式发行状态。那么 Appsmith 到底怎么样？它的评价如何？对比卡拉云它有哪些优缺点呢？
最强开源低代码平台 - Appsmith 功能介绍与使用体验
weixin_39545889的博客
05-30 3409
码匠在充分参考了 Appsmith、Retool、JetAdmin 等多款海外知名低代码平台的设计理念同时，针对国内用户使用习惯做了大量优化，UI 界面设计更加适合国内场景，并整合了多款国内数据源，包括 飞书、企业微信、钉钉、阿里云 OSS 等，不仅如此，码匠还提供了国内业务场景下常见的租户管理、更加细粒度的权限控制、审计日志等功能，为您的企业信息安全保驾护航。......
开源低代码工具 Appsmith 快速入门
dengkane的博客
08-02 1467
使用Appsmith跟常规软件开发过程差不多，也是先定义数据模型，再开发界面，编写复杂业务逻辑，然后调用外部系统接口等。学习掌握数据库方面的知识后，可以学习设计数据模型，就可以跟功能界面结合起来，这样就可以做很多功能开发了。Appsmith跟目前的无代码开发平台不同，是需要一定程度的代码开发的，所以更适合开发人员使用，帮助开发人员大幅提高开发效率。因为功能全面，支持代码逻辑开发，可以完成大多数Web数据库应用开发，而不是像很多低代码工具，因为功能比较少，只适合做简单应用。...
AppSmith v1.16 使用体验 | 踩坑记录
邓超的博客
03-14 1901
建议有开发能力的同学直接基于熟悉的 admin 模板项目进行开发, 自由度/灵活度相比 AppSmith 高很多, 而且现有的前端 UI 框架也不比 AppSmith 自带的 UI 库要差.
appsmith实现登录
05-10
要在 Appsmith 中实现登录，通常需要以下步骤： 1. 创建一个登录表单，包括用户名和密码输入框，以及登录按钮。 2. 在 Appsmith 中创建一个 API 请求，用于验证用户的登录凭证。 3. 将登录表单与 API 请求绑定，使用户可以通过表单提交登录凭证。 4. 在 API 请求中添加逻辑，验证用户凭证是否正确，并返回相应的结果。 5. 在应用程序中使用条件逻辑，根据 API 请求的结果显示成功或失败的消息。 下面是一个简单的示例： 1. 创建登录表单 在 Appsmith 中创建一个表单，包括用户名和密码输入框，以及一个登录按钮。你可以使用 Appsmith 的内置组件来创建这些元素。确保为每个输入框和按钮提供一个唯一的 ID。 2. 创建 API 请求 在 Appsmith 中创建一个 API 请求，用于验证用户的登录凭证。你可以使用 Appsmith 的内置请求组件来创建这个 API 请求。在请求中指定登录凭证的验证方式。例如，你可以使用用户名和密码的组合来验证用户。 3. 绑定表单和 API 请求 使用 Appsmith 的绑定功能，将登录表单中的输入框和按钮与 API 请求绑定。确保将输入框的值绑定到请求的适当字段。 4. 验证凭证并返回结果 在 API 请求中添加逻辑，验证用户凭证是否正确，并返回相应的结果。例如，如果用户提供的凭证无效，请求返回一个错误消息。 5. 显示结果 在应用程序中使用条件逻辑，根据 API 请求的结果显示成功或失败的消息。例如，如果用户登录成功，显示一个欢迎消息，否则显示一个错误消息。 这是一个简单的示例，你可以根据你的应用程序需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值