度城-如何用低代碼方式快速生產(chǎn)組件
前端早早聊大會(huì)，前端成長(zhǎng)的新起點(diǎn)，與掘金聯(lián)合舉辦。加微信 codingdreamer 進(jìn)大會(huì)專(zhuān)屬周邊群，贏在新的起跑線。
第二十四屆|前端算法專(zhuān)場(chǎng)，金三銀四，每個(gè)即將去往大廠的候選人都在為算法而焦慮，4-24 全天直播，9 位講師(阿里淘系/微軟/字節(jié)/網(wǎng)商/E 簽寶等)，點(diǎn)我上車(chē)?? (報(bào)名地址)：
關(guān)鍵詞有：
算法的定義 算法的常用解題思路 算法涉及的領(lǐng)域 算法使用的場(chǎng)景 所有往期都有全程錄播，可以購(gòu)買(mǎi)年票一次性解鎖全部
正文如下
本文是第十六屆 - 前端早早聊組件化專(zhuān)場(chǎng)，也是早早聊第 115 場(chǎng)，來(lái)自 1688-度城 的分享。
一、自我介紹
大家好，我是來(lái)自 CBU 體驗(yàn)技術(shù)部度城。今天來(lái)給大家分享一下《如何用低代碼開(kāi)發(fā)組件》。
二、前言
名詞解釋
首先來(lái)介紹一個(gè)概念低代碼。大家可能在一些其他的渠道或者說(shuō)在其他的一些站點(diǎn)上面了解過(guò)，它并不是一個(gè)非常新的一個(gè)概念，相反它是一個(gè)比較老的概念。所謂低代碼 LowCode 可理解為它的代碼量會(huì)比較少一點(diǎn)。我們?cè)谡ｉ_(kāi)發(fā)的時(shí)候，我們大部分都是用的是源碼，即將所有邏輯代碼敲出來(lái)，但是我們想希望用另外一種方式把一部分代碼寫(xiě)出來(lái)，一部分通過(guò)其他方式來(lái)替代。源碼方式 ProCode，還有一種方式叫 NoCode 就是一點(diǎn)代碼都沒(méi)有，主要在一些搭建的場(chǎng)景，它不需要有代碼，就可以把一個(gè)頁(yè)面或者說(shuō)把一個(gè)組件搭出來(lái)。ProCode 就是我們之前的源碼方式。
方案比較
這三者之間有什么區(qū)別的？我們把除了代碼以外的另外一種開(kāi)發(fā)的方式，我們把它叫做可視化的開(kāi)發(fā)方式。什么叫可視化的開(kāi)發(fā)方式呢？可視化就是除了代碼以外的 UI 視圖設(shè)置、GUI 的配置、產(chǎn)品化的配置方案、一些細(xì)節(jié)的高效抽象等。我們把代碼跟可視化設(shè)成兩個(gè)比例：
NoCode 全部都是可視化，沒(méi)有任何一行代碼； ProCode 全部都是代碼； LowCode 一部分是代碼，一部分是可視化，可同時(shí)兼顧效率和靈活性。
這里有這樣一個(gè)箭頭，從上到下來(lái)說(shuō)：
NoCode 效率上是最高的，因?yàn)椴恍枰?xiě)代碼，可能去采用一些可視化的這種方式比如拖拽這種形式就可以生成。 ProCode 是最靈活的，大家知道那個(gè)代碼是非常靈活的，可以寫(xiě)很多邏輯。 LowCode 是有兩者之間混合的?，F(xiàn)在汽車(chē)有新能源車(chē)、有燃油車(chē)。新能源車(chē)它里面又分純電動(dòng)車(chē)和混動(dòng)車(chē)，混動(dòng)的車(chē)是一部分燃油，一部分通過(guò)電動(dòng)的，它是結(jié)合這兩種的優(yōu)勢(shì)，在現(xiàn)階段里面是這樣看的。
LowCode 本質(zhì)
這邊是我的一個(gè)總結(jié)：LowCode 是采用一種產(chǎn)品化或者可視化的方案來(lái)開(kāi)發(fā)我們?nèi)粘５拈_(kāi)發(fā)，比方說(shuō) UI、一些配置等等，來(lái)降低開(kāi)發(fā)成本和門(mén)檻，同時(shí)來(lái)提升一些開(kāi)發(fā)效率。寫(xiě)代碼需要有一些專(zhuān)業(yè)的程序員開(kāi)發(fā)，但低代碼產(chǎn)品，在體驗(yàn)做的非常棒的情況下，不需要有非常多的開(kāi)發(fā)經(jīng)驗(yàn)，普通的一些業(yè)務(wù)人員，也可以通過(guò)這個(gè)工具去完成它需要的一個(gè)產(chǎn)品的開(kāi)發(fā)。
這個(gè)左邊是一個(gè)可視化。目前來(lái)說(shuō)，代碼它是可以解決很多一些業(yè)務(wù)邏輯的問(wèn)題，我們?cè)谝恍┨厥獾膱?chǎng)景或環(huán)節(jié)，還是需要通過(guò)代碼來(lái)進(jìn)行一些業(yè)務(wù)的開(kāi)發(fā)，所以我們會(huì)在整個(gè)平臺(tái)上面嵌入了一個(gè)小型的 Web IDE 在線編碼的方式來(lái)提升整體的一個(gè)靈活性和適應(yīng)性。
低代碼開(kāi)發(fā)平臺(tái)價(jià)值
今天講的主題是怎么去做組件，我們希望能夠通過(guò)低代碼方式能多快好省的去做一些組件。什么叫多快好省？就是我們的產(chǎn)量高、效率高、質(zhì)量好和投入人少，是非常理想的一個(gè)狀態(tài)。并不是說(shuō)我們不需要去寫(xiě)代碼，因?yàn)槲覀儼l(fā)現(xiàn) LowCode 里面的代碼量會(huì)比較少一點(diǎn)，我們只希望去少寫(xiě)一些低效、重復(fù)的代碼。
案例
低代碼在很多場(chǎng)景是可以去應(yīng)用的，比如中后臺(tái)場(chǎng)景，大家在市面上可以看到很多低代碼的產(chǎn)品，像微軟、阿里的宜搭，如果不知道低代碼的一個(gè)具體應(yīng)用，也可以去看一下。我今天來(lái)講的是導(dǎo)購(gòu)場(chǎng)景，一個(gè) 1688 的無(wú)線場(chǎng)景去做這樣的一個(gè)低代碼的應(yīng)用。
三、1688 前臺(tái)場(chǎng)景業(yè)務(wù)背景
大家可以根據(jù)我這個(gè) Case 看看有什么啟發(fā)，在自己的一些應(yīng)用場(chǎng)景可以用這種方式去做一些事情。先大致介紹一下 1688 前臺(tái)場(chǎng)景業(yè)務(wù)：我們可以簡(jiǎn)單理解為 B 類(lèi)的淘寶，批發(fā)商需要去采購(gòu)商品可以在一些工廠或者二級(jí)的批發(fā)商那里去采購(gòu)。整體業(yè)務(wù)的分配比例是無(wú)線的用戶(hù)會(huì)比較多一點(diǎn)，所以今天講的比較多的是在無(wú)線場(chǎng)景這塊的一個(gè)應(yīng)用。大致的一個(gè)鏈路是這樣，中間有一些導(dǎo)購(gòu)的場(chǎng)景，我們有很多的產(chǎn)品，通過(guò)這些導(dǎo)購(gòu)的場(chǎng)景去給到不同端，不同端又有不同人群。
從開(kāi)發(fā)頁(yè)面到搭建頁(yè)面
在做任何技術(shù)平臺(tái)之前，產(chǎn)品或宣傳需要有一個(gè)場(chǎng)景，通常是直接手動(dòng)去開(kāi)發(fā)一個(gè)頁(yè)面去滿(mǎn)足這樣的一個(gè)需求。后面會(huì)發(fā)現(xiàn)頁(yè)面上有很多組件是差不多的，業(yè)務(wù)的每個(gè)頁(yè)面有些是一樣的，有些又是不一樣，需要有這樣一個(gè)組合的關(guān)系，所以就會(huì)產(chǎn)生搭建平臺(tái)。搭建平臺(tái)是用來(lái)把不同的組件來(lái)產(chǎn)生一個(gè)頁(yè)面，這里有一個(gè)比較簡(jiǎn)短的演示，上面有很多組件，這些組件是可以配置參數(shù)或數(shù)據(jù)源就會(huì)生成一個(gè)頁(yè)面。這里可以看到兩個(gè)組件就可以把它搭起來(lái)，搭起來(lái)后，就生成了一個(gè)全新的頁(yè)面。所以我們開(kāi)發(fā)的小伙伴就不用每次去開(kāi)發(fā)這樣的頁(yè)面了，他就會(huì)把精力放在組件上去。搭建平臺(tái)是由產(chǎn)品或運(yùn)營(yíng)去搭建，這樣可以把開(kāi)發(fā)小伙伴給釋放出來(lái)，解決了一些業(yè)務(wù)組件的復(fù)用問(wèn)題、增加了一些頁(yè)面的靈活性和產(chǎn)出效率。既然平臺(tái)可搭建頁(yè)面了，那可以把開(kāi)發(fā)小伙伴的精力重點(diǎn)放到開(kāi)發(fā)組件上去。也就是說(shuō)通過(guò)組件開(kāi)發(fā)，然后在搭建平臺(tái)使用，就可以生成一個(gè)頁(yè)面，所以我們的精力主要是去開(kāi)發(fā)組件。
業(yè)務(wù)場(chǎng)景 - UI 多樣的前臺(tái)場(chǎng)景組件
來(lái)看一下整體前臺(tái)導(dǎo)購(gòu)場(chǎng)景這樣的一個(gè) Case，大家可以看到導(dǎo)購(gòu)場(chǎng)景的組件樣式、排版是非常多的，UI 的展示也是非常多的。
四、面臨問(wèn)題
這里就會(huì)出現(xiàn)兩個(gè)問(wèn)題：
一是 UI 這么復(fù)雜多變。由于人員是比較有限的，或者說(shuō)投入的精力是比較有限的，我們?nèi)绾卧谝恍┕潭ǖ?、少量的人力投入下，?lái)構(gòu)建足夠多的一些 UI 組件。 二是有很多端的需求。手機(jī)端怎么去面對(duì)各種各樣的 APP、怎么通過(guò)一套代碼來(lái)完成跨端的需求。
如何在有限的人力下構(gòu)建多變的 UI 組件
如何快速構(gòu)建多變的 UI
左邊是典型的導(dǎo)購(gòu)卡片，我們?cè)趺磥?lái)去做一些提效，最開(kāi)始想到的是把組件模板提取出來(lái)，相當(dāng)于左邊的樣式、排版把它固定下來(lái)。但最后我們發(fā)現(xiàn)組件它在不同的 UI 里有不同的展示，大家看下左邊，發(fā)現(xiàn)組件模板是很難把它沉淀下來(lái)的，UI 是沒(méi)法進(jìn)行收斂的。接下來(lái)就得想辦法怎么去構(gòu)建 UI 進(jìn)行提效，既然組件模板沒(méi)法收斂，我們會(huì)在開(kāi)發(fā)層面想辦法怎么去提效。
UI 主要是由兩部分組成：節(jié)點(diǎn)和樣式。形容下面的一些代碼片段一樣，這個(gè)是它的一個(gè)節(jié)點(diǎn)。我們希望能夠把片段之前采用手動(dòng)的方式去把它構(gòu)建出來(lái)，接下來(lái)我們希望通過(guò)一些工具，也就是通過(guò)半自動(dòng)的方式，能通過(guò)機(jī)器的形式把它構(gòu)建出來(lái)。有兩個(gè)方式，第一個(gè)方式就是說(shuō)這個(gè)節(jié)點(diǎn)可以通過(guò)可視化拖拽把它生成出來(lái)，第二個(gè)方式更加直接的，UED 一般會(huì)有視覺(jué)稿，我們是不是可以直接通過(guò)視覺(jué)稿來(lái)進(jìn)行導(dǎo)出，這樣的話我們就可以跨過(guò) UI 開(kāi)發(fā)這個(gè)過(guò)程。
快讀構(gòu)建視圖 - 物料線上化
先來(lái)重點(diǎn)講一下可視化 UI 拖拽這種形式。左邊是一個(gè)常見(jiàn)的列表，對(duì)于這個(gè)列表進(jìn)行拆解，我們把它每一部分叫做物料，有導(dǎo)航、文字、圖片和容器列表，我們需要能夠把這些物料線上化。這就需要通過(guò)一個(gè)協(xié)議，通俗來(lái)說(shuō)就是通過(guò)一個(gè) JSON 描述，把上面的一些物料屬性記錄下來(lái)。比方拿這個(gè)圖片來(lái)舉例，我們就會(huì)分成兩個(gè)屬性：一個(gè)是屬性值，比方說(shuō)圖片地址、渲染方式等；還有一種是樣式，比方說(shuō)高度、寬度和邊距等等。有了這些屬性了后，可通過(guò)這些屬性及物料注冊(cè)到線上，通過(guò)產(chǎn)品的方式，把剛才的圖片地址、渲染方式，通過(guò)一些可視化 UI 的方式進(jìn)行展現(xiàn)?？梢钥吹缴厦嬗疫吥菑垐D上，圖片鏈接、屬性和布局樣式。
來(lái)看一下簡(jiǎn)單的一個(gè)事例：左邊是正常的一張營(yíng)銷(xiāo)卡片，這個(gè)時(shí)候我們可以去設(shè)置它的寬和高，設(shè)置后繼續(xù)生效，可以去改變圖片地址和邊距，這是在編排模式下。在預(yù)覽模式下，它可以正常的展示，這個(gè)就是剛才保存修改過(guò)的一個(gè)值。
節(jié)點(diǎn)拖拽實(shí)現(xiàn)原理解析
原理是有一個(gè)編排拖拽面板和一個(gè)預(yù)覽面板，是通過(guò) Schema 協(xié)議的方式把它串起來(lái)。這是剛才每個(gè)物料的屬性，下面是它的樣式的描述。有了這個(gè)協(xié)議后，在拖拽時(shí)把這些物料接入進(jìn)來(lái)，通過(guò)物料的屬性面板，對(duì)每個(gè)物料進(jìn)行調(diào)整，在渲染時(shí)把物料導(dǎo)入進(jìn)來(lái)，通過(guò) react create element 直接把它轉(zhuǎn)成虛擬 DOM 進(jìn)行渲染。
快速構(gòu)建視圖 - Sketch 導(dǎo)出
還有一種更簡(jiǎn)單的方式就是直接通過(guò)視覺(jué)稿進(jìn)行構(gòu)建。我們美術(shù)同學(xué)或者 UED 同學(xué)，通過(guò) Sketch 設(shè)計(jì)的一個(gè)視覺(jué)稿，可以通過(guò)視覺(jué)稿的插件把它導(dǎo)出，然后通過(guò)一些機(jī)器學(xué)習(xí)的一些算法，可以把它的 UI 樣式和結(jié)構(gòu)直接還原出來(lái)。最后需要經(jīng)過(guò)一些少量的調(diào)整，二次加工了后，就可以把整個(gè) UI 直接可以展現(xiàn)出來(lái)。在這里我們?cè)賮?lái)看一下簡(jiǎn)單的一個(gè) Case，這里我們已經(jīng)把它導(dǎo)出來(lái)，導(dǎo)出完了后，我們?cè)诿姘謇镞M(jìn)行導(dǎo)入。大家可以看到導(dǎo)入的時(shí)候它是一個(gè) Schema，這個(gè)時(shí)候它已經(jīng)在我們的系統(tǒng)里面，我們可以對(duì)它進(jìn)行二次編輯。但這里有個(gè)要求，視覺(jué)稿需要有一定的規(guī)范，需要 UED 同學(xué)按照一定規(guī)范去做。這一套工具的叫 imgcook。大家也可以去搜索它，去用這個(gè)工具，它是可以把一些 PS 格式或 Sketch 格式的一些 UI 直接導(dǎo)入出來(lái)，進(jìn)行代碼的一些識(shí)別。
驗(yàn)證可行性 開(kāi)發(fā) AB 實(shí)驗(yàn)
剛才也講了，怎么去還原這些 UI、怎么通過(guò)工具的形式去做一些 UI，在嘗試著用這個(gè)方案的時(shí)候，我們也去跟我們之前傳統(tǒng)的編碼方式進(jìn)行了一些比較。我們做了兩組實(shí)驗(yàn)，來(lái)看一下通過(guò)這種方式是否能夠加快 UI 的開(kāi)發(fā)速度。第二種就是我們傳統(tǒng)的一些編碼跟樣式的一些開(kāi)發(fā)。我們發(fā)現(xiàn)一旦掌握了可視化的開(kāi)發(fā)以后，我們?cè)诤竺娴囊恍┙M件開(kāi)發(fā)時(shí)間上大幅度的下降。這個(gè)是我們做的一些測(cè)試后得出的一個(gè)結(jié)論：它能有效的提升我們 UI 的構(gòu)建效率。
將數(shù)據(jù)和事件與可視化 UI 結(jié)合
剛才我們看到了在場(chǎng)前臺(tái)場(chǎng)景需要展示一個(gè)組件，光展示 UI 是不行的。很多時(shí)候我們需要有一些數(shù)據(jù)，這個(gè)是非常必須的，我們?cè)趺慈フ宫F(xiàn)它里面的數(shù)據(jù)是什么。還有一些事件，UI 點(diǎn)擊了以后，它觸發(fā)什么樣的一個(gè)事件，比如說(shuō)去領(lǐng)個(gè)紅包或者發(fā)一個(gè)請(qǐng)求等等。正常的一個(gè)組件它需要有這三個(gè)元素進(jìn)行一些交互和融合，最后才能成為一個(gè)完整的組件。
數(shù)據(jù)源低代碼設(shè)計(jì)
我們?cè)賮?lái)看一下低代碼，這個(gè)平臺(tái)里面它們是如何把三個(gè)元素進(jìn)行結(jié)合。剛才我們也看了 UI 是怎么進(jìn)行產(chǎn)生的，我們現(xiàn)在來(lái)看一下我們的一個(gè)請(qǐng)求，我們這里叫一個(gè)數(shù)據(jù)源。這里是我們的一個(gè)請(qǐng)求，有請(qǐng)求地址、請(qǐng)求入?yún)?、?qǐng)求方法等等，通過(guò)一個(gè)面板把幾個(gè)元素屬性整合起來(lái)。填寫(xiě)請(qǐng)求地址，比方 JSONP、GET 或 POST，下面就是具體的一些參數(shù)，在請(qǐng)求時(shí)我們會(huì)有一些比較特定的處理，比如回調(diào)函數(shù)的一些處理。這個(gè)時(shí)候通過(guò)面板的方式是非常去難以去解決的，所以我們?cè)诶锩媲度肓艘粋€(gè)小的代碼編輯器，這里面它是可以去處理一些回調(diào)的一些邏輯等等，我們可以把一些東西填在這里。這個(gè)邏輯是怎么去執(zhí)行的呢？我們填完了以后，在線的會(huì)把它源碼轉(zhuǎn)換成 ES5 的語(yǔ)法，在執(zhí)行的時(shí)候，這是個(gè) String，我們直接 new Function() 就可以去執(zhí)行了，這個(gè)原理也是比較簡(jiǎn)單的。
在線代碼轉(zhuǎn)化/執(zhí)行
最后，我們需要把我們請(qǐng)求的數(shù)據(jù)掛載到 UI 上面。我們需要通過(guò)把字段的直接可視化的掛載掛載在 UI 上面，比方說(shuō)剛才請(qǐng)求了一個(gè)列表，那列表里面我要展示一張圖片，我要把圖片字段要掛在特定的一個(gè) UI 的一個(gè)展示上。還是以剛才那個(gè) Case，拿這個(gè)數(shù)據(jù)去做一個(gè)展示，這里是請(qǐng)求的一個(gè)數(shù)據(jù)，你可以理解成是一個(gè)列表，這個(gè)列表里面我會(huì)我們會(huì)把這個(gè)數(shù)據(jù)掛在右邊的列表的這樣一個(gè)容器上面。有了這個(gè)數(shù)據(jù)，接下來(lái)刷出來(lái)的結(jié)構(gòu)，就會(huì)有一個(gè)一個(gè)列表的數(shù)據(jù)。但是這個(gè)列表你可以發(fā)現(xiàn)它圖片都是一模一樣的，因?yàn)槲覀儓D片現(xiàn)在默認(rèn)是一張靜態(tài)圖，我們接下來(lái)需要把這張靜態(tài)圖替換成一個(gè)動(dòng)態(tài)的圖片，這里我們會(huì)有一個(gè)綁定變量。在綁定變量里面，因?yàn)槭且粋€(gè)循環(huán)體，這里每一個(gè)循環(huán)的 key，我們把它設(shè)置為一個(gè) item，這里取的是 item 的一個(gè)字段，這個(gè) item 就是數(shù)據(jù)的一個(gè)字段，這就叫 image 字段，我們把它綁定上了以后，這個(gè)時(shí)候我們重新刷一下，我們會(huì)發(fā)現(xiàn)案例表的數(shù)據(jù)已經(jīng)發(fā)生了變化，已經(jīng)是變成我們數(shù)據(jù)的真實(shí)的一個(gè)值。
數(shù)據(jù)掛載 UI
可視化開(kāi)發(fā)還有一個(gè)好處，我們經(jīng)常會(huì)去做二次開(kāi)發(fā)，比如一個(gè)組件開(kāi)發(fā)完了以后，過(guò)了一段時(shí)間，另外一個(gè)同學(xué)去接手做這個(gè)事。這個(gè)時(shí)候可能他要去迭代一個(gè)需求，需求也很簡(jiǎn)單，比如改一個(gè)字段或增加一些小的邏輯等等。正常的情況下，我們需要把之前的代碼通讀一遍，知道它具體改的地方在哪里，具體它的邏輯在哪，但是我們通過(guò)可視化左邊的展示，會(huì)非常直觀，比方說(shuō)我要改一個(gè)文字，我就選擇文字，把文字綁定的一個(gè)變量做一個(gè)改動(dòng)，或者說(shuō)我做一個(gè)邏輯變動(dòng)。這個(gè)在可視化的一個(gè)產(chǎn)品里面，我們是可以非常方便的去做一些二次迭代的，這也是整個(gè)低代碼平臺(tái)對(duì)后面維護(hù)的一個(gè)好處。
如何面對(duì)跨端的需求
第二點(diǎn)我們?cè)賮?lái)講一下如何去做一些跨端的需求。
多端能力支持
我們現(xiàn)在有很多端，比方說(shuō) Web 端、在阿里內(nèi)部的一些 APP 里還會(huì)有一些 Weex 端，其他的一些端上，比方說(shuō)它要支持一些小程序等等，阿里內(nèi)部有一個(gè) Rax 框架，這個(gè)框架它是可以把它轉(zhuǎn)成 Weex 端、Web 端。Rax 框架它也可以通過(guò)轉(zhuǎn)碼這種形式去支持小程序。我們?cè)趺慈グ盐覀儼训痛a Scheme 實(shí)現(xiàn)類(lèi)似 Rax 轉(zhuǎn)碼，我們也是通過(guò) AST 的這種轉(zhuǎn)碼的方式。因?yàn)?Schema 是一個(gè)跟代碼無(wú)關(guān)、跟 DSL 無(wú)關(guān)的這樣一個(gè)邏輯性的描述。比方說(shuō)你可以把 Schema 轉(zhuǎn)成 React 形式、Rax 形式、甚至 Vue 的形式都可以。但是我最初的 Schema 是不會(huì)有任何變化。比方說(shuō)你后面再過(guò)一段時(shí)間，可能有另外一種 DSL 產(chǎn)生的，或者說(shuō)另外一種更高級(jí)的 DSL 產(chǎn)生，我照樣也是可以將 Schema 通過(guò)一定的轉(zhuǎn)換邏輯把它轉(zhuǎn)出來(lái)的。所以通過(guò) Schema 的好處就是說(shuō)它可以非常簡(jiǎn)單的去收攏各種 DSL 的這樣一個(gè)能力。
Schema 轉(zhuǎn)碼方案
具體怎么去通過(guò) Schema 去轉(zhuǎn)，我們會(huì)把 Schema 里面會(huì)進(jìn)行一些拆解，Schema 里面有很多的節(jié)點(diǎn)，比方說(shuō)有一些專(zhuān)門(mén)負(fù)責(zé)做視圖描述的節(jié)點(diǎn)，它告訴你這個(gè)結(jié)構(gòu)是怎么樣的。還有一些數(shù)據(jù)請(qǐng)求節(jié)點(diǎn)，告訴你這個(gè)請(qǐng)求地址、請(qǐng)求參數(shù)和請(qǐng)求類(lèi)型等。還會(huì)有一些生命周期的參數(shù)，還會(huì)有一些交互事件的一些函數(shù)，我們把它進(jìn)行一些拆解，拆解了以后，通過(guò) AST Babel 插件進(jìn)行一個(gè)解構(gòu)，把它轉(zhuǎn)成形如這樣的一個(gè)目標(biāo)的 DSL 的代碼。
CBU 無(wú)線場(chǎng)景 LowCode 落地?cái)?shù)據(jù)
這個(gè)是我們自己的一個(gè)落地?cái)?shù)據(jù)，我們用了這個(gè)產(chǎn)品以后，我們發(fā)現(xiàn)內(nèi)部的提效也是非常明顯的，提效了 400%。很多時(shí)候我們需要去寫(xiě)，但是我們用了這種開(kāi)發(fā)方式后會(huì)發(fā)現(xiàn)可能需要一個(gè)簡(jiǎn)單的拖拽就可以了。
收斂技術(shù)，高效協(xié)同
最后來(lái)講一個(gè)問(wèn)題，就是技術(shù)收斂跟高效協(xié)同的問(wèn)題。
在一個(gè)團(tuán)隊(duì)開(kāi)發(fā)的過(guò)程中，經(jīng)常會(huì)出現(xiàn)一些問(wèn)題，比方說(shuō)我需要用哪個(gè)組件、我不知道哪個(gè)組件能用、我的組件構(gòu)建發(fā)布它是怎么去處理的、很多文檔比較散不大好找和剛才說(shuō)的二次開(kāi)發(fā)的問(wèn)題（去看別人代碼，程序員最怕看別人代碼非常累）。這就是我們?cè)染€下的開(kāi)發(fā)方式，因?yàn)樗敲總€(gè)人自己去執(zhí)行的，很難收口，規(guī)范也很難執(zhí)行。當(dāng)然我們也可以通過(guò)一些特定的規(guī)范，比方說(shuō)工程的這種方式來(lái)做一些收斂，這也是一種方式。我們可以把這種方式搬到線上，工程也好其他方式也好，把它線上化，大家入口是一樣的，大家進(jìn)去都是一個(gè)入口。我可以在這個(gè)平臺(tái)里面我可以滿(mǎn)足我做任何的事情，線上的話我可以非常好的去管控你，非常好的去規(guī)范，比方發(fā)布構(gòu)建和代碼的質(zhì)量，可以把它全部收攏起來(lái)，只要看一個(gè)文檔就行，不需要去管其他的東西。這種比較適合一些對(duì)技術(shù)要求不是特別高的，但是它又要滿(mǎn)足它的一些業(yè)務(wù)的整個(gè)場(chǎng)景的推進(jìn)。因?yàn)槭且粋€(gè)線上的，所以它是可以通過(guò) Web 平臺(tái)做一個(gè)統(tǒng)一的收攏，對(duì)使用者來(lái)說(shuō)，只要體驗(yàn)好這個(gè)產(chǎn)品，就可以完成一些開(kāi)發(fā)任務(wù)。
整合開(kāi)發(fā)鏈路
這個(gè)是傳統(tǒng)的開(kāi)發(fā)鏈路，它有很多構(gòu)建、搭建環(huán)境等等。但是我們通過(guò)線上化后，都是采用云構(gòu)建、云預(yù)發(fā)和部署的方式，它沒(méi)有這種環(huán)境這種概念，因?yàn)樗际窃?Web 上面，所以只需要做一些開(kāi)發(fā)調(diào)試、接口調(diào)試等基礎(chǔ)工作就行，其他的工作都是通過(guò)平臺(tái)或者產(chǎn)品的方式把它包裝好就行了。因?yàn)椴襟E開(kāi)發(fā)少了、鏈路少了，開(kāi)發(fā)效率肯定也會(huì)提升。
構(gòu)建與發(fā)布
我們還經(jīng)常會(huì)有一些發(fā)布構(gòu)建的問(wèn)題。比方說(shuō)我們需要建倉(cāng)庫(kù)，不同的部門(mén)、不同的公司建倉(cāng)的腳手化等等都是不太一樣。新人都需要把流程全部走一遍，可能還會(huì)有一些其他雜七雜八的細(xì)節(jié)，比如說(shuō)安裝依賴(lài)、調(diào)試方式等等。我們通過(guò)產(chǎn)品的方式、低代碼的方式，怎么去做呢？新建倉(cāng)庫(kù)或叫初始化，通過(guò)在 Web 上去新建一個(gè)組件，在組件里面把一些邏輯寫(xiě)在后臺(tái)，或者調(diào)試的時(shí)候，通過(guò)實(shí)時(shí)的預(yù)覽，只要按調(diào)試按紐，就可以把預(yù)覽界面展示出來(lái)，不需要去寫(xiě)什么其他的一些命令，或者是裝其他庫(kù)等等。
這個(gè)是我們新人注冊(cè)的時(shí)候，只要填一些信息就行。調(diào)試的時(shí)候我們會(huì)把這些包全部都會(huì)拉下來(lái)，這個(gè)是調(diào)試的這樣一個(gè)邏輯。我們還會(huì)有一些本地開(kāi)發(fā)和構(gòu)建的問(wèn)題，如果有線上線下的構(gòu)建，我們需要去做一些分支，或者說(shuō)做一些發(fā)布部署等等。通過(guò)云構(gòu)建的方式，可以把這寫(xiě)東西全部放在后臺(tái)，前臺(tái)只要發(fā)一個(gè)命令或請(qǐng)求，可以在云服務(wù)器上把這些東西做了。
傳統(tǒng)開(kāi)發(fā)與低代碼開(kāi)發(fā)對(duì)比
還有一些傳統(tǒng)的開(kāi)發(fā)方式，比方文檔、組件庫(kù)，代碼的開(kāi)發(fā)風(fēng)格大家都是因人而異的，每個(gè)人的開(kāi)發(fā)方式寫(xiě)法都不一樣。通過(guò)平臺(tái)的方式，有統(tǒng)一文檔，物料也是在線的，大家在面板里面有多少物料，大家可以自己選，反正有就有了，沒(méi)有的話我們就提需求，大家再去擴(kuò)充，這樣是一個(gè)非常統(tǒng)一的。最后轉(zhuǎn)出來(lái)的代碼都是一樣的，因?yàn)榇蠹叶际怯脵C(jī)器轉(zhuǎn)的，風(fēng)格是完全統(tǒng)一的。對(duì)整個(gè)團(tuán)隊(duì)或者說(shuō)對(duì)一個(gè)技術(shù)團(tuán)隊(duì)有一個(gè)非常好的收斂。
低代碼開(kāi)發(fā)平臺(tái)的目前存在的問(wèn)題
低代碼也有自己?jiǎn)栴}，并不是說(shuō)特別牛逼的。
但相比傳統(tǒng)的開(kāi)發(fā)體驗(yàn)而言，它需要有一定的學(xué)習(xí)成本，對(duì)于一些特別是一些開(kāi)發(fā)習(xí)慣來(lái)上來(lái)講，因?yàn)橛行╅_(kāi)發(fā)同學(xué)他習(xí)慣了手寫(xiě)代碼，突然有一天對(duì)他說(shuō)不用手寫(xiě)代碼，只需要拖拽用產(chǎn)品這種可視化方式，他可能不太習(xí)慣，這有一個(gè)成本習(xí)慣去調(diào)整的，這是一個(gè)問(wèn)題。 有些產(chǎn)品特別是一些中后臺(tái)的產(chǎn)品，它的邏輯非常復(fù)雜，可能有幾千行，他有各種交互，這個(gè)時(shí)候你把這個(gè)東西放到可視化的產(chǎn)品來(lái)說(shuō)，它本身對(duì)低代碼平臺(tái)產(chǎn)品的體驗(yàn)來(lái)說(shuō)是非常高的，需要有一個(gè)更好的這樣的體驗(yàn)，才能把這些邏輯通過(guò) UI、通過(guò)產(chǎn)品、通過(guò)可視化去把它搭建起來(lái)，不然維護(hù)起來(lái)會(huì)非常麻煩，可能比你單獨(dú)寫(xiě)代碼還麻煩一點(diǎn)。 是不是可以跟現(xiàn)有的一些源碼模式能夠有一個(gè)更好的互通。比方說(shuō)組件的形式，能不能把一些已經(jīng)寫(xiě)好的組件導(dǎo)入進(jìn)來(lái)，我做完的組件也能夠跟其他的一些源碼組件不一致，我都是一樣的，大家都是可以在一個(gè)大的一個(gè)容器里面去用，能夠跟現(xiàn)有的源碼體系做一個(gè)更好的結(jié)合。
五、未來(lái)規(guī)劃
這是我們未來(lái)的一些規(guī)劃，我們這個(gè)引擎目前用的是阿里自己寫(xiě)的一個(gè)低代碼引擎，我們也努力的去把它完善，后續(xù)還會(huì)把它做得更加好用，現(xiàn)在只是一個(gè)能用的方式。我們希望后面能夠輸出一些通用的引擎，可能我們?cè)谝院髸?huì)把引擎進(jìn)行開(kāi)源，大家可以把所有的業(yè)務(wù)，只要你用 React 或者 Vue 的產(chǎn)品，這種框架我都可以用引擎去解決一些業(yè)務(wù)上的一些問(wèn)題，甚至我可以在一個(gè)引擎上面進(jìn)行二次開(kāi)發(fā)，形成自己在業(yè)務(wù)、公司或部門(mén)上的比較業(yè)務(wù)化的這樣一個(gè)平臺(tái)，這個(gè)引擎就像一個(gè)框架一樣，去解決一些問(wèn)題。
六、總結(jié)
總結(jié)一下，主要講了兩大問(wèn)題。第一個(gè)是說(shuō)我們?cè)趺赐ㄟ^(guò)低代碼有限的方式來(lái)構(gòu)建的一些 UI 組件，這里我們講到了是通過(guò)一些智能導(dǎo)出，通過(guò)可視化拖拽的形式來(lái)替代手寫(xiě)快速實(shí)現(xiàn) UI 開(kāi)發(fā)。我們?cè)趺磥?lái)進(jìn)行一個(gè)跨端需求，比方說(shuō)多 DSL 的需求，我們可以把 Schema 作為一個(gè)中間態(tài)，這個(gè) Schema 跟 DSL 無(wú)關(guān)，通過(guò)一些轉(zhuǎn)換的方式，這里寫(xiě)的是用 AST 方式去轉(zhuǎn)成不同的端。最后我們也講到了一個(gè)我們?cè)趺礃油ㄟ^(guò)云平臺(tái)方式去做一些技術(shù)收斂，通過(guò)在線的開(kāi)發(fā)方式來(lái)解決我們之前線下開(kāi)發(fā)方式的一些問(wèn)題。
七、團(tuán)隊(duì)介紹
介紹一下我們的團(tuán)隊(duì)，就是我們這邊的一個(gè) CBU，我是屬于 CBU 搜索廣告團(tuán)隊(duì)的，我這里打個(gè)廣告，我們整個(gè)團(tuán)隊(duì)的話是負(fù)責(zé)做 CBU 搜索，Web 無(wú)線的，還有 CBU 大流量廣告這兩塊業(yè)務(wù)。我們的核心的技術(shù)也用了很多大流量的 Node BFF 的應(yīng)用，包括我們剛才講到的低代碼的一些開(kāi)發(fā)方式，在我們業(yè)務(wù)里面已經(jīng)全面啟用了，我們也有很多一些前端加智能算法，智能算法在我們的業(yè)務(wù)里面去用。有興趣的同學(xué)、想投簡(jiǎn)歷、想跟我聊一些低代碼相關(guān)的一些同學(xué)也可以加我一下我的微信，后續(xù)我們進(jìn)一步進(jìn)行溝通。
八、推薦書(shū)籍
我推薦的書(shū)是一些老書(shū)，大家可能都聽(tīng)過(guò)，但是不一定大家都看過(guò)，但我覺(jué)得這些書(shū)是一些比較基礎(chǔ)的比較經(jīng)典的書(shū)，大家可以有時(shí)間的話可以去看一下。
九、QA
Schema 里面包含了 onClick 函數(shù)的字符串，那怎么處理作用域呢？或者跳轉(zhuǎn)頁(yè)面這些操作應(yīng)該要怎么處理？
在 Schema 會(huì)有函數(shù)，首先實(shí)例化。低代碼是以組件或者頁(yè)面維度，所以在實(shí)例化這個(gè)函數(shù)的時(shí)候，我們會(huì)把容器的一些對(duì)象、函數(shù)的 this 對(duì)象和函數(shù)的 target 對(duì)象等等，我們會(huì)把它們注入進(jìn)來(lái)，我們會(huì)把一些父元素的一些節(jié)點(diǎn)、一些變量我們會(huì)把它注入進(jìn)來(lái)。這樣在函數(shù)里面使用 this 或其他屬性的時(shí)候，是可以去用到這些對(duì)象。
如果是正常的頁(yè)面跳轉(zhuǎn)的話，是可以在我們物料上面去配一個(gè)鏈接地址，去做一些頁(yè)面的跳轉(zhuǎn)，我們整個(gè)低代碼也是可以以頁(yè)面緯度做去做頁(yè)面的。你可以在整個(gè)系統(tǒng)里面去配置一個(gè)路由，去處理一些頁(yè)面跳轉(zhuǎn)關(guān)系。
別忘了 4-24 的第二十四屆|前端算法專(zhuān)場(chǎng)，金三銀四，每個(gè)即將去往大廠的候選人都在為算法而焦慮，9 位講師(阿里淘系/微軟/字節(jié)/網(wǎng)商/E 簽寶等)，點(diǎn)我上車(chē)?? (報(bào)名地址)：
所有往期都有全程錄播，可以購(gòu)買(mǎi)年票一次性解鎖全部
別忘了給文章點(diǎn)贊