6-27，是第十一期 - 女生專場 https://www.huodongxing.com/go/tl11

另外，每一期都提供了全" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 前端搞搭建|月飛 - 如何設(shè)計實現(xiàn)中后臺搭建PaaS平臺

前端搞搭建|月飛 - 如何設(shè)計實現(xiàn)中后臺搭建PaaS平臺

時間：2023-05-31 10:24:01 | 來源：網(wǎng)站運營

時間：2023-05-31 10:24:01 來源：網(wǎng)站運營

前端搞搭建|月飛 - 如何設(shè)計實現(xiàn)中后臺搭建PaaS平臺：

下期預(yù)告

6-20，是第十期 - 跨端跨棧 https://www.huodongxing.com/go/tl10

6-27，是第十一期 - 女生專場 https://www.huodongxing.com/go/tl11

另外，每一期都提供了全年的聯(lián)票，可以看所有場次的錄播視頻，包括下半年到年底的所有直播視頻

前端早早聊大會目標(biāo)成為用得上、聽得懂、抄得走的技術(shù)大會，計劃 2020 年辦 >= 15 期，由前端早早聊與掘金聯(lián)合舉辦，前端早早聊大會行程動態(tài)、錄播視頻/PPT/講稿資料下載請關(guān)注 「前端早早聊」 公眾號跟進(jìn)。
你的支持，是早早聊辦下去的唯一動力！

還想聽哪方面的分享，直接加 Scott 微信： codingdreamer 提需求吧！

正文

本篇為第三屆 - 前端頁面搭建專場月飛講師的分享




Hi，大家好，今天非常高興能有機(jī)會作為講師，來給大家分享關(guān)于《如何設(shè)計實現(xiàn)中后臺搭建 PaaS 平臺》這個話題。今天的分享將圍繞阿里淘系技術(shù)部飛冰系列產(chǎn)品中的中后臺搭建產(chǎn)品 iceluna 來進(jìn)行展開。


個人介紹





在正式分享之前，先自我介紹一下。我是來自阿里淘系營銷中后臺團(tuán)隊的月飛，負(fù)責(zé)中后臺搭建產(chǎn)品 iceluna，以及《阿里集團(tuán)中后臺搭建協(xié)議標(biāo)準(zhǔn)規(guī)范》的推廣和落地。2013 年加入阿里巴巴聚劃算，負(fù)責(zé) PC & 無線詳情。2016 年加入天貓，帶領(lǐng)營銷玩法團(tuán)隊，負(fù)責(zé)玩法、互動類型業(yè)務(wù)。2019 年加入淘系技術(shù)部，帶領(lǐng)營銷中后臺團(tuán)隊，負(fù)責(zé)中后臺業(yè)務(wù)，專注于中后臺搭建產(chǎn)品建設(shè)。


話題介紹





今天的話題是搭建，以面向角色的不同大致可以分為面向運營和面向研發(fā)兩類搭建產(chǎn)品。面向運營的搭建產(chǎn)品主要是以可視化配置 ( No-code ) 的方式進(jìn)行完整頁面搭建，如營銷活動頁面搭建。面向研發(fā)的搭建產(chǎn)品主要以低代碼開發(fā) ( Low-code ) 的方式，搭建“中后臺系統(tǒng)”或者“無線模塊”，如商家、小二后臺系統(tǒng)的搭建，無線 Rax 模塊的搭建。今天我這邊的話題是中后臺系統(tǒng)搭建，跟營銷活動類頁面的搭建在面向角色和搭建模式上是非常不同的，接下來主要圍繞 “ iceluna 產(chǎn)品 ” 和 “ PaaS 平臺建設(shè) ” 2 個維度來展開分享。


分享大綱





這是我分享的大綱，我會先對 iceluna 這個產(chǎn)品進(jìn)行整體介紹，講解下產(chǎn)品背景、定位及現(xiàn)狀。第 2 部分會從架構(gòu)設(shè)計、功能模塊設(shè)計、研發(fā)流程設(shè)計三方面來介紹中后臺搭建產(chǎn)品的設(shè)計思路，讓大家對 iceluna 產(chǎn)品全貌有個基本認(rèn)識。第 3 部分會著重從中后臺搭建基礎(chǔ)設(shè)施維度來講一下 iceluna 是如何建設(shè)搭建基礎(chǔ)設(shè)施的。第 4 部分則會回到 PaaS 平臺這個焦點，來講解 PaaS 平臺需要建設(shè)的核心能力。最后會稍微做下總結(jié)和展望。


