前端 low-code 意味著什麼？

一.low-code 是什麼？

A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A low-code model enables developers of varied experience levels to create applications using a visual user interface in combination with model-driven logic.

通過 GUI、配置化的方式代替傳統的手寫程式碼編程，讓經驗背景不同的開發者都能在低程式碼開發平臺上，基於可視化的 UI 和模型驅動的邏輯來建立應用程式

利用低程式碼平臺建立整個 App，或者只在一些特定場景需要人工編碼，減少了所需的人工程式碼量，一方面能夠提高業務交付速度，另一方面也能讓廣大非專業開發者參與應用開發，降低了開發門檻和人力成本

技術上，實現低程式碼平臺的關鍵要素是模型驅動設計、程式碼自動生成和可視化編程，通過這些手段來隱藏下層的程式碼細節

low-code 與 no-code

最 low 程度的 low-code 就是 no-code，也就是說，最大區別在於 no-code 無需編碼：

No-code development platforms are similar to low-code development platforms but require no coding at all.

具體的，主要差異在於：

平臺使用者：任何業務人員都能使用無程式碼平臺，而低程式碼平臺只面向開發者（儘管專業要求不那麼高）
核心設計：無程式碼平臺傾向於採用宣告式的模型驅動機制，讓使用者通過拖拽或簡單的表示式來操縱完成應用設計，而低程式碼平臺更傾向於通過人工編碼來指定應用程式的核心結構
使用者介面：無程式碼平臺為了簡化應用設計，一般只支援內建的 UI 庫，而低程式碼平臺可能會提供更靈活的 UI 選項，但代價是需要額外編碼，使用上的複雜性有所增加

二。與 20 年前的 Dreamweaver 有什麼區別？

聽起來，似乎與網頁三劍客時代的 Dreamweaver 沒什麼區別：

[caption id="attachment_2251" align="alignnone" width="625"] Dreamweaver[/caption]

與現代的前端 low-code 開發平臺相比，單從表面上看，可視化地自動生成一些程式碼確實沒有太大區別，內在的實質性差異在於：

目標場景不同：Dreamweaver 更多地聚焦前端開發場景，而在 low-code 開發平臺中，前端只是完整應用程式的一部分，服務端資料、路由、邏輯流程等都需要考慮在內
可視化操作粒度不同：現代 low-code 平臺通常有元件、區塊、頁面、模板等多級複用抽象，Dreamweaver 只面向 HTML 原生標籤
工程鏈路完備程度不同：Dreamweaver 僅覆蓋到開發、預覽、部署（FTP 上傳）環節，而現代 low-code 平臺大多涵蓋了完整的生命週期，包括釋出前的除錯、測試，釋出後的監控運維等各個環節

隨著前端工程體系的一路演進，現代的 low-code 平臺充分考慮了模組複用、生態接壤、前後端聯動、工程管理等重要因素，在成熟度和開發效率方面相比 Dreamweaver 都有了質的飛躍

三。前端為什麼需要 low-code？

近幾年 low-code 理念在前端領域逐漸流行起來，主要有這些原因：

被資源化的前端開發者：工作量大，但技術要求大多不高，生產效率成為了必須要解決的問題
開放的前端技術體系：low-code 類程式碼生成工具很容易與前端技術體系結合起來
趨於成熟的前端工程化體系：成熟穩定的前提下，才會轉而追求變革式的生產效率突破

被資源化的前端開發者

面對大量低技術含量的需求，前端開發者就變成了極易替代的資源（就像低值易耗資產一樣），前端人力進而成為產品需求迭代的瓶頸

此時，最好的解決辦法是通過工具化、自動化的方式提高生產效率，突破前端資源瓶頸，自然就有了 low-code 方向的探索和實踐，諸如 jQuery 時代的表單生成器、移動時代的 H5 頁面製作工具

開放的前端技術體系

與移動 Native 客戶端、服務端等技術相比，前端技術體系最為開放（甚至所有原始碼都是公開的），體現在：

第三方模組引入成本極低：無論佈局容器、樣式主題、邏輯模組、甚至整站，一行標籤直接引進來就能用，甚至能夠隨時動態引入
擁有基於 Web 標準的開放生態：整個前端生態都建立在統一的標準層之上，任何一點創新都很容易累積起來，也總能站在巨人的肩膀上進一步創新

因此，low-code 平臺得以站在巨人肩上前行，在元件庫、構建工具、甚至可視化設計、程式碼自動生成的基礎上進一步探索。另一方面，前端 low-code 產物都能應用到現有的任何前端應用程式中，無論生成的是 React/Vue 元件、jQuery 表單，還是 SPA（Single Page App）、MPA（Multiple Page App）

趨於成熟的前端工程化體系

既不在十幾年前，也不在更遠的將來，而是現在，為什麼？

