ReDOM

ReDOM is a compact and efficient UI framework designed for modern web applications. Written in TypeScript, it draws inspiration from React and Vue to provide a streamlined approach to building dynamic interfaces. With its focus on performance and simplicity, ReDOM empowers developers to create responsive and interactive applications with ease.

Project Features

• Declarative Component System: Simplifies the process of defining UI components, making code more readable and maintainable.

• Fine-Grained Reactivity System: Similar to Vue, this feature ensures efficient UI updates in response to data changes, enhancing performance.

• Hooks Integration: Facilitates state management and side effects handling, promoting reusable logic and cleaner code structures.

• Fragments: Allows grouping of multiple elements without adding extra nodes to the DOM, offering flexible component design.

• Asynchronous Rendering: Ensures smooth user interactions by allowing non-blocking UI updates, improving application responsiveness.

• ES6 Class Components and XML Templates: Combines modern ES6 class structures with XML-like templates for expressive component definitions.

• Virtual DOM: Leverages a virtual DOM for efficient rendering and updates, reducing direct manipulation of the actual DOM for better performance.

Quick links:

• Documentation,
• ReDOM

Example

Here is a short example to illustrate interactive components:

const { Component, useState, mount, xml } = "@devsolux/redom";

class Counter extends Component {
  static template = xml`
    <button t-on-click="() => state.value = state.value + props.increment">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
}

class Root extends Component {
  static template = xml`
    <span>Hello ReDOM</span>
    <Counter increment="2"/>`;

  static components = { Counter };
}

mount(Root, document.body);

Note that the counter component is made reactive with the useState hook. Also, all examples here uses the xml helper to define inline templates. But this is not mandatory, many applications will load templates separately.

More interesting examples can be found on the playground application.

Documentation

Tutorial

Are you new to ReDOM? This is the place to start!

• Tutorial: create a TodoList application
• How to start an ReDOM project
• How to test Components

Reference

• Overview
• App
• Component
• Component Lifecycle
• Concurrency Model
• Dev mode
• Dynamic sub components
• Environment
• Error Handling
• Event Handling
• Form Input Bindings
• Fragments
• Hooks
• Loading Templates
• Mounting a component
• Portal
• Precompiling templates
• Props
• Props Validation
• Reactivity
• Rendering SVG
• Refs
• Slots
• Sub components
• Sub templates
• Templates (XmlTemplateEngine)
• Translations
• Utils

Other Topics

• Notes On ReDOM Architecture
• Comparison with React/Vue
• Notes on compiled templates
• ReDOM devtools extension

Installing ReDOM

ReDOM is available on npm and can be installed with the following command:

npm install @devsolux/redom

If you want to use a simple <script> tag, the last release can be downloaded here:

• redom

Installing ReDOM DevTools

The ReDOM DevTools browser extension can be found in the latest release. To install:

Chrome

1. Go to your Chrome extensions panel, enable developer mode, and click on Load unpacked.
2. Select the devtools-chrome folder to activate the extension.
3. Use the refresh button on the extension card (in the admin panel) to update your code if needed.
4. If you encounter issues, you may need to remove and reload the extension completely.

Firefox

1. Navigate to about:debugging#/runtime/this-firefox and click Load Temporary Add-on....
2. Select any file in the devtools-firefox folder to activate the extension.
3. Use the reload button to refresh the extension.

Note: You might need to open a new window or reload your tab to see the extension in action. The extension will only work on pages with a compatible version of ReDOM.