iceluna 產(chǎn)品介紹

產(chǎn)品演示





大家現(xiàn)在看到的是 iceluna 界面，因為目前產(chǎn)品還未開源，還未對外網(wǎng)訪問，大家可以先看一下這是我們研發(fā)中心的一個站點首頁，第 2 頁是站點區(qū)塊中心，在這里面可以看到區(qū)塊市場，區(qū)塊管理等內(nèi)容，因為演示頁面數(shù)有限，在這里還可以看到頂部 tab 還有組件和模塊等物料管理。第 3 頁是應(yīng)用研發(fā)中心，里面有頁面，應(yīng)用組件，導(dǎo)航，數(shù)據(jù)中心，發(fā)布等等一系列操作的界面。最后這 1 頁是 iceluna 的低代碼搭建編輯器，這也是 iceluna 產(chǎn)品最核心的一個能力，總體界面和產(chǎn)品形態(tài)還是比較清爽，中間搭建的是一個商品列表頁面。


產(chǎn)品背景






剛演示了 iceluna 幾個核心頁面，對整個產(chǎn)品有了一個基本的了解，iceluna 產(chǎn)品發(fā)展至今已經(jīng)經(jīng)歷了 3 年半時間，產(chǎn)品一路迭代演進(jìn)至今的低代碼開發(fā) PaaS 平臺，背后有著一系列原因。在了解這些原因之前，想先跟大家普及一個概念，今天我們一直在提的“低代碼開發(fā)”。對于 iceluna 通用搭建來說，有著自己的一點理解，它是通過可視化的方式，使具有不同經(jīng)驗水平的開發(fā)人員可以通過圖形化的用戶界面，使用拖拽組件和模型驅(qū)動來搭建網(wǎng)頁的開發(fā)模式。

了解完這個概念，我們來談下 iceluna 產(chǎn)品的背景：

產(chǎn)品定位





目前 iceluna 產(chǎn)品有著 3 層定位：

  1. 中后臺通用搭建產(chǎn)品：由淘系技術(shù)部研發(fā)，面向全體研發(fā)人員可用，打造一個中后臺通用的搭建產(chǎn)品。由于淘系業(yè)務(wù)幾乎以商家，小二運營操作系統(tǒng)為主，業(yè)務(wù)邏輯多，交互復(fù)雜，很難抽象固定場景的業(yè)務(wù)模版或可視化配置的解決方案。因此，需要我們低代碼開發(fā)的中后臺搭建產(chǎn)品具備有極強(qiáng)的通用性和擴(kuò)展性，才能夠 100% 覆蓋復(fù)雜交互的中后臺系統(tǒng)頁面的搭建。
  2. 全鏈路低代碼開發(fā)平臺：集前端應(yīng)用工程創(chuàng)建、開發(fā)、調(diào)試、發(fā)布，甚至到頁面的托管，全鏈路一體化的低代碼平臺。屏蔽復(fù)雜的前端工程體系，全鏈路打通。
  3. PaaS 平臺：建設(shè)搭建基礎(chǔ)設(shè)施，基于標(biāo)準(zhǔn)搭建協(xié)議生產(chǎn)搭建物料，為各業(yè)務(wù)場景提供搭建服務(wù)的運行和開發(fā)環(huán)境。 目前 iceluna 的 PaaS 平臺主要以以下 2 種模式提供服務(wù)：
  4. 平臺模式：業(yè)務(wù)研發(fā)進(jìn)入 iceluna 研發(fā)中心，全鏈路在 iceluna 平臺上進(jìn)行編輯器定制和運行，業(yè)務(wù)托管在 iceluna 平臺上；
  5. 中臺模式：脫離 iceluna 研發(fā)中心，對外將 iceluna 編輯器能力和低代碼能力以 npm 包形式提供出去，助力于孵化各個領(lǐng)域場景的獨立的低代碼編輯器，獨立部署。

