開源推薦 | 攜程 Foxpage 前端低代碼框架

大廠技術(shù)  高級前端  Node進(jìn)階

點擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

源碼地址：https://github.com/foxpage?sort=stargazers

一、背景

隨著低代碼開發(fā)方式被越來越多的人接受和認(rèn)可，低代碼得到了蓬勃發(fā)展，更被寄希望成為 IT 行業(yè)革命性的“新生產(chǎn)力”。據(jù)報道，全球低代碼類產(chǎn)品市場規(guī)模在 2021 年超百億美元，預(yù)計 2023 年將突破兩百億美元關(guān)口。

1.1 低代碼行業(yè)現(xiàn)狀

國外：Salesforece，Microsoft，OutSystems，Mendix 等，是處于領(lǐng)導(dǎo)者地位的資深玩家，產(chǎn)品功能強(qiáng)大，流程完善，生態(tài)健全。

國內(nèi)： 釘釘宜搭，明道云，織信，奧哲，簡道云等，大都結(jié)合某個場景提供支持方案，還處于發(fā)展階段。

還有些玩家在企業(yè)內(nèi)部發(fā)展，并未公開。各類玩家各有優(yōu)勢，關(guān)注的方向也各有差異。有的是結(jié)合某個行業(yè)定制，有的是結(jié)合單個使用場景深耕，還有的執(zhí)著于提供應(yīng)用開發(fā)的完整低代碼方案。大部分是 SaaS 產(chǎn)品，其中部分會有私有化部署方案。

1.2 暗藏的隱患

按理說，市場上低代碼產(chǎn)品功能已經(jīng)足夠強(qiáng)大，企業(yè)內(nèi)部還在自研，甚至同一個業(yè)務(wù)線的不同使用場景或不同的技術(shù)棧也都有不同的低碼類實現(xiàn)方案。據(jù)說某大廠內(nèi)部的低代碼類系統(tǒng)或工具高達(dá)上百個。

其實這些系統(tǒng)或工具前端部分的核心功能和能力大體是相似的，就拿前端可視化頁面搭建這部分來講，從技術(shù)上看大家最終的實現(xiàn)方案和體驗上都趨于相近或相同，自研的整個過程會有大量的重復(fù)性的工作，造成了人力資源的浪費。

為什么會造成這樣的局面？大家的本意是想借助低代碼方案解決業(yè)務(wù)問題，但卻發(fā)現(xiàn)行業(yè)基建太差，借助成品的方案也難以落地。只能一遍遍重復(fù)著低代碼的基礎(chǔ)能力和設(shè)施的建設(shè)，樂此不疲也無奈地重復(fù)造輪子。

1.3 低碼通用能力建設(shè)

基于此我們做了一些調(diào)研，整理了市面上成熟產(chǎn)品可能存在的問題：

• 功能臃腫，系統(tǒng)復(fù)雜，對接入和二次開發(fā)成本都較高
• 不夠開放，定制化程度高，部分的產(chǎn)品還有技術(shù)棧的約束
• 場景支持單一，擴(kuò)展較難，對一些碎片化的場景支持不友好

既然大而全的低碼產(chǎn)品不能用，那就給個小而美的低碼框架吧。

為了能讓前端項目快速且低成本的體驗到低代碼帶來的便利，帶著市面上成熟的產(chǎn)品的問題，我們決定從建設(shè)前端低代碼開發(fā)平臺的角度去研發(fā)一套前端低代碼框架，提供前端低代碼類產(chǎn)品的通用部分能力，幫助開發(fā)者解決重復(fù)開發(fā)，重復(fù)建設(shè)的問題。

同時也設(shè)立了一些需要完成的目標(biāo)：

• 有多場景，多端，多技術(shù)棧的支持能力
• 產(chǎn)出多個場景下前端組件化的最佳實踐
• 提供前端低代碼開發(fā)所需要的基礎(chǔ)能力和設(shè)施
• 打造一套圍繞著前端低代碼開發(fā)的工程化體系

二、Foxpage 是什么？

Foxpage 是一個輕量級的前端低代碼框架，借助 Foxpage 可以讓前端項目用低代碼的方式進(jìn)行迭代。Foxpage 重點在前端，關(guān)注前端頁面的整個生命周期，希望成為一個易用，靈活，開放且百搭的開源框架。

特性

• 可視化，提供在線的可視化的前端頁面搭建，所見即所得

