Rasti

Rasti is a minimalistic JavaScript MV library for building user interfaces.
It gives structure to applications by providing models that emit events on properties changes, and views with declarative event handling to define UI components.
Rasti is inspired by Backbone. You can consider it as an ES6 subset of Backbone with no dependencies.
It's ideal for building simple lightweight applications, without the need of config or boilerplate. Projects where a resulting small codebase is prioritized over using a complex rendering system.
The project is hosted on GitHub, and it's available for use under the MIT software license.
You can report bugs and discuss features on the GitHub issues page.

build status npm version npm downloads

Getting started

Using npm

$ npm install --save rasti
import { Model, View } from 'rasti';

Using <script> tag

<script src="https://unpkg.com/rasti/dist/rasti.min.js"></script>
const { Model, View } = Rasti;

A simple View

class ElapsedTime extends View {
    constructor(options) {
        super(options);
        // Create model to store internal state. Set `seconds` attribute into 0.
        this.model = new Model({ seconds : 0 });
        // Listen to changes in model `seconds` attribute and re render.
        this.model.on('change:seconds', this.render.bind(this));
        // Increment model `seconds` attribute every 1000 milliseconds.
        this.interval = setInterval(() => this.model.seconds++, 1000);
    }

    template(model) {
        return `Elapsed seconds: <span>${model.seconds}</span>`;
    }

    onDestroy() {
        // Stop listening events on model.
        this.model.off();
        // Clear timeout interval.
        clearInterval(this.interval);
    }
}
// Append view element into DOM.
document.body.appendChild(new ElapsedTime().render().el);

The rasti npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments.
For example, you can drop a UMD build as a <script> tag on the page, or tell Bower to install it. The UMD builds make Rasti available as a window.Rasti global variable.

Example

The rasti GitHub repository includes, in the example folder, a vanila js and a webpack versions of a Todo app that can be used as starter project.

API

Complete API documentation.

License

MIT

Rasti

Minimalistic JavaScript MV library for building user interfaces.

Rasti Info

⭐ Stars 21
🔗 Homepage rasti.js.org
🔗 Source Code github.com
🕒 Last Update a year ago
🕒 Created 4 years ago
🐞 Open Issues 5
➗ Star-Issue Ratio 4
😎 Author 8tentaculos