开源 | 携程 Foxpage 前端低代码框架

本文介绍了携程研发的前端低代码框架Foxpage,旨在解决低代码开发中的重复工作,提高开发效率。Foxpage是一个轻量级框架,支持可视化搭建、组件化、可扩展性,并已在多个项目中实践应用。未来规划包括框架迭代、场景拓展和配套建设,以提供更完善的低代码开发解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

作者简介

 

Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地。

一、背景

随着低代码开发方式被越来越多的人接受和认可,低代码得到了蓬勃发展,更被寄希望成为 IT 行业革命性的“新生产力”。据报道,全球低代码类产品市场规模在 2021 年超百亿美元,预计 2023 年将突破两百亿美元关口。


1.1 低代码行业现状

国外:Salesforece,Microsoft,OutSystems,Mendix 等,是处于领导者地位的资深玩家,产品功能强大,流程完善,生态健全。

国内: 钉钉宜搭,明道云,织信,奥哲,简道云等,大都结合某个场景提供支持方案,还处于发展阶段。

还有些玩家在企业内部发展,并未公开。各类玩家各有优势,关注的方向也各有差异。有的是结合某个行业定制,有的是结合单个使用场景深耕,还有的执着于提供应用开发的完整低代码方案。大部分是 SaaS 产品,其中部分会有私有化部署方案。


1.2 暗藏的隐患

按理说,市场上低代码产品功能已经足够强大,企业内部还在自研,甚至同一个业务线的不同使用场景或不同的技术栈也都有不同的低码类实现方案。据说某大厂内部的低代码类系统或工具高达上百个。

其实这些系统或工具前端部分的核心功能和能力大体是相似的,就拿前端可视化页面搭建这部分来讲,从技术上看大家最终的实现方案和体验上都趋于相近或相同,自研的整个过程会有大量的重复性的工作,造成了人力资源的浪费。

为什么会造成这样的局面?大家的本意是想借助低代码方案解决业务问题,但却发现行业基建太差,借助成品的方案也难以落地。只能一遍遍重复着低代码的基础能力和设施的建设,乐此不疲也无奈地重复造轮子。


1.3 低码通用能力建设

基于此我们做了一些调研,整理了市面上成熟产品可能存在的问题:

  • 功能臃肿,系统复杂,对接入和二次开发成本都较高

  • 不够开放,定制化程度高,部分的产品还有技术栈的约束

  • 场景支持单一,扩展较难,对一些碎片化的场景支持不友好

既然大而全的低码产品不能用,那就给个小而美的低码框架吧。

为了能让前端项目快速且低成本的体验到低代码带来的便利,带着市面上成熟的产品的问题,我们决定从建设前端低代码开发平台的角度去研发一套前端低代码框架,提供前端低代码类产品的通用部分能力,帮助开发者解决重复开发,重复建设的问题。

同时也设立了一些需要完成的目标:

  • 有多场景,多端,多技术栈的支持能力

  • 产出多个场景下前端组件化的最佳实践

  • 提供前端低代码开发所需要的基础能力和设施

  • 打造一套围绕着前端低代码开发的工程化体系


二、Foxpage 是什么?

Foxpage 是一个轻量级的前端低代码框架,借助 Foxpage 可以让前端项目用低代码的方式进行迭代。Foxpage 重点在前端,关注前端页面的整个生命周期,希望成为一个易用,灵活,开放且百搭的开源框架。

特性
  • 可视化,提供在线的可视化的前端页面搭建,所见即所得

  • 组件化,提供较为完善的组件制作流程和组件化方案,制作页面先从制作组件开始

  • 可扩展,提供多端,多技术栈及多种场景的支持

  • 国际化,提供一套国际化内容管理方案

  • 平台化,给开发者、编辑、运营等提供了一个在线合作的平台

国际化和平台化为以后建设通用的前端低代码开发平台提供了基础。


三、架构


3.1 整体架构

整个框架包含 Foxpage Admin,Foxpage API,Foxpage SDK,组件库等部分,下图描述了框架各模块及它们之间的关系。

75d38c768173e0de3126cc4f44861524.png

  • Foxpage Admin :Foxpage 的管理后台,提供组织,应用,项目,页面&模板等管理功能

  • Foxpage API:Foxpage Restful API 主要用于为 Foxpage SDK 及 Foxpage Admin 提供的接口服务,开发者也可以使用其开发其他功能

  • Foxpage SDK :目前版本只提供了 Node SDK 及 JS SDK 用于 Node 端和浏览器端应用接入

3.2 Node SDK 架构

Node SDK 是提供给 node 端应用使用的开发工具包,通过 SDK 开发者能够快速接入和使用 Foxpage 框架。

1767fdf8942eb2649fa38c54ecce0cde.png

除了上面的介绍,Foxpage 整个项目还有 Foxpage CLI、Foxpage Debugger 及组件部分相关的介绍,有兴趣的同学可以前往官方文档查看。


3.3 核芯设计

Foxpage 核心部分是围绕着 Foxpage 需要提供支持多场景,多端,多技术栈的能力来设计的,可以算是对低代码开发实践的沉淀。

此版本更新内容包括:Feature :sparkles: 新增 sortBy 和 topAndOther filter (#1378) (#1379) api 新增 responseData 配置 (#1379) 添加季度选择器 Quarter (#1382) Container 支持设置样式 (#1411) 加入 ecStat, Apache ECharts (incubating) 的统计和数据挖掘工具 (#1419) Form 支持 feedback (#1420) 新增仿 antd 主题 (#1421) Enhancement jssdk 支持外部监控路由变化重新切换页面 (#1373) 选择类表单项 selectFirst 跳过 disabled 的选项 (#1393) iconfont 发布到 sdk 里 (#1395) api mock 地址替换 (#1408) Echarts 没数据时显示 loading (#1409) Breaking :翻译文件的 key 不再是中文,如果有修改过英文翻译,需要换成新 key (#1416) (#1418) 拆解 factory.tsx,添加 RootRenderer,并能 处理部分 action, 直接渲染个按钮也能弹窗,发ajax了 (#1425) Text 配置 source 样式优化 (#1429) 更换 autobind,继承时 this 不错乱 (#1433) Bugfix 修复 表单项在不配置 name 的时候,value 属性失效问题 (#1372) 修复 Excel 导出的列顺序依照配置的顺序,而不是数据源 (#1377) 修复 ChartRadios tooltip 问题. (#1378) 修复 位置选择组件在新版百度地图 api 下无法使用问题 (#1381) 修复 表单项有多个的时候,回车不提交问题 (#1387) 修复 helper 中 white-space 不正确问题 (#1390) 修复 Excel 导出不支持嵌套 name 和 tpl 问题 (#1424) 修复 收起状态导航菜单不可点击跳转问题 (#1428) 修复 Checkbox 无 disabled 样式问题 (#1414)amis前端低代码框架是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+ 页面。amis前端低代码框架特点1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis 页面是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种页面组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+ 页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有超过 1 万行 JSON 配置。
amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+ 页面。 特点: 1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis 页面是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的页面不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种页面组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+ 页面,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的页面需求,最复杂的页面有超过 1 万行 JSON 配置。   amis前端低代码框架 更新日志: v1.1.7 Feature Wrapper 组件 style 支持动态获取 数据映射支持 cookie 获取 内置 filter 新增 map 方法 Rating 组件支持清空 Tabs 的 activeKey 支持变量 Excel 导出支持自定义文件名 数据映射的 key 可以支持 . 或者 [] 来指定路径 Tree-Selector 支持懒加载 升级 ECharts 到 5.1.1 升级 Monaco-Editor 到 0.24.0 Enhancement 升级 mst 到 3 的最新版本 开发使用 concurrently 避免新开一个窗口 data-link 优化 Wizard 组件新增 startStep 配置项 按钮 tooltip 整理,支持 disabledTip Each 组件空状态时文字居左,同时将空数组状态也认为是空状态 去掉 Tab line 模式下顶部的 padding Uuid 有值时不设置,没值自动设置 TextArea 组件最小行数限制 & 静态展示超出等 Form 远端校验显示报错时,可以再次提交 Nav 的 mapTree 需要 depthFirst Checkboxes 分组样式优化 DateTime-Range下拉增加 popoverClassName 属性,可以自定义弹框的 className; 父级有缩放比时弹框宽度计算问题修复; Date 快捷键支持上月底 autoFill 支持多选 CRUD 的 toolbar 默认不再将最后一个组件放右边 接口兼容多种 json 返回格式 CRUD filterable 判断是否选中不要那么严格 Button-Group disabled 统一使用透明度的方式来实现,不然无法区分选中状态是哪个 调整日期按钮位置顺序 和 Dialog 统一 Bugfix 修复 Audio should not call load method at first render 修复 文档多余描述 修复 CRUD filter Combo模式不能清空查询条件 修复 初始状态 autoFill 不同步的问题 修复 文档样例错误 修复 Audio 组件 src 属性不符合预期的行为 修复 表单联合校验问题 修复 PopOver 宽度计算问题 修复 图片表单项 disabled 影响放大功能的问题 修复 Transfer selectTitle resultTitle 不生效的问题 修复 Tree 组件问题 修复 Fiule 组件错误提示样式问题 修复 Select 组件自定义菜单模式下无法全选问题 修复 Number 最大最小值校验问题 修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题 修复
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值