• 組件化，提供較為完善的組件制作流程和組件化方案，制作頁面先從制作組件開始

• 可擴(kuò)展，提供多端，多技術(shù)棧及多種場景的支持

• 國際化，提供一套國際化內(nèi)容管理方案

• 平臺化，給開發(fā)者、編輯、運營等提供了一個在線合作的平臺

國際化和平臺化為以后建設(shè)通用的前端低代碼開發(fā)平臺提供了基礎(chǔ)。

三、架構(gòu)

3.1 整體架構(gòu)

整個框架包含 Foxpage Admin，F(xiàn)oxpage API，F(xiàn)oxpage SDK，組件庫等部分，下圖描述了框架各模塊及它們之間的關(guān)系。

• Foxpage Admin ：Foxpage 的管理后臺，提供組織，應(yīng)用，項目，頁面&模板等管理功能

• Foxpage API：Foxpage Restful API 主要用于為 Foxpage SDK 及 Foxpage Admin 提供的接口服務(wù)，開發(fā)者也可以使用其開發(fā)其他功能

• Foxpage SDK ：目前版本只提供了 Node SDK 及 JS SDK 用于 Node 端和瀏覽器端應(yīng)用接入

3.2 Node SDK 架構(gòu)

Node SDK 是提供給 node 端應(yīng)用使用的開發(fā)工具包，通過 SDK 開發(fā)者能夠快速接入和使用 Foxpage 框架。

除了上面的介紹，F(xiàn)oxpage 整個項目還有 Foxpage CLI、Foxpage Debugger 及組件部分相關(guān)的介紹，有興趣的同學(xué)可以前往官方文檔查看。

3.3 核“芯”設(shè)計

Foxpage 核心部分是圍繞著 Foxpage 需要提供支持多場景，多端，多技術(shù)棧的能力來設(shè)計的，可以算是對低代碼開發(fā)實踐的沉淀。

DSL（Domain Specific Language）

DSL 譯為領(lǐng)域特定語言，作用是通過在表達(dá)能力上做的妥協(xié)來換取在某一特定領(lǐng)域的高效的。最常見的 DSL 有 Html，CSS，SQL，Regex 等。

為了各類內(nèi)容編輯高效性和一致性，我們基于 JSON 設(shè)計了一套 Foxpage 的 DSL，主要用作描述頁面和組件等內(nèi)容。再結(jié)合自身需求做了一些擴(kuò)展，如為了加強(qiáng) DSL 的動態(tài)能力加入了 “變量”，“條件” 等描述。特定的語法和語義需要提供對應(yīng)的解析器，結(jié)合不同的應(yīng)用場景提供定制功能，再針對具體的端提供對應(yīng) SDK 實現(xiàn)供應(yīng)用接入。

頁面 DSL 的片段

上圖 DSL 中描述了一個橫幅組件，包含資源，屬性，事件，條件渲染等信息，當(dāng)然完整的頁面描述還包含模板，頁面，資源詳情等描述。為了減少 DSL 的冗余，我們對公共部分做了最大程度的提取和復(fù)用。同時為了防止單份 DSL 內(nèi)容過大，還支持了 DSL 模塊化設(shè)計。運行時在 DSL 解析時會做合并，補(bǔ)全等操作。

無頭 CMS（Headless CMS）

無頭 CMS 與傳統(tǒng)的 CMS 相比，不同之處在于其將內(nèi)容和展示分離，達(dá)到“前后端分離”的目的，這樣可以和前端的技術(shù)棧解耦，增強(qiáng)擴(kuò)展性。

這里主要提供了各類內(nèi)容的定義、管理、存儲和分發(fā)等功能，其實就是管理著各類 DSL 數(shù)據(jù)，視為框架的基建部分。參照文件系統(tǒng)的設(shè)計，提供了文件夾和文件等基礎(chǔ)的功能。并可自由的新增文件類型，讓整個系統(tǒng)變得更自由，更易擴(kuò)展。同時還提供了 Restful API 方便了各端可以自由的獲取到托管的內(nèi)容，也使得各接入端擁有了動態(tài)更新能力。

這樣的設(shè)計也為前端項目想離線的使用 Foxpage 框架提供了基礎(chǔ)，后續(xù) Foxpage 也會為應(yīng)用提供離線使用方案，使得整個框架變得更靈活。

解釋器（Interpreter）

