在上一篇《我的十年前端生涯》中，我有提到過一個前端階段，叫前端模塊化，在這個階段里，我做得比較多的事情，就是讓前端的各個模塊獨立運行，然后利用配置化的方式來使頁面與邏輯關聯起來，這是一種編碼形式的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