然后，我們在目標(biāo)設(shè)定上，對應(yīng)有如下 3 個目標(biāo)：

  1. 賦能：賦能是我們第一重要的目標(biāo)，因為在目前中后臺發(fā)展的業(yè)務(wù)現(xiàn)狀下來說，賦能恰恰是目前最能消化中后臺業(yè)務(wù)壓力的一個重要手段，這是我們經(jīng)過 2 - 3 年在業(yè)務(wù)上不斷摸索下得出的一個結(jié)論，賦能可以通過后端、外包，改變與前端的一個生產(chǎn)關(guān)系，去改善和提升研發(fā)項目或者說總個研發(fā)團(tuán)隊的生產(chǎn)力，使得我們后端外包可以跨界的工作，減少一些不必要的依賴和成本。
  2. 提效：目標(biāo)還是降低研發(fā)成本。提效一直是我們技術(shù)永恒的話題，但就 iceluna 現(xiàn)狀來說，提效效果并不是特別的理想，在下一頁現(xiàn)狀會聊到。
  3. 搭建生態(tài)：希望成為一個 PaaS 平臺或搭建中臺，去孵化領(lǐng)域搭建產(chǎn)品，形成搭建產(chǎn)品矩陣，在各領(lǐng)域上有更高研發(fā)效率。

產(chǎn)品現(xiàn)狀





iceluna 是一個面向集團(tuán)提供服務(wù)的通用低代碼開發(fā)平臺，基于產(chǎn)品定位和目標(biāo)，iceluna 在賦能、提效、搭建生態(tài)上均取得不錯成果。

iceluna 架構(gòu)設(shè)計

架構(gòu)設(shè)計





上圖是 iceluna 產(chǎn)品從 PaaS 角度看的一張架構(gòu)分層圖，從圖上我們可以看出，核心包含后端服務(wù)、搭建基礎(chǔ)設(shè)施、PaaS 服務(wù)、研發(fā)中心、搭建產(chǎn)品 5 層。下面對每一層服務(wù)能力做介紹。

功能模塊設(shè)計






接下來從功能模塊設(shè)計角度來進(jìn)一步了解 iceluna 的功能全貌，還是基于剛 PaaS 角度的架構(gòu)設(shè)計核心 3 個分層來拆解里面的核心模塊。

搭建基礎(chǔ)設(shè)施這層的話，就包括基礎(chǔ)能力的建設(shè)，包含搭建協(xié)議，視覺規(guī)范，工程腳手架等源碼級別的一些基礎(chǔ)能力。其次是我們搭建編輯器內(nèi)核，包含了骨架、主題包、插件、用于配置可視化屬性面板的控件，另外就是我畫布和渲染引擎 2 個核心模塊，另外還有國際化能力模塊。在插件生態(tài)模塊上，目前整體搭建編輯器上所有的功能模塊均是以插件的形式存在。比如在頂部我們會有模型驅(qū)動、圖像識別、數(shù)據(jù)驅(qū)動、邏輯編排、流程編排等插件，這樣一些插件是目前我們重點推廣或重點研發(fā)的插件，作為研發(fā)模式升級提升效率的核心主抓手。其次是編輯器上常規(guī)一些的大綱樹、屬性/事件/樣式/數(shù)據(jù)等插件，在現(xiàn)階段主要以可視化增強(qiáng)來達(dá)到提效目的。在物料生態(tài)方面，我們希望構(gòu)造一個完備的物料生態(tài)，通過低代碼方式開發(fā)搭建組件、搭建區(qū)塊、搭建模版、組件實例，并進(jìn)行物料的發(fā)布和共享。對于 PaaS 和研發(fā)中心模塊就不再一一做詳細(xì)介紹。


研發(fā)流程設(shè)計





這一頁重點介紹 iceluna 研發(fā)中心的研發(fā)流程設(shè)計，主要分 2 個權(quán)限角色：

  1. 站定管理員：一般由專業(yè)業(yè)務(wù)前端負(fù)責(zé)，創(chuàng)建站點審核通過后，可以完成站點基本信息、編輯器默認(rèn)配置、應(yīng)用默認(rèn)配置、物料默認(rèn)配置等信息。該配置講決定了在該站點下創(chuàng)建的應(yīng)用主題、搭建編輯形態(tài)、以及物料供選池子等。
  2. 應(yīng)用管理員：選擇進(jìn)入某個站點后，可以在該站點下創(chuàng)建應(yīng)用、創(chuàng)建多分支、進(jìn)入搭建編輯器搭建頁面或組件，在線實時調(diào)試，一鍵發(fā)布部署等操作。

中后臺搭建基礎(chǔ)設(shè)施建設(shè)





了解了 iceluna 從各個維度的設(shè)計，相信對 iceluna 的產(chǎn)品設(shè)計有了一個更全面的認(rèn)識；那么接下來，我們從實現(xiàn)層面，看看 iceluna 建設(shè)了哪些基礎(chǔ)設(shè)施能力，來保障搭建平臺的技術(shù)先進(jìn)性。

從這一頁內(nèi)容是我們整個低代碼搭建基礎(chǔ)設(shè)施的一個內(nèi)容全圖，從左側(cè)我們可以看到一個物料研發(fā)的流程，由專業(yè)前端同學(xué)研發(fā)源碼的物料，并沉淀到物料中心，這樣一個源碼的物料，通過我們一個解析模塊，可以生成一份搭建組件描述文件，有了這份描述文件，就可以入駐到我們的低代碼搭建編輯器里面來，低代碼搭建編輯器會識別這個組件，生成這個組件的屬性配置面板，并具備有良好的搭建編輯體驗。其次，編輯器可以將已入駐的源碼組件，以發(fā)布的方式上行到物料中心，沉淀成為一個搭建組件。多個搭建產(chǎn)品矩陣，基于相同協(xié)議標(biāo)準(zhǔn)，與物料中心的上下行，使物料得以流通和復(fù)用，從而形成物料生態(tài)。從最右側(cè)可以看到，前后端、外包、測試都是通過搭建方式來使用低代碼編輯器，低代碼編輯器成為了最核心的一塊能力。如何保障低代碼編輯器的技術(shù)先進(jìn)性，總體建設(shè)的思路，從以下 5 個方向闡述：

  1. 首先要定義一個搭建描述協(xié)議的標(biāo)準(zhǔn)規(guī)范，所有搭建產(chǎn)品遵循這套搭建規(guī)范，這樣可以使物料得以流通。
  2. 我們要構(gòu)造一個搭建編輯器開發(fā)生態(tài)，iceluna 作為 PaaS 平臺或中臺提供出來的一個能力，去低成本的孵化各場景下的低代碼編輯器；
  3. 就是我們提供出來的低代碼編輯器，在面向不同端的一個訴求，我們會包含 React，Rax，小程序等技術(shù)棧的搭建，需要編輯器能支持多技術(shù)棧，適配多端。
  4. 相比其他低代碼編輯器，它如何保持技術(shù)先進(jìn)性，有哪些核心能力建設(shè)。
  5. 是我們要打造的插件生態(tài) 和 物料生態(tài)。

搭建描述協(xié)議標(biāo)準(zhǔn)規(guī)范!

如何指定搭建描述協(xié)議的標(biāo)準(zhǔn)規(guī)范？從以下 4 個方面闡述我的一些思考：

  1. 版本化、語義化、漸進(jìn)性描述：版本控制，語義清晰，簡明易懂，可讀性強(qiáng)；搭建的本質(zhì)是通過源碼組件進(jìn)行嵌套組合，從小往大、依次組合生成組件、區(qū)塊、頁面，最終通過云端構(gòu)建生成 應(yīng)用 的過程。因此在搭建基礎(chǔ)協(xié)議中，我們需要知道如何去漸進(jìn)性的描述組件、區(qū)塊、頁面、應(yīng)用這 4 個實體概念。
  2. 不引入新概念，可與標(biāo)準(zhǔn)源碼互轉(zhuǎn)：不引入新的語法概念，代碼部分純 JS 語法，降低上手門檻；明確每一個屬性與源碼對應(yīng)的轉(zhuǎn)換關(guān)系，可生成跟手寫無差異的高質(zhì)量標(biāo)準(zhǔn)源代碼；
  3. 可擴(kuò)展，可流通性，面向多端：支持第三方 npm 包的引入，增強(qiáng)協(xié)議描述能力的擴(kuò)展性，以應(yīng)對不同應(yīng)用復(fù)雜多變的需求，如 Lodash ，Moment.js 等第三方工具庫；產(chǎn)物能在不同搭建產(chǎn)品中流通，不涉及任何私域數(shù)據(jù)存儲，統(tǒng)一標(biāo)準(zhǔn)，構(gòu)建搭建物料生態(tài)。不能僅面向 React，還有小程序等多端；
  4. 支持國際化