這里解釋器的作用，是在應(yīng)用的運行過程中去讀懂并理解 DSL 然后再做對應(yīng)的執(zhí)行。廣義上來說解釋器主要包含資源管理器，DSL 解析器，渲染引擎三個部分

可以簡單看下解釋器在 H5 頁面渲染過程中所做的工作：

這種解釋執(zhí)行的方式會帶來一定的性能損耗，但是和它帶來的高擴(kuò)展能力和動態(tài)能力來比還是可以接受的。整個低代碼的開發(fā)方式，本身也是犧牲一定的靈活性來換取開發(fā)效率的提升的，這要看怎么平衡和取舍。

3.4 如何工作？

舉個郵件頁面渲染服務(wù)（SSR API 以下簡稱 API）的例子來說明下工作過程。

首先 API 項目需要接入 Foxpage Node SDK（以下簡稱 SDK）。當(dāng)用戶請求 API 獲取郵件頁面 HTML 文檔時，SDK 會請求 Foxpage Restful API 獲取郵件頁面的內(nèi)容信息（DSL），拿到頁面 DSL 后會走解析流程，做一些預(yù)處理、數(shù)據(jù)綁定及資源文件加載（比如組件的 umd 文件）等工作。解析完成后 SDK 會根據(jù)解析后的對象做頁面的構(gòu)建和渲染（SDK 默認(rèn)內(nèi)置 Reactjs 框架，這里的郵件頁面組件為 React 實現(xiàn)的），最終調(diào)用 Reactjs 框架的接口輸出頁面的 HTML 內(nèi)容。

四、Why Foxpage？

以下是 Foxpage 的技術(shù)目標(biāo)，這也是框架核心的能力，降低成本同時提高生產(chǎn)力。

• 提高效率，效率包括組件開發(fā)效率，頁面開發(fā)效率，發(fā)布效率等

• 降低成本，成本包括人員成本，開發(fā)難度，迭代成本，維護(hù)成本等

• 質(zhì)量保障，質(zhì)量包括穩(wěn)定性，“良品率”等 （這里的質(zhì)量的保障是可持續(xù)性的，不應(yīng)因業(yè)務(wù)的變化而降低或缺失，是一套通用的質(zhì)量保障體系）

目前前端開發(fā)還是一個“勞動密集型行業(yè)”，需要大量的開發(fā)資源堆疊去解決業(yè)務(wù)需求。雖然有了一些工程化的加持，但在面對成倍的開發(fā)需求增長時，效率和成本問題會凸顯并放大。Foxpage 的出現(xiàn)可以一定程度上緩解這一問題，讓前端開發(fā)多一種選擇。

4.1 低碼開發(fā)模式

開發(fā)從 “pro code” 到 “l(fā)ow code” 的轉(zhuǎn)變。拿前端頁面開發(fā)舉例（為方便理解，結(jié)合制造業(yè)流程來說明），傳統(tǒng)的開發(fā)方式是在線下制作組裝，經(jīng)過一系列工序后發(fā)布到線上交付。而低碼的方式是在線可視化搭建頁面，然后產(chǎn)出一張張施工圖紙，在交給生產(chǎn)線做線上的自動化組裝，最后線上交付。

這種變化帶來的益處：

• 降低開發(fā)門檻，有畫圖能力的人就能做頁面開發(fā)
• 提升交付效率
• 頁面質(zhì)量更高

4.2 工程化的支持

從傳統(tǒng)前端的工程化轉(zhuǎn)變?yōu)閲@著低代碼開發(fā)建設(shè)的新的工程化體系。不管是新的還是傳統(tǒng)的工程化，最終目的都是為了高效且低成本的開發(fā)并保質(zhì)保量的交付。低碼的開發(fā)模式中同樣需要一些工程化的支持，只是會換成另外一種形式而已。

框架提供的基礎(chǔ)能力：

• 零件（組件）：提供了一套零件生產(chǎn)工具及流程（腳手架、可視化調(diào)試工具，開發(fā)、調(diào)試及使用流程）

• 圖紙（頁面結(jié)構(gòu)內(nèi)容）：提供了畫圖工具（可視化編輯器），模板

• 生產(chǎn)線（站點）：提供了自動化生產(chǎn)設(shè)備（解析器，渲染引擎），自建物流（資源管理器）

• 配套（平臺）：提供建設(shè)各類倉庫所需要的場地（按組織，團(tuán)隊，應(yīng)用提供了相應(yīng)的獨立的空間），交易市場（商店）

