復(fù)盤(pán)!如何設(shè)計(jì)可視化搭建平臺(tái)的組件商店？

相關(guān)文章: 如何搭積木式的快速開(kāi)發(fā)H5頁(yè)面?
演示地址: H5-Dooring頁(yè)面制作平臺(tái)

關(guān)注并將「趣談前端」設(shè)為星標(biāo)

每周按定時(shí)推送技術(shù)干貨/優(yōu)秀開(kāi)源/技術(shù)思維

正好最近也做了一系列的重構(gòu)和優(yōu)化，覺(jué)得是時(shí)侯著手組件商店了，所以借此機(jī)會(huì)和大家詳細(xì)聊聊如何設(shè)計(jì)可視化搭建平臺(tái)的組件商店。

按照我一向的寫(xiě)作風(fēng)格，我會(huì)在下面列出文章的大綱，以便大家有選擇且高效率的閱讀和學(xué)習(xí)：

• 什么是組件商店，為什么要設(shè)計(jì)組件商店
• 組件商店工作流設(shè)計(jì)
• 組件商店工作流具體方案實(shí)現(xiàn)
• 實(shí)現(xiàn)在線代碼編輯器
• 組件提交方案設(shè)計(jì)
• 組件審批方案設(shè)計(jì)
• 組件上架更新方案
• 可視化搭建平臺(tái)組件商店總結(jié)及后期規(guī)劃

文章視圖如下，大家在平時(shí)在工作中也可以通過(guò)思維導(dǎo)圖的方式來(lái)整理思路。

什么是組件商店, 為什么要設(shè)計(jì)組件商店

“商店”大家也許并不陌生，對(duì)用戶(hù)而言，其基本用途是滿(mǎn)足正常的消費(fèi)需求；對(duì)供應(yīng)商而言，商店提供了一種銷(xiāo)售自身產(chǎn)品的營(yíng)銷(xiāo)推廣渠道；對(duì)商店自身而言，一方面獲得了客流和利潤(rùn)，另一方面還能提供自身價(jià)值在空間上的延伸。

通過(guò)以上的圖例說(shuō)明，我們很容易想到一個(gè)詞——生態(tài)。因?yàn)槊恳粋€(gè)環(huán)節(jié)都在相互促進(jìn)，相互影響。那么對(duì)于商店這個(gè)實(shí)體有了具象的認(rèn)知之后，我們?cè)賮?lái)看看技術(shù)領(lǐng)域的“組件商店”。

對(duì)于可視化搭建平臺(tái)而言，其中一個(gè)核心的環(huán)節(jié)就是組件資產(chǎn)。用戶(hù)在設(shè)計(jì)搭建頁(yè)面時(shí)會(huì)消費(fèi)各種各樣的組件，但是對(duì)于不同的用戶(hù)而言，組件的需求往往是不一樣的，大部分的 lowcode 或者 nocode 平臺(tái)都不能很好的解決用戶(hù)這些定制化的組件需求，所以為了解決這一問(wèn)題，組件商店就孕育而生。

我們需要在平臺(tái)中提供一種機(jī)制，支撐生產(chǎn)者生產(chǎn)組件，定義組件，同時(shí)管理者可以對(duì)生產(chǎn)者生產(chǎn)的組件進(jìn)行分類(lèi)管理(比如上架/下架/刪除/排序等)。做過(guò)電商系統(tǒng)的朋友可能會(huì)發(fā)現(xiàn)，它和電商平臺(tái)的商品發(fā)布上線是一個(gè)邏輯流程：

那么接下來(lái)我就帶大家一起設(shè)計(jì)一個(gè)這樣的流程，供大家參考。

組件商店工作流設(shè)計(jì)

根據(jù)上面的介紹和分析，我們要想實(shí)現(xiàn)完整的組件商店工作流，需要滿(mǎn)足以下幾點(diǎn)：

• 組件線上編輯(上傳)模塊
• 組件審核模塊
• 組件更新/發(fā)布模塊
• 組件管理(上架/下架/刪除/下載)

有了以上4塊的支持，基本的組件商店就可以 work 了。具體流程如下：

組件商店工作流具體方案實(shí)現(xiàn)

在有了具體的規(guī)劃和設(shè)計(jì)之后，我們就可以一步步來(lái)實(shí)現(xiàn)了。

1.實(shí)現(xiàn)在線代碼編輯器

在線代碼編輯器目前市面上有幾種成熟的方案，比如：

• react-monaco-editor
• react-codemirror2
• ace | 性能和功能上可以媲美本地代碼編輯器

大家可以選擇以上任意一種方案，這里筆者采用 react-codemirror2 來(lái)實(shí)現(xiàn)。實(shí)現(xiàn)后的效果如下：

由上圖可以看到我們可以在線編寫(xiě)React，Css，Js 代碼，并且可以配置組件信息。首先我們來(lái)安轉(zhuǎn)一下插件：

yarn add react-codemirror2 codemirror2

codemirror 給我們提供了很多語(yǔ)言支持和不同風(fēng)格的代碼主題，我們可以很輕松的制作不同語(yǔ)言的編輯面板。接下來(lái)我?guī)Т蠹覍?shí)現(xiàn)一個(gè)React代碼編輯器：

import {UnControlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/jsx/jsx');

const react_code = `import styles from './index.less';
import React, { memo, useState } from 'react';
import ReactDOM from 'react-dom';

const MenuCp = memo((props) => {
  const { visible, list, bgColor, top } = props;
  return ReactDOM.createPortal(
    <div className={styles.menuWrap} style={{display: visible ? 'block' : 'none', backgroundColor: bgColor, top: (top + 6) + 'px'}}>
      H5-Dooring
    </div>,
    (document as any).querySelector('.react-grid-layout').parentNode,
  )
})`

const ReactEditPanel = () => {
  const codeEditorChange = (
      _editor: CodeMirror.Editor,
      _data: CodeMirror.EditorChange,
      value: string, 
      type: string
      ) => {
      console.log(_data, value, type)
    }
  return <CodeMirror
          value={react_code}
          className={styles.codeWrap}
          options={{
              mode: 'jsx',
              theme: 'material',
              lineNumbers: true
          }}
          onChange={(editor, data, value) => codeEditorChange(editor, data, value, 'react')}
      />
}

以上就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的React代碼編輯器，是不是很簡(jiǎn)單呢? 同理對(duì)于 css ，js 代碼編輯器，也是同樣的方式，我們只需要定義 CodeMirror 屬性的mode 為 css ，javascript 即可。我們還可以設(shè)置 theme 來(lái)切換到我們喜歡的代碼主題，這里筆者使用的material風(fēng)格。

單純實(shí)現(xiàn)在線代碼編輯器還不夠，我們還需要對(duì)代碼進(jìn)行處理，保存，對(duì)組件進(jìn)行定義，接下來(lái)我們就來(lái)看看組件是如何提交的。

2.組件提交方案設(shè)計(jì)

當(dāng)“ 生產(chǎn)者 ”編寫(xiě)好組件代碼之后，需要對(duì)組件自身進(jìn)行定義。因?yàn)榭梢暬脚_(tái)組件物料很依賴(lài)平臺(tái)的組件開(kāi)發(fā)協(xié)議，我們需要按照平臺(tái)的規(guī)范去上傳規(guī)范的自定義組件，這樣平臺(tái)才能更好的理解應(yīng)用組件，保持用戶(hù)認(rèn)知的一致性。

組件描述信息筆者這里設(shè)計(jì)了如下字段：

• 組件名稱(chēng) (中文)
• 組件名 (英文，方便存庫(kù))
• 組件分類(lèi) (基礎(chǔ)，可視化，營(yíng)銷(xiāo)，媒體等)
• 組件默認(rèn)大小 (寬高)
• 組件圖標(biāo) (方便用戶(hù)認(rèn)知，查找)

大家也可以根據(jù)自己的平臺(tái)特性來(lái)定義和規(guī)范，這樣我們就可以提交一個(gè)完整的組件數(shù)據(jù)了。

目前我的做法是將用戶(hù)提交的完整的組件數(shù)據(jù)存在庫(kù)中，以便審核轉(zhuǎn)化為可視化平臺(tái)可以消費(fèi)的組件，當(dāng)然大家也可以用更智能的方式，自動(dòng)對(duì)組件代碼信息進(jìn)行提取轉(zhuǎn)化，其缺點(diǎn)就是誤差率無(wú)法控制，以及無(wú)法對(duì)組件進(jìn)行準(zhǔn)確的描述。以下是我提交的效果：

