Skip to content

Frontend Architecture

The frontend of Champa Intelligence is a modern, performance-centric web application built with a focus on delivering a fast, responsive, and intuitive user experience. It combines lightweight JavaScript frameworks with a utility-first CSS approach to create a maintainable and scalable interface.

Core Technologies

  • JavaScript Framework: Alpine.js

    • Champa Intelligence uses Alpine.js for its lightweight, declarative, and reactive nature. It provides the power of modern frameworks like Vue or React without the heavy overhead, making it perfect for the platform's performance goals.
    • It is the key enabler of the lazy-loading architecture, managing the state of UI components and triggering API calls to fetch data as they become visible.

  • Styling: Tailwind CSS

    • The entire user interface is styled using Tailwind CSS, a utility-first CSS framework.
    • This approach promotes consistency, rapid development, and a highly maintainable design system without the need for writing custom CSS files.
    • The build process uses PostCSS and Autoprefixer to process the utility classes into an optimized, production-ready CSS file.

  • Diagramming & Visualization:

    • bpmn-js: The industry-standard library for rendering and interacting with BPMN 2.0 diagrams.
    • dmn-js: The corresponding library for rendering DMN decision tables and DRDs.
    • chart.js: Used for creating interactive charts and graphs for trend analysis and data visualization.
    • ag-grid: A powerful data grid component used for displaying, sorting, and filtering large tabular datasets.

  • Build System: Webpack

    • Webpack is used to bundle all frontend assets (JavaScript, CSS).
    • Babel is integrated to transpile modern JavaScript (ES6+) into a more widely compatible format, ensuring the application runs smoothly on various browsers.

Key Architectural Pattern: Lazy Loading

The single most important architectural pattern in the frontend is lazy loading (or "load-on-demand").

  • Powered by Alpine.js and Intersection Observer API: Alpine.js manages the state of each dashboard section (e.g., "loading," "loaded," "error"). The browser's native Intersection Observer API is used to detect when a section's placeholder scrolls into the viewport.
  • Workflow:
    1. The initial page loads a lightweight HTML shell with placeholders for each analytical component.
    2. An Alpine.js component is attached to each placeholder.
    3. An Intersection Observer watches each placeholder.
    4. When a user scrolls and a placeholder becomes visible, the observer triggers a function in the Alpine.js component.
    5. The Alpine component sets its state to "loading," displays a spinner, and fires an asynchronous fetch request to the corresponding API endpoint.
    6. When the data is returned, the component updates its state to "loaded," hides the spinner, and renders the data using the appropriate visualization library (Chart.js, AG Grid, etc.).

This pattern is the primary reason for the platform's exceptional responsiveness and performance.