Foxpage 作為一款前端低代碼的基建產(chǎn)品，會持續(xù)的探索圍繞著低代碼開發(fā)的工程化體系，給低代碼開發(fā)帶來更好的體驗。

4.3 工作流的改變

讓各個職能可以在線合作，改變了傳統(tǒng)線性接力式的工作流程，減少了各職能之間不必要的依賴，縮短開發(fā)工期。有人用游戲中的“圓桌范式”來形容這種工作關(guān)系。我覺得有點像“手術(shù)臺”的形式，這種形式更強(qiáng)調(diào)合作。

作為框架會有約束，但更多的是支撐。在享受低代碼帶來益處的同時也要適應(yīng)它帶來的一些變化及約束。

五、組件化

組件是低代碼類產(chǎn)品非常重要的部分，可以說組件化的結(jié)果會直接影響項目低代碼開發(fā)的體驗。

Foxpage 作為前端低代碼框架，理論上是不涉及到業(yè)務(wù)部分的。開發(fā)者需要站在整個項目角度結(jié)合業(yè)務(wù)去考慮怎么組件化，如哪些模塊需要組件化來降低重復(fù)開發(fā)的成本，哪些不適合組件化；組件的主體內(nèi)容是靜態(tài)數(shù)據(jù)，還是通過請求接口獲取的動態(tài)數(shù)據(jù)；組件數(shù)據(jù)部分的復(fù)雜邏輯是否可以交給后端；哪些信息根據(jù)具體的業(yè)務(wù)是要做成可配置的會更靈活。

組件的粒度粗細(xì)怎么控制？粒度越細(xì)可能越靈活，但是組合起來可視化搭建過程中就會越復(fù)雜，增加使用成本。如果做的過粗，復(fù)用度就會降低，增加開發(fā)成本等。開發(fā)者需要結(jié)合自身業(yè)務(wù)綜合地去考慮這些問題。

5.1 提供的支持

當(dāng)開發(fā)者按照自己的設(shè)計去完成組件化落地時，F(xiàn)oxpage 會提供一些支持。包括組件開發(fā)的腳手架，可視化調(diào)試，本地構(gòu)建等工具及經(jīng)過大量實踐后整理出的一些相對完善的流程。

我們關(guān)注組件化落地過程中整條鏈路上的開發(fā)和使用體驗，從組件的定義，開發(fā)實現(xiàn)，調(diào)試，測試，部署，注冊，可視化配置使用及效果分析。同時也會提供一些自己的實踐供開發(fā)者參考。

當(dāng)然在對組件化做支持的過程中，會有一些原則：

• 不去影響開發(fā)者現(xiàn)有的開發(fā)習(xí)慣

• 不去改變前端項目現(xiàn)有的工程化體系，只基于現(xiàn)有的體系做補(bǔ)充支持

• 不去破壞組件的通用性，組件不是為 Foxpage 特制的，不能影響組件在別的項目中使用

除了用戶需要為自身業(yè)務(wù)實現(xiàn)的組件外，F(xiàn)oxpage 會提供一些基礎(chǔ)且比較通用的組件，同時還會結(jié)合行業(yè)比較流行的 UI 庫做一些組件化實踐，提供給用戶多樣的選擇。

5.2 不提供的支持

Foxpage 不提供組件項目靜態(tài)資源存儲、部署及 CDN 內(nèi)容分發(fā)相關(guān)的功能。對于靜態(tài)資源存儲，開發(fā)者可以按照自身的情況來選擇通過云服務(wù)自建或者使用第三方托管服務(wù)。Foxpage 也不提供組件項目的 CI/CD 相關(guān)的功能，因為 Foxpage 本身沒有對應(yīng)的構(gòu)建和部署環(huán)境。開發(fā)者可以借助市面上成熟的工具或服務(wù)來完成 CI/CD，整個過程 Foxpage 不會介入。當(dāng)然作為低代碼配套基建的重要部分，我們未來也會去提供這部分的實踐。

六、擴(kuò)展性

擴(kuò)展能力是 Foxpage 框架最重要的能力之一，主要體現(xiàn)在對多場景，多技術(shù)棧，多端等的支持上。

