UI Development
Create responsive reactive applications driven by the KOS data model in a few key strokes
Introduction to UI Development
KOS UI applications represent a fundamentally different approach to web application development, designed specifically for real-time device control and monitoring in embedded IoT environments.
This guide explores the key conceptual differences between KOS applications and traditional web applications.
Traditional Web Applications
KOS Applications
State
State lives in multiple places: Browser state, server state, database state
State is centralized: Backend is the single source of truth
Communication
Communication is initiated by the client: User actions trigger requests
Communication is bi-directional: Device state changes push to UI automatically
Updates
Updates are manual: User must refresh or trigger actions to see changes
Updates are real-time: UI automatically reflects physical device changes
Data
Data flows in one direction: Client requests → Server responds
Data flows continuously: Physical Device ↔ Backend ↔ UI Model ↔ React Components
Getting Started
New to KOS development? Start with our foundational guides
Introduction
When developers first encounter KOS, they often try to understand it through the lens of traditional web development patterns. This comparison helps establish the…
Architecture & Philosophy
When developers first encounter KOS, they often approach it like any other framework- looking for components, state managers, or routing systems. But KOS represents…
The Mental Model Shift
From Web Pages to Device Interfaces
Traditional web development thinks in terms of pages, forms, and user workflows. KOS development thinks in terms of device capabilities, physical constraints, and operational state.
Instead of asking “What does the user want to do?”, KOS developers ask “What can this device do?” and “What is its current state?”.
From Client-Server to Device-Twin
Traditional apps manage the gap between client and server state. KOS apps manage the gap between physical reality and digital representation.
The UI becomes a window into the device’s actual state and capabilities, rather than a separate application that happens to interact with a backend.
From Web Pages to Device Interfaces
Traditional web apps use a “pull” model – the client requests data when needed. KOS apps use a “push” model – device state changes are automatically delivered to the UI.
This eliminates the class of bugs related to stale data and reduces the need for complex cache invalidation strategies.
Core UI Concepts
Master the essential building blocks of KOS applications.
CodeX App
Explore all concepts used in KOS Studio ecosystem.
How CodeX can assist you
The KOS Codex is a live demo used within Studio to demonstrate key KOS concepts for UI developers
Advanced Topics
Dive deeper into sophisticated KOS development patterns: