# rubylouvre/avalon

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rubylouvre-avalon).**

5,774 stars · 1,395 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/RubyLouvre/avalon
- Homepage: http://avalonjs.coding.me/
- awesome-repositories: https://awesome-repositories.com/repository/rubylouvre-avalon.md

## Description

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.

## Tags

### Part of an Awesome List

- [MVVM Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/mvvm-frameworks.md) — A client-side MVVM JavaScript framework that binds model data to DOM elements and automatically updates views when state changes.
- [JavaScript 框架汇总](https://awesome-repositories.com/f/awesome-lists/more/javascript.md) — Listed in the “JavaScript 框架汇总” section of the Awesome Frontend awesome list.

### Data & Databases

- [Model-to-DOM Synchronizations](https://awesome-repositories.com/f/data-databases/data-synchronization-configurations/cloud-storage-sync-triggers/browser-sync-storage/model-to-dom-synchronizations.md) — Syncs a JavaScript model with the DOM so changes in either are reflected in the other automatically. ([source](http://avalonjs.coding.me/))
- [Two-Way Data Binding](https://awesome-repositories.com/f/data-databases/data-synchronization/two-way-data-binding.md) — Syncs a model property with a form element so changes in either side automatically update the other. ([source](https://cdn.jsdelivr.net/gh/rubylouvre/avalon@master/README.md))

### Software Engineering & Architecture

- [UI Component Compositions](https://awesome-repositories.com/f/software-engineering-architecture/modular-program-composition/function-composition/ui-component-compositions.md) — Encapsulates markup, logic, and styles into reusable custom HTML tags that can be nested and composed across pages.
- [Single-Page Navigators](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/page-navigation-prefetching/paging-library-data-loading/sequential-page-navigators/single-page-navigators.md) — Provides hash-based client routing for single-page application navigation without page reloads.

### User Interface & Experience

- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Encapsulates markup, logic, and styles into reusable custom components that can be composed across pages.
- [HTML View Composition](https://awesome-repositories.com/f/user-interface-experience/composition-hierarchies/view-hierarchy-composition/html-view-composition.md) — Builds UI by nesting custom HTML tags that each encapsulate their own template, logic, and scoped styles.
- [Dirty Checking Mechanisms](https://awesome-repositories.com/f/user-interface-experience/data-binding/dirty-checking-mechanisms.md) — Monitors model changes by periodically scanning all bound properties during each event loop tick.
- [Data-to-UI Bindings](https://awesome-repositories.com/f/user-interface-experience/data-to-ui-bindings.md) — Links a JavaScript view-model to DOM elements so changes in either side automatically update the other. ([source](https://cdn.jsdelivr.net/gh/rubylouvre/avalon@master/README.md))
- [Directive-Based View Renderers](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/html-template-renderers/plugin-templated-view-rendering/directive-based-view-renderers.md) — Defines user interfaces using HTML-based templates with directives that control rendering and behavior. ([source](http://avalonjs.coding.me/))
- [Reusable Components](https://awesome-repositories.com/f/user-interface-experience/page-layout-templates/reusable-components.md) — Encapsulates markup, logic, and styles into custom elements that can be composed across pages. ([source](https://cdn.jsdelivr.net/gh/rubylouvre/avalon@master/README.md))
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering.md) — Renders big tables or lists without blocking the browser during page load, avoiding white-screen pauses. ([source](https://cdn.jsdelivr.net/gh/rubylouvre/avalon@master/README.md))
- [Large List Renderers](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering/large-list-renderers.md) — Ships a large list renderer that efficiently displays big tables without blocking the browser during initial page load.
- [Form Input Validation](https://awesome-repositories.com/f/user-interface-experience/form-input-validation.md) — Checks user-entered data against rules and displays feedback before submission. ([source](https://cdn.jsdelivr.net/gh/rubylouvre/avalon@master/README.md))

### Web Development

- [Directive-Based Template Compilers](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/rendering-and-layout-architectures/directive-based-template-compilers.md) — Transforms declarative HTML attributes like ms-repeat and ms-if into executable view instructions via a template directive compiler.
- [DOM Write Batching](https://awesome-repositories.com/f/web-development/dom-write-batching.md) — Ships a batch DOM update queue that collects pending view mutations into a single flush cycle.
- [Virtual DOM Diffing](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation/virtual-dom-diffing.md) — Computes minimal DOM updates by comparing lightweight in-memory view tree snapshots using a virtual DOM diffing engine.
- [Client-side Routing](https://awesome-repositories.com/f/web-development/client-side-routing.md) — Implements a hash-based client-side routing system for mapping URL paths to components in single-page applications.
- [Hash-Based Routing](https://awesome-repositories.com/f/web-development/hash-based-routing.md) — Switches visible views by listening to URL hash changes and mapping them to registered component handlers.

### Testing & Quality Assurance

- [Component-Based Route Definitions](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/e2e-integration-testing/routing-testing/routing-component-testing/component-based-route-definitions.md) — Maps URL paths to components so the application navigates by swapping component instances. ([source](https://cdn.jsdelivr.net/gh/rubylouvre/avalon@master/README.md))