Skip to content

Latest commit

 

History

History

README.md

Frontend Architecture

🎨 Overview

The LFX One frontend is built with Angular 20 using stable zoneless change detection, Angular Signals for state management, and a comprehensive design system based on PrimeNG and Tailwind CSS.

🏗 Architecture Components

Core Framework

  • Angular 20 with stable zoneless change detection
  • Angular Signals for reactive state management (preferred over RxJS)
  • Server-Side Rendering (SSR) with AngularNodeAppEngine
  • Standalone Components with explicit imports

UI System

  • PrimeNG 20 with custom LFX UI Core preset
  • Tailwind CSS v3 with PrimeUI plugin integration
  • CSS Layers architecture for optimal style cascade
  • LFX Tools web component for platform navigation

State Management

  • Angular Signals for component and service state
  • Service-based patterns with computed signals
  • Reactive data flow without Zone.js dependency

📋 Documentation Sections

Learn about Angular 20 features, zoneless change detection, and SSR configuration.

Understand PrimeNG wrapper components, layout patterns, and component hierarchy.

Explore CSS layers, Tailwind configuration, and LFX UI Core integration.

Master Angular Signals patterns and service-based state management.

Discover SSR benefits, build optimizations, and performance strategies.

🚀 Key Features

  • Zoneless Change Detection: Better performance without Zone.js
  • Signal-First Architecture: Reactive programming with Angular Signals
  • Component Wrapper System: Abstracted PrimeNG components for consistency
  • Design System Integration: LFX UI Core with custom theming
  • Modern Development: TypeScript strict mode, ESLint, Prettier

🔗 Quick Links