可視化搭建的一些思考和實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"傳統前端業務開發中，組件角色定位、演化","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9e/9ed7ec450029b98b561f0a749a717df8.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在傳統Web開發過程中，前端項目的技術架構方式大概分爲幾個步驟，一般我們先確定一個基礎的技術選型，比如Vue或者React，隨後，我們會選擇功能組件庫，比如ElementUI或者antDesign，之後再根據業務需要，二次封裝一些定製化的業務組件，這基本上就完成了我們對中後臺系統的技術結構搭建。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨後，在不斷的業務開發過程中，我們再根據實際需要，抽象一些公共區塊模塊，經過日積月累，通過這些業務區塊組件，我們就可以快速的去搭建一個新頁面，從而極大的提升團隊的開發效率。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是，在這種場景下，我們仍然不可避免的，需要主動去創建新的頁面，這個過程鏈路依舊很長，針對這種情況，我們就需要考慮有沒有更優雅的方式，將這種開發流程狀態進行抽象，規則化，從而減少這種頁面重複搭建過程。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"組件化的一些侷限性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1f/1fb103e57b02bc521f24d61753fd0dbf.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"針對部分團隊，前端項目非常多的情況，我們依然需要對每個前端工程單獨引入業務組件，這個過程本身也會造成效率的低下。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"針對一些複雜系統或者跨部門開發，多個系統之間的頁面，也可能會共享業務組件，這就不可避免的會帶來溝通和研發成本的提升，甚至在很多時候，我們不得不去在團隊時間中做出一些妥協和共識，才能實現業務開發。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"我現在一部分的工作會來自不同的公司、行業，在跨行業、跨公司主體或者第三方社區時，我們也缺乏一種規則來實現不同主體之間的高效的流通。","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"低/無代碼的充要條件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1dbf6ee6667bc9d6a65f5f0854b17ac2.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"組件的流通：目前針對組件的流通，我們缺乏跨主體的一些協議，比如物料組件的生產、消費、管理、二次封裝、編排等等。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"豐富的物料庫：基於業務組件的物料庫是低代碼平臺必備的環節。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"編排：編排的主要能力，是爲了方便開發者輕鬆設計、製作、配置業務組件。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"渲染器：當我們的業務開發者開發完畢一個頁面，我們需要提供一種方式讓用戶去預覽或者發佈，這就需要一個渲染器將我們生成的代碼進行頁面渲染、展現。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null},"content":[{"type":"text","text":"出碼模塊：基於低代碼平臺開發完一個項目後，我們需要交付源碼包或者項目，方便我們的開發者進行生產部署或者二次開發。","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"低代碼的一些侷限性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3f/3f36b3bd08b5f1a874676dac734ca88f.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"低代碼是需要業務、產品、技術等等，多方之間進行一定量的妥協，我們只能解決30%~60%的業務場景，最終的效果仍然需要進行業務驗證。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"低代碼實踐-H5-Dooring","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/45/45ff9fa974c97243fc32fde1d0db2309.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"H5-dooring是去年下半年，開源的一個低代碼平臺，主要的目的是方便用戶快速搭建一個簡單的低代碼項目，從2020年下半年至今，Github上已經有4500+stars，同時有50+家企業、1000+用戶基於H5-dooring生成頁面。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"低代碼交互的三大實現思路","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/34/349ffc42f2c694b5f93f6a8f6acf5838.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一種是釘釘宜搭採用的這種自然流佈局方式，它的優點在於這種開發方式更貼合我們傳統的開發流程，它的配置靈活度也非常高，並且也更容易去做適配，但相對來說開發門檻略高，對沒有技術開發經驗的小白開發者不太友好。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二種是我們H5-Dooring採用的這種智能網格佈局方案，它的優勢是我們開發者可以去通過拖拽來更輕鬆的搭建一個組件、頁面，但缺點就是無法去對一些更復雜的層級組件進行實現，比如圖層或者圖片之間的疊加，或者對多個組件之間的靈活度，有着非常高要求的場景。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後一種就是自由佈局方案，自由佈局是現在很多lowcode平臺普遍採用的方案，比如易企秀、魯班、字節魔方等等，它的好處顯而易見，對有着自定義需求的業務場景，它的支持顆粒度非常友好。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"H5-Dooring整體架構簡介","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ec/ec89741f55679fb46db3ccd9f0d3cdd9.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"H5-Dooring的整個架構主要包括以下幾個模塊：物料庫、佈局畫布、屬性面板、功能面板，以及一些其他的拓展能力。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"渲染方面：H5-Dooring的頁面渲染是基於schema信息，動態進行組件的渲染，佈局方式主要是利用schema中，組件的位置信息來動態計算網格位置，從而渲染出整個頁面。另外組件的加載，也是基於schema組件信息按需進行加載，所以針對一個複雜頁面的渲染，它的加載速度也不會很慢。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"屬性面板、表單設計：H5-Dooring的屬性配置採用動態配置面板，內部基於一套DSL規則進行實現、解析，支持靈活的屬性設置。另外，我們也封裝很多常用的表單組件，支持開發者快速進行頁面搭建。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"動態數據源設計：現在很多低代碼平臺的數據源設計採用的都是靜態設置，比如多個業務組件使用同一個數據源，往往是進行多份數據的複製，之間不再產生關聯。H5-Dooring支持動態數據源設計，這意味着我們可以在生產環境下動態去加載數據，從而進行數據更新、替換。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"出碼模塊：目前H5-Dooring支持構建出Dist包和源碼包，背後的實現是基於我們的基座工程，它允許我們的用戶，在線生成Dist工程和源碼工程的Zip包，並提供下載。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"可視化搭建的未來展望","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/95/95de0799d0d6adbbf1e972414fded69c.jpeg","alt":"","title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一點是搭建引擎優化，從而能夠去支持我們做更多功能的擴展、以及豐富業務組件物料，以來滿足更多的應用場景。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二點是離線化，很多公司受限於各種網絡問題，需要一些本地離線化開發，我們後期可能會通過Electron這樣的能力去進行實現。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第三點是加強組件之間聯繫的動作系統，以支持我們業務組件的交互跟協作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第四點是我們監控系統的智能化搭建，我們可以通過對用戶操作、用戶數據的反饋系統，分析出一個用戶他自己的偏好，然後動態通過一些個性化服務能力。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最後一點是跨端的需求，這種需求也是現在很多前端項目的剛性需求，我們也會去設想一些實現方案。","attrs":{}}]}]}