DOCSEARCHbyAlgolia
Submit Docs

LowCode Engine

repository·main·Indexed 12 days ago

https://github.com/alibaba/lowcode-engine

An enterprise-class, extension-oriented low-code technology stack providing a scalable kernel for building custom low-code platforms. It includes modules for code generation supporting Icejs and Rax (@alilc/lowcode-code-generator), material ingestion via JSON Schema (@alilc/lowcode-material-parser), and a plugin-based architecture for materials, setters, and UI components like the Outline Pane.

Tokens
188.1K
Snippets
487
Records
764
Agent score
96%

What's inside LowCode Engine

  1. Overview of Parts (造物)

    main

    「Parts·造物」 is a next-generation material R&D and integration tool built on top of the open-source Low-Code Engine. It serves two primary purposes: demonstrating how various components in the open-source ecosystem integrate to form a productive low-code platform, and acting as a tool to produce materials (components) for low-code platforms.

    It provides two core functional capabilities:

    1. Importing React components into Low-Code Engine: Using online visual "Material Description" (物料描述) configurations, any React component developed with any tool can be quickly adapted to the Low-Code Engine and imported into low-code projects without additional component development.
    2. Low-Code Component Production: Users can produce components using low-code methods. This features a low barrier to entry, providing abundant atomic components for composition, comprehensive debugging/preview capabilities, and component lifecycle control. The produced components can be used both within Low-Code Engine projects and in standard source code projects after code generation (出码).

  3. What is the Alibaba Low-Code Engine?

    main

    The Alibaba Low-Code Engine is a low-code designer R&D framework designed specifically for developers who are building their own low-code platforms.

    It is not a standalone low-code platform for end-users to build applications; instead, it provides the core capabilities and extensibility required to create a custom low-code designer. The engine handles complex tasks such as material ingestion, orchestration, component configuration, and canvas rendering, allowing developers to focus on business-specific features through APIs and plugins.

  4. What is @alilc/lowcode-material-parser

    main
    The @alilc/lowcode-material-parser module is responsible for material ingestion. It automatically scans and parses source code components to produce a JSON Schema that conforms to the 《中后台搭建组件描述协议》 (Middle-end Construction Component Description Protocol). This allows source code components to be used as materials within the Low-Code Engine ecosystem.

  5. Explore Low-Code Engine Demo features

    main

    The Low-Code Engine Demo is divided into several functional areas to facilitate page design and configuration:

    Top Operation Area

    • Undo/Redo: Revert or re-apply changes.
    • Save to Local: Persist your current work locally.
    • Reset Page: Revert the page to its initial state.
    • Preview: View the rendered version of the designed page.
    • Async Resource Loading: Manage asynchronous assets.

    Left Panel and Operations

    • Outline Panel: Manage and adjust the component tree structure of the page.
    • Material Panel: Search for components and drag them onto the editor canvas.
    • Source Code Panel: Edit page-level JavaScript code and CSS configurations.
    • Schema Editor: Directly edit the underlying JSON schema of the page.
    • Language Switch: Toggle between Chinese and English.
    • Submit Issue: Report bugs to the engine developers.

    Center Canvas (Visual Editor)

    • Component Selection: Click a component to view its properties in the right panel.
    • Reordering: Drag components to change their sequence.
    • Nesting: Drag components into container-type components.
    • Copy/Delete: Use the copy button on the component or click the 'X' / press Delete to remove components.

    Right Configuration Panel

    • Component Hierarchy: Shows the path from the page root to the currently selected component; click names to navigate the tree.
    • Component Configuration: Provides specific settings based on the component type, categorized into:
      • Properties (属性): Basic attribute values.
      • Styles (样式): Visual styling configurations.
      • Events (事件): Binding exposed component events.
      • Advanced (高级): Settings for loops, conditional rendering, and key properties.

  6. Typical Topics Discussed in Open Source Meetings

    main

    Community meetings cover a wide range of low-code related subjects, including:

    • Industry Development: Collaborative efforts to accelerate the low-code industry.
    • Feedback & Improvements: Collecting and discussing user experience and improvement suggestions.
    • Frontend Integration: Combining frontend technologies with the Low-Code Engine.
    • Use Case Sharing: Real-world application experiences using the engine.
    • Technical Deep Dives: Explaining the technical principles and implementation of the Low-Code Engine.
    • Project Updates: Latest progress, including new version releases and feature implementations.
    • Future Trends: Discussions on the future direction of low-code technology and analysis of current platform trends.

  7. Manage engine configuration with the config module

    main
    The config module is responsible for reading and writing configuration values within the Low-Code Engine. It provides synchronous methods for immediate access and asynchronous/event-based methods for reacting to configuration changes or waiting for values to be initialized.

  8. Use the Workspace API to build application-level designers

    main
    The workspace module provides application-level APIs used to develop low-code designers. It serves as the primary interface for managing the designer's lifecycle, including plugin registration, panel management (skeleton), window models, and resource lists.

  9. Manage remote data sources with the Data Source Panel

    main

    The Data Source Panel provides a visual interface to manage remote data sources within the low-code protocol. It allows users to create, delete, edit, sort, import, export, copy, and search for data sources.

    Key features include:

    • Visual Editing: Operates on the data source Schema in the low-code protocol.
    • Built-in Request Types: Supports fetch and JSONP out of the box.
    • Data Source Engine Integration: Works with the Data Source Engine to handle the production and consumption of data.

  10. Understand the Low-Code Engine Editor Layout

    main

    The Low-Code Engine editor is organized into four main functional areas:

    1. Left Panel (Operations & Panels): Contains the Material Panel, Outline Panel, Source Code Panel, and Schema Editor.
    2. Center Area (Canvas): The visual page editing area where you drag, drop, and arrange components.
    3. Right Panel (Component Configuration): Displays properties, styles, events, and advanced settings for the currently selected component.
    4. Top Bar (Operations): Provides global actions like Undo/Redo and Schema management.

  11. Protocol Goals and Design Principles

    main

    The Low-Code Engine protocol aims to decouple the Orchestration Editor, Rendering Module, and Code Generation Module by providing a standardized Schema.

    Key Design Principles:

    • Semantic: Clear and readable.
    • Progressive Description: Describes the hierarchy from Source Components $\rightarrow$ Components $\rightarrow$ Blocks $\rightarrow$ Pages $\rightarrow$ Applications.
    • Standard Source Code Generation: Defines clear mappings between properties and source code to ensure high-quality output.
    • Interoperability (可流通性): Products (apps, pages, blocks, components) should be transferable between different orchestration products without relying on private data storage.
    • Multi-platform Support: Must support not just React, but also Mini Programs and other targets.
    • Standard Compliance: Supports Internationalization (i18n) and Accessibility (A11y) standards.