在了解擴(kuò)展能力之前，我們再回過頭看看 Foxpage 的 DSL 部分。DSL 本身除了用作描述之外沒有承擔(dān)任何其他的職責(zé)，實體是一份 JSON 格式的數(shù)據(jù)。技術(shù)上不涉及到任何的編程語言，框架，運行環(huán)境等。它的能力會體現(xiàn)在對應(yīng)的場景的具體實現(xiàn)上。

拿建筑行業(yè)舉例來說 DSL 就好比施工圖紙，它是一門工程語言，建筑工人可以根據(jù)施工圖紙在不同的環(huán)境和地點，選用不同的建筑材料搭建出建筑物。也正是因為如此才使得框架有了支持多場景，多技術(shù)棧，多端的可能。

那擴(kuò)展能力具體是怎么體現(xiàn)出來的呢？我們可以先從 DSL 的視角，通過對 Web 頁面的制作和渲染這個過程的簡單剖析，看下 Foxpage 是怎么運作的，其中涉及到擴(kuò)展的幾個關(guān)鍵點已標(biāo)注。

注 1：DSL 部分可以隨意的擴(kuò)展，只要提供對應(yīng) DSL 的解析器即可。

? ? ? ? 

注 2：Foxpage Node SDK 內(nèi)置 Reactjs 框架，主要負(fù)責(zé)頁面的構(gòu)建和渲染。如果想用其他的前端框架，可以提供 SDK 中對應(yīng)的渲染引擎部分的實現(xiàn)即可。理論上可以選用任何你想用的前端框架，這是對多前端技術(shù)棧的支持能力的體現(xiàn)，當(dāng)然要做到多技術(shù)棧支持還有其他工作需要做，如可視化，客戶端渲染等環(huán)節(jié)也要有對應(yīng)技術(shù)棧支持。框架后面也會提供對 Vuejs 的支持。

? ? ? ? 

注 3：對多端，多場景的支持，F(xiàn)oxpage 提供了對服務(wù)端的 Node SDK 和瀏覽器端的 JS SDK 的實現(xiàn)。不同端的實現(xiàn)會有差異，但大體都包含資源管理，DSL 解析器，渲染引擎。其核心架構(gòu)中的無頭 CMS 的設(shè)計，使得整個框架擁有了更強(qiáng)的擴(kuò)展性。針對不同的端或場景可以提供對應(yīng)的的實現(xiàn)。具體可以參考文檔進(jìn)階之路頻道中 Node SDK 實現(xiàn)部分。

? ? ? ? 

注 4：我們在 DSL 的解析，頁面的構(gòu)建及渲染的過程中預(yù)置了鉤子并暴露出了很多鉤子函數(shù)（圖中的只是一部分例子），結(jié)合框架提供的插件機(jī)制，開發(fā)者可以很方便的介入到整個運行過程中去，結(jié)合業(yè)務(wù)需求做一些定制，這樣大大提高了可擴(kuò)展性。

從上圖的運行的過程中看，整個框架都是圍繞著 DSL 來建設(shè)的，可以這么說 DSL 的描述能力有多強(qiáng)，框架擴(kuò)展的能力就有多強(qiáng)。

七、可視化搭建

可視化積木式的搭建其實是網(wǎng)頁低代碼開發(fā)的一個很基礎(chǔ)的能力，F(xiàn)oxpage 也提供了相應(yīng)的功能，與其他同類的產(chǎn)品不同的地方是我們提供了好幾種可視化編輯器，有針對富文本類的，Markdown 類的，有頁面類的，有畫圖類的等等，根據(jù)不同的要編輯的內(nèi)容的類型可以選擇對應(yīng)的編輯器。

這一部分我們也預(yù)留了常用的接口，甚至可以開放給用戶定制內(nèi)容編輯器，這也是 Foxpage 支持多場景能力的體現(xiàn)。當(dāng)前 Foxpage 內(nèi)置的只有針對網(wǎng)頁內(nèi)容的可視化編輯器，后續(xù)會考慮繼續(xù)開發(fā)其他類型的內(nèi)容編輯器。

可視化能力不僅體現(xiàn)在編輯的過程，還會在一些如歷史版本快照，組件在線預(yù)覽，頁面點擊曝光埋點等功能上有所體現(xiàn)。目前可視化核心部分已經(jīng)組件化，這樣可以給任何其他需要可視化功能的模塊帶來便利的，一致的可視化體驗。

八、平臺化

