基礎設施 ：啟動低代碼平臺研發之前，你需要有什么家底？
今天，我們來聊一聊在啟動低代碼平臺研發之前，必須準備好的基礎設施。低代碼平臺以其快速構建應用的優勢，正在被越來越多的企業采用。但在著手開發低代碼平臺之前，你需要確保一些核心的“家底”已經打牢，尤其是Web 組件集。作為低代碼平臺的基石，組件集的質量和能力幾乎決定了平臺的成敗。
本文將以組件集為核心，結合源碼片段和國內低代碼平臺的案例，幫助你從理論到實踐全面掌握這一重要主題。
一、為什么選擇 B/S 架構？
過去幾年中，Web 技術得到了快速發展，使瀏覽器能夠承載復雜的 Web 應用。低代碼平臺選擇 B/S 架構幾乎是毋庸置疑的：
- 優勢一：跨平臺支持 B/S 架構只需一個瀏覽器即可運行，無需安裝客戶端，無論是 PC 端還是移動端都能很好支持。
- 優勢二：開發生態成熟 前端框架如 React、Vue、Angular，以及 CSS 框架如 Tailwind、Ant Design 已經非常完善，構建低代碼平臺有充足的技術儲備。
- 優勢三：可視化開發更便捷 可視化開發工具天然適合基于 Web 技術實現，利用現代瀏覽器的渲染能力和調試工具，可以快速搭建功能豐富的可視化編輯器。
二、組件集在低代碼平臺中的作用
Web 組件集在低代碼平臺中的作用主要體現在以下三個環節：
- 構建低代碼編輯器自身 編輯器的畫布、工具欄、屬性面板等核心功能都依賴于組件集。
- 構建開發能力 開發者通過組件集擴展平臺能力，如自定義組件和模板。
- 構建業務應用 業務應用由組件組合而成，組件的可復用性和豐富程度直接影響業務開發的效率和效果。
三、優秀組件集的特性
在啟動低代碼平臺之前，你需要評估現有組件集是否滿足需求。以下是優秀組件集應具備的特性：
3.1 豐富的組件種類
- 基礎組件：按鈕、表單、表格、樹形控件等常見組件。
- 高級組件：圖表、流程圖、圖像編輯器等復雜功能組件。
例如：Ant Design 提供了豐富的基礎組件，支持 React 和 Vue，適合快速開發高質量的 Web 應用。
3.2 高度可定制化
組件集應支持外觀和行為的高度定制，以便開發者根據業務需求快速調整。例如：
- 主題定制：通過配置主題或動態切換樣式。
- 行為擴展：支持事件鉤子和自定義邏輯的注入。
以下是一個基于 Ant Design 的主題定制示例：
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
const theme = {
token: {
colorPrimary: '#1890ff',
borderRadiusBase: '4px',
},
};
const App = () => (
<ConfigProvider theme={theme} locale={zhCN}>
<YourApp />
</ConfigProvider>
);注釋：通過 ConfigProvider 配置主題和國際化，讓組件的外觀和語言動態切換。
3.3 性能優化
- 虛擬列表：對于大數據量的列表或表格，組件集應內置虛擬滾動功能。
- 按需加載：支持 Tree Shaking 和組件按需加載，避免加載不必要的資源。
以下是實現按需加載的示例：
import { Button } from 'antd';
// 使用 antd 的 babel-plugin-import 插件
// 自動按需加載組件和樣式3.4 強大的擴展能力
組件集需要支持擴展，例如增加新的 UI 控件或自定義行為。以下是 React 中擴展組件的一個示例：
import React from 'react';
import { Button } from 'antd';
const CustomButton = (props) => {
const handleClick = () => {
alert('自定義點擊邏輯');
props.onClick && props.onClick();
};
return <Button {...props} onClick={handleClick} />;
};
export default CustomButton;注釋：通過封裝 Ant Design 的 Button，擴展自定義邏輯，同時保留原有功能。
四、國內低代碼平臺的組件實踐
國內涌現了許多優秀的低代碼平臺，它們在組件集上各有特色。以下是幾個案例：
4.1 阿里巴巴的宜搭（Yida）
- 特點：基于 Ant Design 構建，提供高度集成的可視化編輯器。
- 組件實踐：宜搭的表單控件非常強大，支持拖拽式布局和動態校驗。
示例：拖拽生成的表單代碼可能類似如下：
{
"type": "form",
"fields": [
{
"type": "input",
"label": "姓名",
"key": "name",
"props": {
"placeholder": "請輸入姓名",
"required": true
}
},
{
"type": "datePicker",
"label": "生日",
"key": "birthday",
"props": {
"placeholder": "請選擇日期"
}
}
]
}注釋：這是低代碼平臺常用的 JSON 配置，通過解析動態生成表單。
4.2 字節跳動的 OpenCode
- 特點：專注于前端低代碼開發，組件庫支持復雜的交互邏輯。
- 組件實踐：其畫布組件支持拖拽和多選，極大提升了用戶體驗。
以下是拖拽組件的簡單實現：
import { useState } from 'react';
const DraggableComponent = () => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleDrag = (e) => {
setPosition({ x: e.clientX, y: e.clientY });
};
return (
<div
style={{
position: 'absolute',
left: position.x,
top: position.y,
width: '100px',
height: '100px',
backgroundColor: 'lightblue',
cursor: 'move',
}}
onMouseMove={handleDrag}
>
拖拽我
</div>
);
};注釋：通過監聽鼠標事件，實現一個簡單的拖拽功能。
4.3 華為的 DevRun
- 特點：提供強大的企業級組件集，支持高并發和多租戶場景。
- 組件實踐：其圖表組件采用 ECharts，支持復雜的數據可視化。
示例：基于 ECharts 的折線圖配置：
const option = {
title: {
text: '折線圖示例',
},
tooltip: {},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {},
series: [
{
name: '銷量',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
},
],
};五、總結
打造一個低代碼平臺需要強大的基礎設施，而組件集是其中的核心部分。在研發之前，你需要確保擁有以下“家底”：
- 豐富的組件種類；
- 高度可定制化能力；
- 強大的性能優化；
- 擴展性強的設計。
國內低代碼平臺如阿里宜搭、字節跳動 OpenCode 和華為 DevRun 的組件實踐為我們提供了寶貴的經驗。希望通過本文的分析和示例代碼，能幫助你更好地構筑低代碼平臺的核心基礎設施。