低代碼編輯器開發(fā)生態(tài)






iceluna 作為一個 PaaS 平臺或搭建中臺，我們希望把搭建編輯器底層所有的能力都能原子化的開放出去，所以我們在建設(shè)搭建編輯器的時候考慮到了以下幾個問題：

  1. 分層架構(gòu)：整個框架分為四層能力的建設(shè)，最里層為搭建編輯器的內(nèi)核（主要有消息通訊、狀態(tài)的管理及配制的解析、骨架的加載、插件的機(jī)制的加載等能力）；其次為渲染模塊，也就是渲染模塊的部分，它的輸入就是符合搭建描述協(xié)議的 Schema，通過這個模塊可以把整個頁面渲染出來；再往上為編排模塊，主要負(fù)責(zé)畫布區(qū)域的物料拖拽、下鉆編輯、點擊，快捷鍵，多設(shè)計模式等操作，提供了靈活的拓展能力；最上層為整個編輯器的框架，包括骨架、主題以及編輯器里面所有的面板都是以功能插件的形式集成進(jìn)去的。
  2. 模塊化解耦：這里的框架分層，每一層均為獨立 npm 包，提供原子化服務(wù)的能力去開放。比如我們可以以整體低代碼編輯器整體開放給需要的場景，也可以只以編排引擎或渲染引擎的方式去開放，如物料中心搭建物料的預(yù)覽。
  3. 擴(kuò)展能力及開發(fā)生態(tài)：除了提供現(xiàn)有的能力之外還提供完整的骨架，插件及控件的開發(fā)腳手架及命令行工具來保證整個低代碼搭建編輯開發(fā)機(jī)制是完備完善的，同時整個骨架、插件也是可以在我們整個平臺進(jìn)行配制或定制。

低代碼編輯器多端適配





目前搭建編輯器面向的領(lǐng)域不僅僅是中后臺 React 的體系，還包含有 Vue ，小程序、Rax 的體系，這樣的一些體系因為底層的技術(shù)棧不同，對于組件的解析和渲染存在較大差異，不能通過純粹的 React 渲染模塊來把總個頁面渲染出來。所有呢，我們怎樣去適配多端，需要針對不同的技術(shù)棧，來實現(xiàn)對應(yīng)的渲染引擎，通過很薄的一層適配層來使得我們的搭建編輯器支持各個技術(shù)棧的渲染，從而達(dá)到多端適配的目的。比如，阿里表格數(shù)據(jù)報表的搭建， imgcook 消費者端搭建，淘寶小程序搭建等。


低代碼編輯器核心能力





