低代碼的熱潮在幾年前就火過吏奸，從阿里釘釘跨平臺協(xié)作方式，再到飛書上的審批流程陶耍，以及目前我們接觸到的表單審批奋蔚、投票的模板，這些都是關(guān)于低代碼的實現(xiàn)方式烈钞。隨著企業(yè)數(shù)字化轉(zhuǎn)型和云計算的不斷發(fā)展泊碑，低代碼平臺又一次成為熱門話題被越來越多的人討論。

今天分享的主題為淺談低代碼平臺棵磷，主要從以下 4 個方面進行介紹：

• 低代碼平臺概述

• 低代碼蛾狗、無代碼

• 低代碼平臺的技術(shù)路線

• 可視化拖拽平臺的應用

低代碼平臺概述

低代碼開發(fā)平臺，英文全稱“Low-Code Development Platform”仪媒，簡稱 LCDP，是通過少量代碼或零代碼就可以快速生成新應用谢鹊，實現(xiàn)業(yè)務應用的快速交付的應用平臺算吩。廣義上的低代碼平臺包括低代碼和零代碼，它們都屬于 APaaS（應用平臺即服務）佃扼。

低代碼這一概念首次出現(xiàn)于 20 世紀 80 年代偎巢，在近 40 年的歷程中，整個發(fā)展經(jīng)歷如下圖所示：

1.png

△（圖片來源于網(wǎng)絡）

第一階段是探索期兼耀，主要是基于 20 世紀 80 年代就有美國公司和實驗室開始研究程序可視化編程這個領(lǐng)域压昼，做出了4GL “第四代編程語言”求冷，后來衍生成 VPL（Visual Programming Language可視化編程語言）。

第二階段是發(fā)展期窍霞，2014年匠题，由研究機構(gòu) Forrester Research 正式提出了“低代碼/無代碼”的概念。

第三階段是爆發(fā)期但金，2018年韭山，荷蘭公司Mendix以7億美元被西門子收購、美國低代碼獨角獸企業(yè) Outsystem 獲得1.5億美元的融資冷溃。此次收購事件以及融資事件的發(fā)生將低代碼市場帶入資本方的視野钱磅，低代碼市場開始進入爆發(fā)期。

低代碼平臺代替了程序員開發(fā)數(shù)千行具有復雜代碼和語法的行似枕。它的作用是讓開發(fā)人員以及業(yè)務人員盖淡，通過“拖拉拽”的方式使用平臺，來創(chuàng)建完整的應用程序凿歼。同時突破了傳統(tǒng)業(yè)務之間溝通的復雜度和交付時間周期長的特點禁舷，能夠持續(xù)進行開發(fā)。

低代碼毅往、無代碼

低代碼平臺包括低代碼和無代碼牵咙，二者區(qū)別如下：

2.png

△（圖片來源于網(wǎng)絡）

• 無代碼：主要面向業(yè)務人員，零開發(fā)經(jīng)驗的業(yè)務人員通過拖拽等方式攀唯，無需編寫代碼洁桌，即可快速搭建各種應用。無代碼更適合單點場景的應用侯嘀，平臺應用性高于低代碼另凌。

• 低代碼：主要面向開發(fā)人員，通過自動代碼生成和可視化編程戒幔，只需要少量代碼吠谢，即可快速搭建各種應用。低代碼的市場占有率高诗茎，適合復雜場景交互應用的搭建工坊。平臺靈活性高于無代碼。

但本質(zhì)上低代碼與無代碼都能夠降低開發(fā)門檻敢订、快速響應業(yè)務需求王污、提升開發(fā)效率。

接下來我們來看看具體的低代碼平臺技術(shù)路線楚午。

低代碼平臺的技術(shù)路線

因低代碼平臺源自于集成開發(fā)環(huán)境（Integrated Development Environment昭齐，IDE）的可視化、模塊化與集成化特點矾柜，同時根據(jù)目標人群對象的使用阱驾，大體分為兩條線路：第一條為業(yè)務復用型就谜，主要包含應用開發(fā)平臺、智能表格里覆、SAAS 聚合丧荐，特點是數(shù)據(jù)與邏輯完全分離、各自獨立的模型驅(qū)動租谈，適合開發(fā)人員篮奄。第二條為開發(fā)工具型，主要包含在線 IDE割去、DSL 開發(fā)框架窟却、組件代碼庫，特點是數(shù)據(jù)與儲存結(jié)構(gòu)合一的表單驅(qū)動呻逆，適合業(yè)務人員使用夸赫。

3.png

△（圖片來源于網(wǎng)絡）

適合開發(fā)人員的技術(shù)路線

我們首先來看下適用于開發(fā)人員的技術(shù)路線模型驅(qū)動。由模型驅(qū)動對軟件所涉及到的功能進行建模咖城，然后以應用開發(fā)平臺為核心茬腿，承載各種開發(fā)工具和復雜邏輯，并將其可視化宜雀。然后輔以少量代碼切平，就能夠作為技術(shù)中臺核心幫助開發(fā)者快速產(chǎn)出一整套系符合企業(yè)需求的系統(tǒng)。具體處理場景示例如下：

4.png

開發(fā)人員通過圖中左右兩邊進行操作辐董，左邊是一些特定組件悴品，拖到中間的畫布里面。圖中的板塊都是相互獨立的简烘，需要通過右邊的語法把它們進行關(guān)聯(lián)苔严，再生成所需要的場景化應用，這是模型驅(qū)動的一種方式孤澎。

適合業(yè)務人員的技術(shù)路線