Foxpage 提供支持多應(yīng)用的開發(fā)和管理，是 SaaS 產(chǎn)品的一種“多租戶”的模式，在面對多個前端項目要使用 Foxpage 框架時，無需部署多套服務(wù)。同時為了各個應(yīng)用之間的信息流通分享，還提供了商店模式，通過商店可以上架應(yīng)用，頁面模板，組件，變量等內(nèi)容，從而大大的提高的各類內(nèi)容的復(fù)用度。

開發(fā)者在完成一個前端項目低代碼框架接入工作后，可以將自己項目的應(yīng)用上架商店，通過這種方式開放自己應(yīng)用的前端低代碼開發(fā)權(quán)限，這個時候其他使用低代碼開發(fā)的用戶（可以是編輯，運營或開發(fā)者，以下簡稱用戶）也可以在你的應(yīng)用上做低代碼開發(fā)。

這個過程中開發(fā)者變成了提供某一個項目的低代碼開發(fā)的服務(wù)者，開發(fā)者接入低碼框架后讓項目擁有了低代碼開發(fā)的能力，通過平臺將這種能力賦予用戶，這個過程中開發(fā)者相對于用戶來說變成了服務(wù)方。

開發(fā)者還可以專門開發(fā)組件，提交到商店后供其他的開發(fā)者在自己的應(yīng)用中使用。使用低碼開發(fā)的用戶可以將自己開發(fā)的作品，如搭建的 xxx 頁面上架到商店供其他用戶克隆使用等等。

Foxpage 為各種角色提供了一個在線合作的平臺，同時提供在線協(xié)作能力，提高各個角色之間的合作效率。

九、項目實踐

Foxpage 已經(jīng)在 Trip.com 內(nèi)部多個項目中使用，且已經(jīng)穩(wěn)定運行多年。這里結(jié)合幾個有特點的項目來介紹下項目實踐，這些項目本身的頁面數(shù)非常多且結(jié)構(gòu)各異，頁面內(nèi)容變更非常頻繁。應(yīng)用也都是 MPA（Multi-page applicaiton）多入口應(yīng)用，業(yè)務(wù)需求決定需要支持多種渲染模式 SSR，CSR，SSG。

其實每一個項目的低代碼實踐，不僅僅只是解決單個項目的問題，而是解決了這一類項目的問題。下面三個實踐都各有特點，在實踐的過程中也遇到了各種問題，特別是在對組件化的支持上和不同系統(tǒng)之間的對接上，總之就是框架結(jié)合具體業(yè)務(wù)場景落地上還有各自的路要走。這里不做詳細(xì)介紹只簡單讓大家對 Foxpage 的使用場景有個直觀的感受。

9.1 促銷頁面

為了營銷需求而搭建的落地頁面，有各種各樣的玩法，主要有產(chǎn)品促銷，好友拉新，秒殺，抽獎等活動。

需求特點：

• 短，活動有一定的時間范圍，一般不會太長，由其性質(zhì)決定；

• 頻，活動的需求有確定性的，周期性的和臨時性的，需求繁多，玩法各異；

• 快，一般活動上線時間都會有要求，可能配合一個熱點事件，如果是突發(fā)類的，需要快速響應(yīng)；

• 高，看活動需求，每個活動都可以看成單個大小不一的項目，支持成本比較高；

接入 Foxpage 后：

案例：Trip.com Eventsale 系統(tǒng)

簡介：Eventsale 系統(tǒng)是 Trip.com 的活動配置系統(tǒng)，包含活動的基礎(chǔ)信息，促銷信息，玩法信息，活動頁信息等配置。其中頁面搭建能力由 Foxpage 提供。

現(xiàn)狀：截至 2021 年中為止，大約有數(shù)千張的活動頁面通過活動配置系統(tǒng)制作完成。

9.2 SEO 頁面

為了搜索引擎優(yōu)化提供的一些頁面。大部分頁面的主體內(nèi)容都是動態(tài)生成的，不同的關(guān)鍵詞頁面的結(jié)構(gòu)和內(nèi)容都不一樣。頁面模塊需要有一定的動態(tài)性，會根據(jù)模塊點擊和曝光動態(tài)排序以及控制是否展示。

接入 Foxpage 后：

案例：Trip.com SEO 管理平臺

簡介：SEO 管理平臺管理著 Trip.com Hot 頻道的內(nèi)容，包括關(guān)鍵詞管理，頁面 TDK 信息，結(jié)構(gòu)信息，內(nèi)容等。其中頁面搭建能力由 Foxpage 提供。

