RubyLouvre/avalon
Avalon
Avalon is a client-side MVVM JavaScript framework that binds model data to DOM elements and automatically updates views when state changes. It functions as a component-based UI framework, encapsulating markup, logic, and styles into reusable custom components that can be composed across pages, while also serving as a virtual DOM diffing engine that computes minimal DOM updates by comparing lightweight in-memory view tree snapshots.
The framework distinguishes itself through a template directive compiler that transforms declarative HTML attributes like ms-repeat and ms-if into executable view instructions, combined with a dirty-checking data binding approach that monitors model changes by periodically scanning bound properties during each event loop tick. It includes a hash-based client routing system for single-page applications, a batch DOM update queue that collects pending view mutations into a single flush cycle, and a large list renderer that efficiently displays big tables or lists without blocking the browser during initial page load.
Avalon supports two-way data binding between models and form elements, form input validation with feedback, and declarative view rendering through HTML-based templates. It provides component-based route mapping for single-page application navigation without page reloads, and enables building and composing reusable components that can be nested across pages.