該路線是非IT模式届氢，以表單驅(qū)動數(shù)據(jù)為核心，通過拖拽構(gòu)建數(shù)據(jù)表方式展開業(yè)務分析設計覆旭。以做到完全去IDE化退子，像搭積木一樣按流程構(gòu)建程序邏輯。適合完全零基礎(chǔ)人員姐扮，比如人事行政進行資料歸檔絮供、OA審批，銷售人員客戶管理等茶敏。

處理場景示例如下：

5.png

左邊是拖拽組件，中間是畫布缚俏，右邊是編輯屬性惊搏。我們通過左邊拖拽表單將事件排列在上面贮乳，進行簡單的數(shù)據(jù)收集。右邊是對表單進行數(shù)據(jù)處理恬惯，比如標題向拆、寬度、必填線等設置酪耳。適合業(yè)務人員去操作填寫數(shù)據(jù)表格浓恳，快速生成自己想要的數(shù)據(jù)收集，這是表單驅(qū)動的一種方式碗暗。

對于這類技術(shù)路線的產(chǎn)品颈将，又拍云在2020年曾經(jīng)開發(fā)過一套，我們接下來通過又拍云低代碼產(chǎn)品來看一下表單驅(qū)動的具體應用場景言疗。

低代碼可視化拖拽平臺的應用

該產(chǎn)品使用拖拉拽的方式晴圾，生成所需要的表單。生成表單后噪奄，顯示面板會把表單數(shù)組包括的 json 數(shù)據(jù)拿出死姚，再通過它識別組件的順序進行編譯后展示。產(chǎn)品頁面結(jié)構(gòu)如下：

6.png

△ 產(chǎn)品頁面結(jié)構(gòu)

編輯器實現(xiàn)思路

該產(chǎn)品的編輯器實現(xiàn)思路如下：

首先勤篮，使用數(shù)組 componentData 維護編輯器中的數(shù)據(jù)都毒。

其次，將組件通過拖拽事件碰缔，拖拽到畫布上進行移動布局账劲。當然一個組件要設為可拖拽，那就需要為它添加 draggable 屬性手负，而且在將組件列表中的組件拖拽到畫布中時還會經(jīng)歷兩個關(guān)鍵事件：

• dragstart 事件

• drop 事件

dragstart 事件涤垫，它在拖拽剛開始時觸發(fā)，主要用于將拖拽的組件信息傳遞給布竟终，下圖是示例代碼：

7.png

drop 事件蝠猬，在拖拽結(jié)束時觸發(fā)，主要作用是用于接收拖拽的組件信息统捶，示例代碼如下圖：

8.png

之后使用 push() 方法將新的組件數(shù)據(jù)添加到 componentData榆芦。比如又拍云使用的 VLE 框架就是通過屬性來識別我們想要的組件。具體為組件 V-item 是文本數(shù)據(jù)寬喘鸟，可以通過其對應的屬性值進行上下數(shù)據(jù)綁定匆绣，把數(shù)據(jù)填到結(jié)成數(shù)組里面。

組件數(shù)據(jù)如下：

9.png

最后什黑，我們使用 v-for 指令遍歷 componentData崎淳，主要通過 is 屬性來識別出真正要渲染的是哪個組件，將每個組件逐個渲染到畫布愕把。例如要渲染的組件數(shù)據(jù)是 { component: 'v-text' }拣凹，則 <component :is="item.component" /> 會被轉(zhuǎn)換為 <v-text />森爽。

編輯器渲染的核心代碼如下所示：

10.png

全部完成后我們來看一下整體，如果將畫布設為相對定位 position: relative嚣镜，然后將每個組件設為絕對定位 position: absolute爬迟，只要通過監(jiān)聽三個事件就可以進行移動，這三個事件分別為：

• Mousedown 事件菊匿，在組件上按下鼠標時付呕，記錄組件當前的位置，即 css 中的 left 和 top跌捆。

• Mousemove 事件徽职，每次鼠標移動時，都用當前最新的 left 和 top 減去最開始的 left 和 top疹蛉，從而計算出移動距離活箕，再改變組件位置。

• Mouseup 事件可款，鼠標抬起時結(jié)束移動育韩。

以上就是編譯器的整體實現(xiàn)思路。

淺談低代碼平臺的未來

根據(jù)咨詢機構(gòu) Gartner 的市場分析來看闺鲸，2023 年全球超過 50% 的大中型企業(yè)將把低代碼應用平臺作為主要的占領(lǐng)應用平臺之一筋讨。預計到2024年，低代碼應用程序開發(fā)將占總應用開發(fā)的65%以上摸恍。這就引出了兩個問題：傳統(tǒng)的軟件開發(fā)會被取代嗎悉罕？低代碼是未來的趨勢嗎？

實際上立镶，低代碼開發(fā)并不會取代傳統(tǒng)的軟件開發(fā)壁袄，但它將改變在某些領(lǐng)域中的軟件開發(fā)，改變那些重復低效的業(yè)務媚媒，這意味著公司不需要為這種業(yè)務招聘大量的開發(fā)人員嗜逻，而是安排更多的專業(yè)軟件開發(fā)人員面向客戶的需求以及復雜和獨特的軟件開發(fā)問題。

盡管相較于原生的開發(fā)模式缭召，低代碼開發(fā)平臺能夠顯著提升開發(fā)效率栈顷，尤其適合業(yè)務變化快、預算有限嵌巷、開發(fā)時間緊迫的企業(yè)應用場景萄凤；但是低代碼平臺也有明顯的局限性，至少就目前來說搪哪，它主要用于搭建企業(yè)軟件靡努。因為此類軟件架構(gòu)是有一定規(guī)律的，但娛樂、社交等軟件開發(fā)比較深層交互的東西低代碼還是無法實現(xiàn)的颤难。

所以我認為低代碼并不是未來神年，它只是未來的一部分已维。