最重要的一點，low-code 平臺的發展是在前端工程化體系趨於成熟的背景之下。畢竟只有溫飽問題都解決得差不多了，才能轉而追求更高的生產效率

從技術演進的角度來看，前端 low-code 探索與前端工程化的發展歷程息息相關：

前端工程化歷經了這樣幾個階段：

CLI 工具：腳手架、構建工具、除錯服務等等

GUI 客戶端：GUI 化的 CLI 工具，除互動方式外區別不大

定製化端 IDE：基於 IDE 擴充套��腳手架、構建、除錯、釋出、監控等工程鏈路能力

雲 IDE：基於 Web IDE 擴充套件一系列工程鏈路能力，進入雲研發時代

（摘自 [定製化 IDE 的核心價值](/articles/定製化 ide 的核心價值/)）

在 CLI/GUI 工具時代，編碼層面的效率提升主要體現在通過腳手架自動生成模板程式碼，減少了樣板程式碼的編寫，讓開發者碼得更少

在接下來的端/雲 IDE 時代，API 提示、自動補全、程式碼片段（Snippets）等實用功能也通通整合進來了，讓開發者碼得飛快

IDE 時代之後，編碼層面的效率提升已經達到極致，更進一步的生產效率提升需要變革式的突破。於是，迎來了 low-code 時代，讓非專業開發者也能「碼」得又好又快

從前端工程化的角度來看，low-code 是工程效率提升的重要方向（也是必經之路），不難發現其中的 low-code 演進痕跡：

模型驅動設計：從直接操作 DOM 到資料驅動檢視，提升程式碼可預測性
程式碼自動生成：從模板到程式碼片段到搭建，不斷減少人工程式碼量
可視化編程：從元件拼裝到拖拽生成，減少低效的重複工作

P.S. 實際上，low-code 平臺的發展不侷限於前端領域，移動 Native 客戶端、服務端也有眾多 low-code 探索，例如 Xcode SwiftUI：

VS Server Explorer：

以及阿里雲邏輯編排：

並且，據研究機構 Forrester 估計，低程式碼開發平臺有著極其廣闊的市場，可細分為資料庫、請求處理、移動端、流程和通用低程式碼平臺：

Segments in the market include database, request handling, mobile, process and general purpose low-code platforms.

（摘自 Low-code development platform）

四。前端領域的 low-code 探索

審視傳統的前端工作流：

業務需求 -> 設計稿 -> 應用/頁面/元件開發（還原設計） -> 業務邏輯程式碼 -> 構建 -> 釋出

具體的，還原設計分為 3 種方式：

開發單一元件：視覺效果還原以及模組功能開發
基於元件開發頁面：元件拼裝、元件間互動以及頁面整體邏輯串聯
基於頁面開發應用：路由配置

其中許多環節都能通過程式碼生成工具提高效率：

設計稿 -> 元件程式碼：即自動化設計還原，例如 imgcook
元件程式碼 -> 設計素材：反向轉換，豐富設計素材
元件 -> 頁面：通過可視化搭建簡化元件拼裝，自動生成頁面程式碼
頁面 -> 應用：可視化配置生成 SPA 或 MPA
業務需求 -> 業務邏輯程式碼：通過可視化地編輯條件、綁定資料、指定資料流向等方式生成樣板化的業務邏輯程式碼

在設計還原自動化（以及反向轉換）的基礎上，UI 素材與前端元件之間的界限幾乎不復存在了，UI 素材與前端元件能夠互通（UI 素材即前端元件，前端元件即 UI 素材），不僅提升了雙方的生產效率，還大幅降低了協作成本

五.low-code 模式下新的可能性

可視化研發模式：複雜度轉移到工具中，專業性要求降低
low-code 與智慧化結合：素材/元件智慧批量生成、結合端智慧、個性化推薦等技術，讓使用者根本停不下來
low-code 打入專業開發工具：在面向專業開發者的 IDE 中提供部分可視化輔助工具，如支付寶小程式 IDE
前後端一體的 low-code 方案：在端雲一體化開發的基礎上更進一步，自動生成、部署相應的 BFF/SFF 程式碼

像雲計算產品將專業的運維工作轉移到了雲供應商一樣，low-code 模式將專業的元件開發工作、甚至 BFF 介面開發工作都轉移到了可視化研發工具側，把專業的前端技術以普惠的方式賦能給了更多的非專業開發者，同時可視化輔助工具與專業 IDE 相結合，也讓專業的開發者更加高效

另一方面，前端生產力和生產效率提上來、專業性要求降下去之後，之前受限於開發成本而無法實現的事情都可以開始探索了，比如面向海量細分使用者群體的個性化 UI（所謂千人千面）、自媒體時代的個人建站（再小的個體也可以有自己的平臺）、高時效性的百變運營（而不只是發條 push 訊息）……