Skip to Content
Getting StartedMental Models

Mental Models

Before building applications with Momen, it’s crucial to establish the right mental models. Momen’s architecture stands on three pillars: Design, Data, and Action.

Design - Building Interfaces

In Momen, interface building is based on the CSS Box Model and Flexbox Layout. Effective use of positioning methods helps create better layouts.

Core Concepts

  • Basic Components: The basic unit of a page (e.g., Button, Text, Image).
  • Containers (Views): A box that wraps other components and determines their arrangement (Row/Column).
  • Positioning:
    • Relative (Default): The component follows the natural flow of the container. Its position is determined by the parent container’s Flexbox layout direction (Row/Column).
    • Absolute: The component is removed from the natural flow and positioned relative to its immediate parent container.
    • Fixed: The component is locked to a specific position within the browser window (Viewport), maintaining its position even when scrolling.

Conditional View

To display different UIs in different scenarios, use the Conditional View component.

  • Concept: The Conditional View is not a single container, but a collection of distinct Views. It acts as a switch, displaying only one View at a time based on the active condition.
  • Workflow:
    1. Define Cases: Add condition branches (e.g., Case 1: “VIP”, Case 2: “Guest”).
    2. Independent Canvas: Each case creates a separate, empty canvas (automatically). You switch between these cases to build the specific UI for that scenario.

Example: Show a Login button for guests, but display User Profile for logged-in users.

💡

Intuition: Think of the page as nested boxes. Parent boxes determine the direction of child boxes, and child boxes fill the content.

Data - Managing Data

Momen features a built-in high-performance relational database. Application data is managed as dynamic content rather than static text.

Core Concepts

  • Table: A structured collection of data records (e.g., “account”, “post”).
  • Relation: The logical connections between tables.
    • Example: A One-to-Many relation between account and post tables.
  • Data Binding: Connecting Dynamic Data to component properties.
    • Dynamic Lists: List components can directly use tables or APIs as data sources.
    • Page Data Source: Declare a “Data Source” on a page to make data accessible to all components within the page.
  • Conditional Data: Use different data values under different conditions (e.g., displaying “N/A” if a profile bio is empty).
💡

Intuition: Data is the core asset of the application. The UI is just the presentation layer, and the Database is the source.

Action - Orchestrating Logic

Applications require interactivity. The Action system follows the “Trigger → Execution” pattern.

Core Concepts

  • Trigger: User operations (Click, Input Change) or System events (Page Load, Data Change).
  • Actions & Nodes: Specific tasks executed in response to a trigger (e.g., Navigate, Toast, Database operations).
  • Interaction(Frontend):
    • Configured directly on components.
    • Supports Conditional Branches.
  • Actionflow (Backend):
    • Reusable backend workflows.
    • Created in the Actionflow panel,composed of various Nodes.
    • Supports Loops and Conditional Branches.
    • Can be triggered by frontend events, schedules (cron), database changes or webhooks.
💡

Intuition: Logic is “Cause and Effect”. The user’s input (Trigger) acts as the command, driving the system to execute the specific task (Execution).

Summary

Building a Momen app is a continuous cycle:

  1. Define Data: Structure your database tables and relations.
  2. Build Interface: Visualize the data using components and layouts.
  3. Configure Logic: Define interactions and business rules.
Last updated on
IntroductionMethodology