AgnosUI is a versatile widget library designed for various frameworks, providing a consistent user interface across platforms. Its core (also referred to as headless), written in pure TypeScript, serves as a foundation that can be utilized by any framework to generate a user interface.
You can integrate AgnosUI in two primary ways:
This straightforward approach allows you to quickly incorporate widgets into your project. Refer to the component documentation for usage details. Currently, AgnosUI supports Angular, React, and Svelte.
This approach offers complete customization of widgets, including markup and styling, while benefiting from AgnosUI's headless capabilities for managing display and interactions.
This method requires a deeper understanding and more effort, detailed in the comprehensive documentation. You can start building your widget based on existing widget code.
Maintaining full widget libraries over time can be challenging due to framework changes, shifts in usage patterns, and projects adopting different frameworks. AgnosUI addresses this challenge by separating the state and behavior of a widget from its rendering engine (the frameworks). This separation brings stability and several benefits:
The basic idea is to manage a widget from a data point of view only and APIs to interact with these data. This is a global picture:
The fundamental concept of AgnosUI revolves around managing a widget purely from a data perspective, along with APIs to interact with this data. The high-level workflow is illustrated below:
AgnosUI constructs widgets based on data, independent of the rendering engine in use. To be framework-agnostic, the system must provide:
The reactivity in AgnosUI is managed with Tansu.
Tansu has been initially developed by following the Svelte store specifications. It then extends its features to achieve full store management capabilities:
Signal
capabilities have been added. Notably, computed
is available in addition to derived
. The store itself is a function that can be invoked to obtain the current value. batch
method is provided to mitigate glitch issues. Tansu is the chosen solution due to its comprehensive feature set, making it the best fit for AgnosUI.
In this project, a Tansu object is typically referred to as a store
, and corresponding variables are postfixes with a $
sign.
Currently, AgnosUI provides UI adapters for three frameworks: Angular, React, and Svelte.
Using them is straightforward, just like any other external library. Import a widget and use it in your project. Refer to the specific documentation for each framework to understand the implementation details.
To make the most of AgnosUI, familiarize yourself with the following concepts:
As AgnosUI widgets are built on a reactive data system, you can leverage the core to create your own markup, using the data and the API to manage the UI and its behavior.
Learn more about this in the headless section