第 4 塊內(nèi)容，就是我們?nèi)绾伪Ｕ洗罱ň庉嬈骷夹g(shù)先進(jìn)性的一些核心能力。

  1. 開箱即用： 提供全鏈路一體化的搭建服務(wù)，不需要到線下去 2 次開發(fā)。其次支持定制搭建編輯器和定制業(yè)務(wù)主題風(fēng)格。同時在我們平臺上支持多人協(xié)作、多分支并行開發(fā)，可以應(yīng)對大型復(fù)雜工程。比如淘系營銷系統(tǒng)，同時會有數(shù)十個人并行開發(fā)同一個應(yīng)用，往往會建立數(shù)個分支并行開發(fā)需求。所以呢，像這樣一些大型復(fù)雜系統(tǒng)，中后臺搭建系統(tǒng)不具備有多人協(xié)作和多分支并行開發(fā)的能力，那基本上在我們的業(yè)務(wù)場景上是無法落地的。所以這 2 塊能力建設(shè)非常關(guān)鍵和重要。
  2. 安全沙箱隔離：我們對業(yè)內(nèi)比較多的搭建產(chǎn)品做市場調(diào)研，發(fā)現(xiàn)較多搭建編輯器是沒有做好沙箱隔離的。 iceluna 發(fā)展 3 年，反復(fù)從做隔離到不隔離幾個階段的不斷迭代，最終徹底解決掉所有問題，完全實現(xiàn)沙箱隔離，從而保障搭建頁面與編輯器本身完全隔離，互不干擾，并支持獨立主題設(shè)定。
  3. 實時調(diào)試能力：我們的畫布是一個真實的 Runtime ，它不是一個模擬器或不完整的渲染，業(yè)內(nèi)很多低代碼編輯器在搭建狀態(tài)就是一個純 UI 的渲染，通過低代碼方式配置了交互數(shù)據(jù)或事件，它無法實時實時生效，需要通過預(yù)覽或發(fā)布等鏈路才能調(diào)試 。而中后臺場景業(yè)務(wù)邏輯非常重，往往需要高頻的實時調(diào)試，這也是跟其他搭建產(chǎn)品不同，是結(jié)合業(yè)務(wù)場景建設(shè)的一個重要能力。

低代碼編輯器物料生態(tài)





我們提供的通用搭建平臺，對于不同的業(yè)務(wù)場景，對于物料的訴求是不一樣的。今天，我們的搭建平臺服務(wù)于 400 多個前端應(yīng)用，要服務(wù)集團(tuán) 20+ 部門，或者更大的一個組織體系，如果只提供一套物料庫，那搭建平臺的可用性會因此而大打折扣。我們需要針對不同 BU 不同業(yè)務(wù)場景，能夠具備有快速接入不同物料的能力，第 1 點我們要能快速生產(chǎn)物料，第 2 點能快速接入已有的物料，第 3 點就是能夠讓這個物料流通起來，能夠變成一個生態(tài)的機(jī)制，就如 Iconfont 圖標(biāo)生態(tài)一樣。所以 iceluna 也在致力于怎樣去打造一個低代碼搭建物料的一個生態(tài)。我們在這塊做的核心工作，主要如下：


我們回到左側(cè)圖上來看，我們的低代碼編輯器，它不僅僅是可以接入組件，最重要的能力就是通過低代碼的方式來生產(chǎn)組件，為什么？低代碼編輯器面對更廣的用戶，比如后端和外包同學(xué)，他們不掌握很多的源碼知識，也不掌握源碼的工程體系環(huán)境，但是他們同樣會有做組件的訴求。其次，搭建編輯器本身就是一個提效的開發(fā)模式，無論是前端還是后端，研發(fā)頁面還是組件，低代碼開發(fā)同樣帶來開發(fā)側(cè)的效率提升。在 iceluna 上，我們也提供了物料專屬的搭建編輯器，可以在我們的平臺上通過搭建的方式搭建物料，并且把這個物料上行到我們的物料中心，最后形成物料流通的機(jī)制。


提供搭建服務(wù)的 PaaS 平臺建設(shè)






這一章節(jié)，回到我們主題的核心重點— PaaS 平臺能力建設(shè)上來。對于在聽的同學(xué)來說，可能對于 PaaS 平臺的定位也不是特別清楚。PaaS：平臺即服務(wù) ( Platform-as-a-Service )，iceluna 的 PaaS 定位是把搭建編輯器的運行和開發(fā)環(huán)境作為一種服務(wù)，提供給不同業(yè)務(wù)場景下的搭建產(chǎn)品。

前面我們講到了搭建基礎(chǔ)設(shè)施是提供搭建編輯器的開發(fā)環(huán)境，那上層我們還需要一個更加完善的平臺側(cè)服務(wù)能力，來提供搭建編輯器具備完整良好的運行環(huán)境，使得我們具備有一體化研發(fā)的能力，在整個能力的基礎(chǔ)之上去孵化垂直領(lǐng)域的搭建產(chǎn)品。

我們將從下面 6 個維度來介紹 Paas 服務(wù)的能力：研發(fā)中心編輯器定制、云端構(gòu)建 & 發(fā)布 & 存儲、多人協(xié)作、多分支開發(fā)、代碼回滾、效能衡量。