現(xiàn)狀：截至 2021 年中為止，SEO 平臺目前由 Foxpage 框架生成的頁面大概有 百萬級的頁面，頁面部分的主要模塊都是通過算法動態(tài)生成。

9.3 郵件頁面

在郵件頁面發(fā)送這個場景中，傳統(tǒng)的方式是前端切圖，將 HTML 交付給到后端，后端再結(jié)合模版引擎做數(shù)據(jù)綁定，然后調(diào)用發(fā)送渠道發(fā)送。這個過程中前后端沒有分離，前后端合作低效。結(jié)合 Foxpage 方案后很好地解決了痛點。

案例：Trip.com MessageHub 系統(tǒng)

簡介：MessageHub 系統(tǒng)是 Trip.com 觸達(dá)用戶的消息系統(tǒng)，包含短信，郵件，站內(nèi)信等內(nèi)容的管理和發(fā)送。其中郵件頁面搭建能力由 Foxpage 提供。

現(xiàn)狀：截至 2021 年中為止，通過郵件配置系統(tǒng)制作的各類郵件頁面大約數(shù)千張左右， SSR 服務(wù)平均每天調(diào)用量在幾百萬次，靜態(tài)頁面渲染耗時 99 線在 60ms 左右。

9.4 更多的前端使用場景

適用的場景除了我們已經(jīng)實踐過的其實還有很多，大家可以繼續(xù)探索。

• 網(wǎng)頁搭建：后臺系統(tǒng)頁面（表單，表格，菜單），數(shù)據(jù)可視化看板，賀卡，調(diào)研問卷，彈窗廣告，富文本頁面，Markdown

• 圖片制作：海報

• D2C：各類 Pro code 生成，櫥窗代碼

9.5 不適用的場景

主要是從體驗和使用成本角度總結(jié)出以下不適用場景：

• 交互邏輯復(fù)雜的前端項目
• 定制化程度高且不易組件化的前端項目
• 頁面內(nèi)容或結(jié)構(gòu)不會頻繁變化的前端項目

兩個需要用戶注意的事項：

• 在線搭建不等于在線寫代碼，不要把低代碼類產(chǎn)品變成了在線的 IDE

• 不要為了低代碼而低代碼，有些項目使用低碼的方式不僅成本高，而且體驗也差

低代碼雖好卻并非適合所有的項目，根據(jù)實際情況謹(jǐn)慎使用。

十、未來規(guī)劃

目前 Foxpage 低代碼框架才完成基礎(chǔ)部分的功能開發(fā)，離一個成熟完善的低碼框架還有很長的路要走，2022 年我們將從以下幾個方面梳理規(guī)劃：

10.1 框架迭代

1）版本 1.0（2022 H1）：提供低代碼開發(fā)所需的基礎(chǔ)功能，將于上半年發(fā)布 1.0 版本

2）版本 1.x（2022 Q2）：提供對國際化，系統(tǒng)權(quán)限，Debugger 工具，自定義組件等的支持

3）版本 2.0（2022 Q4）：對 Foxpage Admin UI 改造，重點會在交互部分，視覺部分也會升級，同時做功能上的簡化和流程上的優(yōu)化

4）版本 2.x：提供對系統(tǒng)集成，Serverless 方案，頁面數(shù)據(jù)分析等的支持

10.2 場景拓展

除了網(wǎng)頁制作部分已有的使用場景，還會探索圖片生成，主要會在海報制作方向

10.3 配套建設(shè)

1）組件：

• 繼續(xù)豐富基礎(chǔ)組件庫；

• 提供郵件場景下的組件化最佳實踐；

• 對市面成熟的 UI 庫支持

2）靜態(tài)資源服務(wù)：結(jié)合云服務(wù)的對象存儲服務(wù)，提供靜態(tài)資源服務(wù)建設(shè)的最佳實踐

3）托管服務(wù)：結(jié)合云服務(wù)提供 SaaS 產(chǎn)品

深入了解

如果你想更深入的了解 Foxpage，可以移步至項目文檔

Node 社群



我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。


如果你覺得這篇內(nèi)容對你有幫助，我想請你幫我2個小忙：
1. 點個「在看」，讓更多人也能看到這篇文章
2. 訂閱官方博客 www.inode.club 讓我們一起成長

點贊和在看就是最大的支持