Modern MVC for building user interfaces

Rasti is a lightweight MVC library for building fast, reactive user interfaces. Inspired by Backbone.js, it retains a familiar API while removing non-essential features and introducing modern, declarative, and composable components to simplify complex UI development.

Key Features

• 🌟 Declarative Components: Build dynamic UI components using intuitive template literals.
• 🎯 Event Delegation: Simplify event handling with built-in delegation.
• 🔗 Model-View Binding: Keep your UI and data in sync with ease.
• 🌐 Server-Side Rendering: Render as plain text for server-side use or static builds.
• ⚡ Lightweight and Fast: Minimal overhead with efficient rendering.
• 🕰️ Legacy Compatibility: Seamlessly integrates into existing Backbone.js projects.
• 📐 Standards-Based: Built on modern web standards, no tooling required.

Getting Started

Using npm

$ npm install rasti

import { Model, Component } from 'rasti';

Using ES modules

import { Model, Component } from 'https://esm.run/rasti';

Using <script> tag

<script src="https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js"></script>

const { Model, Component } = Rasti;

A simple Component

// Create Timer component.
const Timer = Component.create`
    <div>
        Seconds: <span>${({ model }) => model.seconds}</span>
    </div>
`;
// Create model to store seconds.
const model = new Model({ seconds: 0 });
// Mount timer on body.
Timer.mount({ model }, document.body);
// Increment `model.seconds` every second.
setInterval(() => model.seconds++, 1000);

Try it on CodePen

Adding sub components

// Create Button component.
const Button = Component.create`
    <button
        onClick="${{ '&' : function() { this.options.onClick() } }}"
    >
        ${({ options }) => options.label}
    </button>
`;
// Create Counter component.
const Counter = Component.create`
    <div>
        ${({ model }) => Button.mount({ label : '-', onClick : () => model.count-- })}
        <span>${({ model }) => model.count}</span>
        ${({ model }) => Button.mount({ label : '+', onClick : () => model.count++ })}
    </div>
`;
// Create model to store count.
const model = new Model({ count: 0 });
// Mount counter on body.
Counter.mount({ model }, document.body);

Try it on CodePen

Why Choose Rasti?

• Small Projects: Perfect for lightweight apps, free from unnecessary overhead or tooling.
• Efficient Rendering: Ideal for rendering large dynamic tables or datasets without requiring virtual scrolling.
• Legacy Maintenance: Modernize your Backbone.js views gradually, allowing for incremental updates without the need for a complete rewrite.

Example

The rasti GitHub repository includes, in the example folder, an example TODO application that can be used as starter project.

API

Complete API documentation.

⚠️ Important Note

Rasti, like many Backbone.js applications, uses innerHTML for rendering views and components. This approach provides speed and flexibility but requires you to ensure that all passed data is trusted or properly sanitized.

If the data comes from user input or external sources, sanitize it before rendering to avoid potential security risks.

For more details on data sanitization, refer to OWASP's XSS Prevention Cheat Sheet.

Powered by Rasti

Crypto Babylon

A market analytics platform efficiently rendering over 300 dynamic rows, updated in real-time with thousands of messages per second via multiple WebSocket connections.

jsPacman

A DOM-based remake of the classic Ms. Pac-Man game. Rasti powers its custom game engine.

License

Rasti is open-source and available under the MIT License.

Contributing

Contributions are welcome! Share feature ideas or report bugs on our GitHub Issues page.