搭建編輯器定制服務(wù)






在我們的站點中心提供了一個可視的方式來進(jìn)行一個編輯器的配制，通過云端構(gòu)建就可以構(gòu)建出不同搭建編輯器，比如右邊的 Iceluna 搭建編輯器及下面的 imgcook 編輯器，就是在研發(fā)中心創(chuàng)建了 2 個不同的站點，分別構(gòu)建出來的編輯器。剛我們看到了編輯器的一份配置，那么編輯器具體可以配置哪些內(nèi)容呢？




**







云端構(gòu)建/發(fā)布/ DB 存儲服務(wù)




云端構(gòu)建服務(wù)是 iceluna 低代碼開發(fā)平臺核心鏈路之一，目前云端構(gòu)建的能力主要是把我們在應(yīng)用搭建過程中搭建出來的頁面，然后組件產(chǎn)生出來的 Schema ，存在數(shù)據(jù)庫里面之后的碎片化數(shù)據(jù)，通過云端構(gòu)建的方式，去發(fā)布成應(yīng)用或組件或者編輯器資源包，同時構(gòu)建出來的這些應(yīng)用、組件它們的源代碼，我們也推送到 GitLab 作為存儲，也會發(fā)到 CDN ，申請 CDN 資源最終推送到線上去。目前云端構(gòu)建主要支持應(yīng)用（日常/線上發(fā)布）、組件（Low code/ Procode發(fā)布)、編輯器（畫布/框架的構(gòu)建）3 大功能 6 種形態(tài)構(gòu)建能力。



云端構(gòu)建架構(gòu)圖分為數(shù)據(jù)層，運行層，通信層，應(yīng)用層4層，如圖左所示。它的核心能力主要包含如下：

  1. 編輯器去中心化：在我們的平臺，站點下創(chuàng)建的每一個應(yīng)用均對應(yīng)一個自己的編輯器資源包，這樣的話，我們可以給每一個應(yīng)用去定制自己的主題和組件的擴(kuò)展，并帶有版本化控制的能力。
  2. 一鍵發(fā)布部署：進(jìn)行權(quán)限管控；對組件的依賴進(jìn)行動態(tài)分析；在分支發(fā)布過程中會需要合并主干，如果產(chǎn)生沖突的話，在線解決沖突；Webpack 構(gòu)建和 CDN 發(fā)布。
  3. 多系統(tǒng)打通：GitLab 存儲以及通過 GitLab 來做代碼回滾的機(jī)制，其次通過 Tair 做構(gòu)建過程的并發(fā)鎖，最后，通過 ODPS 做構(gòu)建日志的分析。

多人協(xié)作服務(wù)






在 PaaS 平臺，多人協(xié)作是一個不可缺少的一個能力，它的主要原理是通過 WebSocket 的連接加上一個文件鎖的機(jī)制，文件鎖目前在平臺上包含頁面鎖、組件鎖、應(yīng)用級別公共文件鎖這三個維度的鎖。大體思路主要是利用WebSocket 的保活的機(jī)制，與 Tair 保持一個心跳保活的消息通信。在 Tair 側(cè)則是存儲一個主動失效的分布式樂觀鎖，然后去存儲這個鎖的信息，大概 10 秒鐘之內(nèi)沒有新的心跳過來，這個鎖就會失效。所以說一旦客戶端或 Server 端的 client 斷了之后，那這個文件鎖就會被自動釋放這樣一個機(jī)制來做的多人協(xié)作服務(wù)。我們也對業(yè)界多人協(xié)作的方案做了一些調(diào)研，比如釘釘文檔、Google Docs 等都利用了業(yè)界比較先進(jìn)的 OT 技術(shù)，實現(xiàn)相對復(fù)雜，功能也更強(qiáng)大。對于低代碼搭建編輯器場景來說，編輯鎖的能力已經(jīng)夠用了。左側(cè) iceluna 編輯器上紅線框出來的點，都是有鎖的功能。


多分支并行服務(wù)