組件提交邏輯也很簡(jiǎn)單:

form.validateFields().then(values => {
  codeRef.current['form'] = {
    ...values,
    icon: values.icon[0].url
  };
  req.post('/visible/cp/save', codeRef.current).then(res => {
    setIsModalVisible(false);
  })
}).catch(errorInfo => {
  console.log(errorInfo)
  setCurTab("4")
})

我們只需要用 antd 的Form 將用戶(hù)填寫(xiě)的數(shù)據(jù)收集起來(lái)提交給后臺(tái)接口即可。由于我的后臺(tái)采用 nodejs 實(shí)現(xiàn)，上傳接口無(wú)非就是保存組件數(shù)據(jù)，實(shí)現(xiàn)比較簡(jiǎn)單，這里就不一一介紹了。對(duì) nodejs 感興趣的朋友可以參考我之前的開(kāi)源項(xiàng)目從零搭建全棧CMS系統(tǒng)。

3.組件審批方案設(shè)計(jì)

組件審批主要由網(wǎng)站管理人員來(lái)操作，當(dāng)用戶(hù)組件提交成功之后，客戶(hù)端會(huì)通過(guò)消息信令通知管理員，管理員收到消息后會(huì)審核組件。那么整個(gè)過(guò)程也很簡(jiǎn)單，我們可以使用 websocket 來(lái)實(shí)現(xiàn)消息雙向通信，完整流程如下：

我們先來(lái)實(shí)現(xiàn) socket 通信，這里我就采用市面比較成熟的 socket.io，來(lái)簡(jiǎn)單打通一個(gè)客戶(hù)端, 服務(wù)端的雙向通信流程。

首先我們先按照一下依賴(lài)：

# 服務(wù)端
yarn add socket.io

# 客戶(hù)端
yarn add socket.io-client

對(duì)于服務(wù)端，我們需要進(jìn)行如下改寫(xiě)：

import koa from 'koa';
import http from 'http';

const app = new koa();
const server = http.createServer(app.callback());
const io = require('socket.io')(server);

// 一些業(yè)務(wù)邏輯...

// socket通信
io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('component upload success', (msg) => {
      // 通知審批
      io.emit('component review', msg)
    })
  });

server.listen(config.serverPort, () => {
    console.log(`服務(wù)器地址:xxx.xxx.xxx`)
});

對(duì)于客戶(hù)端，邏輯如下：

import io from 'socket.io-client'
import { serverUrl } from '@/utils/tool'

const socket = io(serverUrl);

// ... 一些邏輯
useEffect(() => {
   socket.on('connect', function(){
     console.log('connect')
   });
   socket.on('htmlWorked', function(data){
     const { result, message } = data
     if(result !== 'error') {
       // ...
     }else {
       // ...
     }
     
   });
   socket.on('disconnect', function(e){
     console.log('disconnect', e)
   });
 }, [])

通過(guò)以上的實(shí)現(xiàn)方式客戶(hù)端和服務(wù)端就可以隨時(shí)進(jìn)行通信了。接下來(lái)我們看看審批的效果：

用戶(hù)在 H5-Dooring 平臺(tái)提交的組件都會(huì)流入管理后臺(tái)，管理員可以對(duì)組件進(jìn)行審查以及下載源碼等操作。審批同樣會(huì)用到 codemirror 這個(gè)庫(kù)，主要是將存到數(shù)據(jù)庫(kù)的字符串代碼進(jìn)行回顯。當(dāng)然還可以實(shí)現(xiàn)線上預(yù)覽組件上線后的效果，這塊大家感興趣的可以自己嘗試一下實(shí)現(xiàn)方案，原理也很簡(jiǎn)單。我們來(lái)看看審批的演示：

4. 組件上架更新方案

組件上架的方案也有很多，比如可以手動(dòng)上架更新，也可以用程序自動(dòng)化的完成。那么這里我介紹一下我的線上自動(dòng)化上架的方案，這里還是需要借助上面介紹的 socket.io 和 nodejs。原理大致如下：

