Introduction · Rasti

Introduction · 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 dom events handling to define UI components.
Rasti is inspired by the Backbone.js architecture. It can be considered as an ES6 subset of Backbone.js for modern browsers.
It's ideal for building simple lightweight applications, without the need of configuration 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.

Getting started

Using npm

$ npm install --save rasti

import { Model, View } from 'rasti';

Using native modules

import { Model, View } from 'https://unpkg.com/rasti/es';

Using <script> tag

<script src="https://unpkg.com/rasti/dist/rasti.min.js"></script>

const { Model, View } = Rasti;

A simple View

class Timer 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 `Seconds: <span>${model.seconds}</span>`;
    }
}
// Render view and append view's element into body.
document.body.appendChild(new Timer().render().el);

Try it on CodePen

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.
The UMD builds make Rasti available as a window.Rasti global variable.

Example

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

Complete API documentation.

License

MIT