多分支并行的能力最重要解決的一個問題是沖突解決，對于源碼來說，沖突解決是已經(jīng)存在的一個能力，但對于低代碼云端工程體系來說卻是一個非常難解決的問題。截止目前為止 iceluna 沖突解決的代碼仍然是搭建描述協(xié)議 Schema 的代碼，比對時相對比較困難，這是問題之一。其次，總個沖突解決的流程，多分支并行，包括代碼回滾到數(shù)據(jù)庫 DB ，這一塊總個機(jī)制的構(gòu)建也是相對比較復(fù)雜的?？傮w的流程如上圖所示。


代碼回滾服務(wù)






代碼回滾服務(wù)主要利用的就是基線同步的機(jī)制，這個機(jī)制保障我們可以指定任意 commit hash 進(jìn)行編輯器應(yīng)用代碼回滾。因為我們在低代碼平臺的每一次發(fā)布，都會將代碼同步到 Git ，所以任何一次發(fā)布的代碼都可以回滾到我們的低代碼編輯器。這里最大的難點就是 “ 數(shù)據(jù)庫的碎片化信息 ” 與 “ Git 倉庫上源碼工程文件 ” 能具備有一一轉(zhuǎn)換的關(guān)系。


搭建效能衡量體系




最后一頁內(nèi)容提到了低代碼搭建平臺的效能衡量體系，其實它跟技術(shù)不太相關(guān)，但為什么要講效能衡量這個體系呢？我們在做搭建平臺 3 年，還有其他兄弟團(tuán)隊的搭建平臺都面臨一個問題，就是都說搭建能提效，但沒有一個很精確衡量提效多少的方法或策略，所以我們花了很長時間去研究，怎樣有一個策略來衡量搭建是不是真的提效了。具體的實現(xiàn)方式，衡量標(biāo)準(zhǔn)是我們借助業(yè)界霍爾斯特德軟件復(fù)雜度測量算法模型，這個算法模型可以將搭建頁面時產(chǎn)出的 Schema 作為一個輸入，它通過 Schema 里面的如表達(dá)式個數(shù)，代碼長度等數(shù)十個算子，可以計算出 Schema 的復(fù)雜度以及預(yù)計開發(fā)時長。

當(dāng)然，這個預(yù)計開發(fā)時長需要反復(fù)去調(diào)參，比較符合真實情況后會得到一個相對準(zhǔn)確的數(shù)字。另外呢，低代碼搭建相對于源碼開發(fā)，有一個好處就是用戶都是在我們的平臺上進(jìn)行操作，平臺側(cè)可以通過埋點，操作日志等手段記錄每一個研發(fā)人員在某個頁面上的操作記錄，在 2 次操作間隔時長在 10 分鐘之內(nèi)的算有效開發(fā)時間段，有效時間段的總和就是實際開發(fā)時長。通過計算公式 研發(fā)效能 = 預(yù)計開發(fā)時長/實際開發(fā)時長 就可以知道該用戶開發(fā)效能是提升還是降低。在 iceluna 平臺上數(shù)據(jù)中心會有專門一個效能中心，來反饋總個平臺的總體人均研發(fā)效能、個人研發(fā)效能等數(shù)據(jù)。所以說這一點非常有價值，所以分享給大家。


總結(jié)&展望

投遞簡歷方式

最后，就是我們團(tuán)隊的一個招聘，如果有意向的話，可以聯(lián)系我一下

團(tuán)隊產(chǎn)品鏈接：

歡迎加入我們的團(tuán)隊?。?br>
近兩年 Scott 觀察到前端行業(yè)已經(jīng)完全進(jìn)入競爭的深水區(qū)，各大小公司的前端 TL 剛剛上任，初帶團(tuán)隊，針對前端工程師這個群體，應(yīng)該怎么管人理事，搭臺拿結(jié)果，幫帶有成長，就成立了這個前端技術(shù)主管學(xué)習(xí)交流群，在人的選用育留上互相學(xué)習(xí)成長，入群的門檻是你有實線或者虛線在帶團(tuán)隊，請加 Scott 微信: codingdreamer 邀請入群：
看完若有啟發(fā)，就請點贊評論轉(zhuǎn)發(fā)三連吧

關(guān)鍵詞：實現(xiàn),后臺,平臺,設(shè)計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