在上一篇《我的十年前端生涯》中，我有提到過一個前端階段，叫前端模塊化，在這個階段里，我做得比較多的事情，就是讓前端的各個模塊獨立運行，然后利用配置化的方式來使頁面與邏輯關聯起來，這是一種編碼形式的lowcode方式，這才是模塊化的亮點，你只需要牽線搭橋就可以把整個專案快速完成掉，歷史的車輪總是在前進的，我們不可能一直停留與滿足于這種寫代碼的形式，于是乎，就有了可視化前端編程，
最近正好在做這樣的一個專案，也了解了些周邊的產品，發現大多數的國內產品都停留在如何生成一個表單的基礎上，要么就是生成的這個玩意兒還得添加大量的代碼，最后只成了一個拖動組件的demo，這是怎么導致的呢，我們來分析這個背景，一個方面，是由于有所謂的kpi考核任務，很多時候，前端的重點都放在了酷炫上面，實用性偏弱，無法花費時間去針對實際專案去研發，而且主次關系混亂，我曾經有去聊過一家公司，我一提到這個lowcode平臺，他第一想到的就是問拖動組件實作了沒有，
廢話不說了，我們來先看一下，一個nocode的平臺應該具有哪些模塊，如下圖所示：
我把它分成了五個模塊，他們共同完成一件事，那就是如何在平臺上創建一個可運行的專案，并且無需進行任何編碼（nocode），或少量編碼(lowcode)，即可發布，
一、編輯器
編輯器的功能主要是通過它，可以實作組件的可視化編輯，包括拖拽組件拼裝頁面，配置組件屬性等功能，他包含兩類組件，一類是容器組件，一類不是容器組件，好，我們看下演示效果圖，
這里演示了兩種情況，一種是從工具列新增組件到舞臺中，一種是在舞臺中移動原有組件，首先說一下，這個編輯是react做的，運行在瀏覽器端，從0到現在這個樣子，我一個人大概做了一個半月的樣子，所以這個東西其實很耗時，可能還要再花一個月左右，才能到達拿它去做產品原型的程度，我們可以看到，他分為左中右三個部分，左側是頁面管理，中間是展示舞臺，右側是工具列，每一塊具體的功能，后面有空在另說，
二、組件庫
為什么會有一個組件庫的概念呢，其實很多人不理解我為啥要去花大量的時間封裝很多組件出來，包括以前jquery時代的時候，我也是封裝了大量的原始插件，其實我也很懶，我不想做這些重復的作業，也無法說服領導讓其他人做這些，所以在這里我做了一些取舍，我覺得不好用的組件我就會自己硬編碼出一個組件，如dialog、tabs、inputnumber這類，我覺得可以在antd的基礎上擴展的組件，我就直接在antd的基礎上進行擴展，比如table、select、datepicker組件，說實話，我的內心里想全部采用自己寫的組件的，但由于我是一個人的團隊，我必須把我的時間用在更重要的事情上，但二次封裝是必不可少的，我們可以把它理解為可配置化的組件庫，他們大多我都開源至github上了：https://github.com/react-xui,同時也希望大家多給我本人的github點下小星星，滿足一下我的虛榮心，https://github.com/tianxiangbing
三、決議器
如果編輯器是整個平臺的軀體的話，那決議器就是靈魂，組件庫是就是血液，其實整個平臺的建設里，我覺得決議器才是最難的，可能有人會說，它不就是個createElement嗎？對，他就是個createElement，他把編輯器生成的模板檔案，拿來決議成實際的html代碼進行瀏覽，這個程序就是createElement的程序，但如果你需要讓你的html去資料源關聯，變成一個動態網站，那就需要做一些額外的操作了，這一塊的具體實作，后面再講，我們只需要知道，他要能幫我實作界面的呈現，資料源的關聯，并能觸發資料的變化即可，
四、后臺服務
這一塊功能比較簡單，就是我們針對路由頁面資料的系結，模板庫的管理等，需要進行資料存盤在資料庫里的操作，在這里我就隨便找了個mysql和egg進行搭建，
五、代碼生成器
這是個什么東西呢，說好了的nocode，為啥還要生成代碼呢，其實我也沒開始做，他的作用我們暫且理解為生成專案發布的代碼吧，還有一個作用就是可以進行一些代碼的修改、全域配置啥的吧，
總結一下，一個可視化的前端nocode平臺，他需要完成上面五個模塊的開發，我希望大家要做這個東西的，基本時間預算要有，不要指望兩三個月就出成果，我又要吐槽一下了，我現在做了快2個月了，也就完成編輯器的一些功能，集成的那些組件大多數是以前的積累，包括決議器這塊的功能，我也是在以前的專案中就已經完成了的，當然我是一個人的團隊，所有功能都只有我一個人做，如果你們要達到1.0版本的功能，我預估是不少于3-6人月的作業量的，我畫了個圖示，1.0版本的功能如下所示：
可能不同的人的關注的重點不太一樣，我關注的是如何把它落地實施到專案中，提升我的個人團隊貢獻值，領導希望他是一個可以拿到老板面前提升整個團隊的價值，所以，原子彈還得接著往下造，下一步呢，我要先讓這個平臺可以制作產品原型，
https://github.com/tianxiangbing
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/285971.html
標籤：其他