Introduction
In the realm of web development, creating forms that are both dynamic and framework-agnostic is a complex challenge. Traditional form systems, even those driven by schemas, often entangle logic with their structural or UI elements. Formitiva seeks to address this issue by providing a solution that fully decouples data, presentation, and behavior across popular frameworks such as React, Vue, Angular, and Vanilla JS.
The Limitations of Conventional Separation
Most systems attempt to separate data and UI by employing JSON schemas and components. However, the logic often remains embedded within these schemas, hardcoded in the components, or tied to specific frameworks, leading to hidden dependencies.
The Core Principle: Reference Over Embedding
Formitiva introduces an innovative approach where instead of embedding logic directly within the schema, it references it. For instance:
{
"field": "email",
"validatorHandlerName": "emailValidator"
}
This schema references behavior without defining the specifics of validation procedures, UI rendering, or logic execution.
Understanding the Registry System
The heart of this architecture is the registry system, which houses all implementations:
- Component Registry
- Validation Registry
- Logic/Workflow Registry
The registry serves as a lookup mechanism, translating string references into actual implementations, thereby ensuring flexibility and modularity.
The Role of the Runtime Engine
The runtime engine is crucial for:
- Parsing schemas
- Resolving references through the registry
- Executing logic such as validation and conditions
- Delegating UI rendering tasks
This transforms the workflow into a streamlined process: Schema → References → Registry → Runtime Execution.
Renderer Abstraction: Achieving Framework Agnosticism
Instead of directly rendering UI, the runtime engine delegates this responsibility to renderer adapters tailored for each framework:
- React Adapter
- Angular Adapter
- Vue Adapter
- Vanilla JS Adapter
These adapters take abstract UI definitions and map them to framework-specific components, ensuring compatibility and consistency across different platforms.
Architectural Overview
The architecture of Formitiva is layered, providing a clear separation of concerns:
- Schema: Represents declarative intent
- Registry: Facilitates implementation mapping
- Runtime: Acts as the execution engine
- Renderer: Manages the UI layer
Enhancing Extensibility with Plugins
The registry system's flexibility allows for easy extension:
- New components can be seamlessly integrated
- Additional validators can be injected
- New behaviors can be introduced without altering the core logic
The Significance of This Approach
The architecture offers several advantages:
- True separation of concerns
- Portability across different frameworks
- Backend-driven UI capabilities
- Potential for low-code development
- Long-term scalability and maintainability
Conclusion
Decoupling goes beyond merely separating files or layers; it involves eliminating direct dependencies between different system components. By employing a registry pattern that introduces controlled indirection at runtime, Formitiva sets itself apart as a unique solution in the landscape of web development.