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

作者简介

 

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，组件库等部分，下图描述了框架各模块及它们之间的关系。

• 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 框架。

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

3.3 核芯设计

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