完整的流程就是平臺(tái)管理員對(duì)組件審批通過(guò)之后，會(huì)自動(dòng)用 socket 向服務(wù)端發(fā)送審批通過(guò)信號(hào)，服務(wù)器會(huì)對(duì)組件數(shù)據(jù)進(jìn)行解析，寫(xiě)入對(duì)應(yīng)類(lèi)別下的組件庫(kù)里(也就是組件入庫(kù))，并將組件信息元寫(xiě)入到編輯器基座，此時(shí)為了更新基座拿到最新的效果，需要 nodejs 解析構(gòu)建指令線上打包基座，基座更新完之后會(huì)用 socket 發(fā)送消息給 H5-Dooring，通知用戶(hù)組件庫(kù)已更新，提示用戶(hù)是否刷新組件列表，至此，一個(gè)完整的組件上架更新流程就完成了。這里我們實(shí)現(xiàn)一下如何線上打包編輯器基座。

首先我們需要對(duì) nodejs 的父子進(jìn)程有一定的了解，比如 child_process。我會(huì)使用child_process 的 exec 實(shí)現(xiàn)解析并執(zhí)行命令行指令，如果大家對(duì) nodejs 的父子進(jìn)程不太熟悉，也可以參考我之前的文章 基于NodeJS從零構(gòu)建線上自動(dòng)化打包工作流。

因?yàn)檎麄€(gè)過(guò)程需要自動(dòng)化的去處理，不能像我們之前打包項(xiàng)目一樣，手動(dòng)執(zhí)行 npm run build 或者 yarn build 。我們需要程序自動(dòng)幫我們執(zhí)行這個(gè)命令行指令，具體方案如下：

import { exec } from 'child_process'
const outWorkDir = resolve(__dirname, '../h5_base_frame')
const fid = uuid(8, 16)
const cmdStr = `cd ${outWorkDir} && yarn build ${fid}`

router.post(api.generalConfig,
    auth,
    ctx => {
      // ...
      exec(cmdStr, function(err, stdout, stderr){
       if(err) {
         console.log('api error:'+stderr);
         io.emit('htmlWorked', { result: 'error', message: stderr })
       } else {
         io.emit('component update success', { result: 'success', message: 'xxxx' })
       }
      })
      // ...
    }
);

通過(guò)以上的方式，我們就可以線上打包更新我們的項(xiàng)目基座，并植入任何參數(shù)，如果需要?jiǎng)討B(tài)寫(xiě)入文件，我們只需要用 fs 模塊處理即可，通過(guò)這樣的線上工作流，我們還可以實(shí)現(xiàn)更復(fù)雜的邏輯，甚至實(shí)現(xiàn)一個(gè)小型的前端CI工作流。那么大家如果有更優(yōu)雅更好的方案，也是可以隨時(shí)在評(píng)論區(qū)交流。

可視化搭建平臺(tái)組件商店總結(jié)及后期規(guī)劃

以上所有的設(shè)計(jì)方案實(shí)現(xiàn)都是基于實(shí)際需求來(lái)設(shè)計(jì)的，當(dāng)然還有很多細(xì)節(jié)需要處理和優(yōu)化，隨著需求和，業(yè)務(wù)的復(fù)雜，后期還會(huì)做組件統(tǒng)計(jì)，組件數(shù)據(jù)分析，組件監(jiān)控等能力，大家也可以參考以上的設(shè)計(jì)方案，設(shè)計(jì)自己的組件商店。

如果大家對(duì)可視化搭建或者低代碼/零代碼感興趣， 也可以參考我往期的文章或者在評(píng)論區(qū)交流你的想法和心得。

?? 看完三件事

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：

• 點(diǎn)個(gè)【在看】，或者分享轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容
• 關(guān)注公眾號(hào)【趣談前端】，定期分享 工程化 / 可視化 / 低代碼 / 優(yōu)秀開(kāi)源。

從零搭建全?？梢暬笃林谱髌脚_(tái)V6.Dooring

從零設(shè)計(jì)可視化大屏搭建引擎

Dooring可視化搭建平臺(tái)數(shù)據(jù)源設(shè)計(jì)剖析

可視化搭建的一些思考和實(shí)踐

基于Koa + React + TS從零開(kāi)發(fā)全棧文檔編輯器(進(jìn)階實(shí)戰(zhàn)

點(diǎn)個(gè)在看你最好看