https://github.com/8tentaculos/rasti
Rasti is a minimalistic JavaScript library for building user interfaces.
https://github.com/8tentaculos/rasti
backbonejs component es6 javascript javascript-library lightweight minimalistic mvc ui
Last synced: 3 months ago
JSON representation
Rasti is a minimalistic JavaScript library for building user interfaces.
- Host: GitHub
- URL: https://github.com/8tentaculos/rasti
- Owner: 8tentaculos
- License: mit
- Created: 2018-08-08T20:22:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-28T21:39:57.000Z (9 months ago)
- Last Synced: 2024-09-28T21:55:24.713Z (9 months ago)
- Topics: backbonejs, component, es6, javascript, javascript-library, lightweight, minimalistic, mvc, ui
- Language: JavaScript
- Homepage: http://rasti.js.org
- Size: 1.13 MB
- Stars: 24
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
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.
[](https://app.travis-ci.com/8tentaculos/rasti)
[](https://www.npmjs.com/package/rasti)
[](https://unpkg.com/rasti/dist/rasti.min.js)
[](https://www.npmjs.com/package/rasti)
[](https://www.jsdelivr.com/package/npm/rasti)
## 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
### Installing via npm
```bash
$ npm install rasti
```
```javascript
import { Model, Component } from 'rasti';
```
### Using ES modules
```javascript
import { Model, Component } from 'https://esm.run/rasti';
```
### Using a `` tag
```html
<script src="https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js">
```
```javascript
const { Model, Component } = Rasti;
```
### Create a `Component`
```javascript
// Define a Timer component that displays the number of seconds from the model.
const Timer = Component.create`
Seconds: ${({ model }) => model.seconds}
`;
// Create a model to store the seconds.
const model = new Model({ seconds: 0 });
// Mount the Timer component to the body and pass the model as an option.
Timer.mount({ model }, document.body);
// Increment the `seconds` property of the model every second.
setInterval(() => model.seconds++, 1000);
```
[Try it on CodePen](https://codepen.io/8tentaculos/pen/gOQxaOE?editors=0010)
### Adding sub components
```javascript
// Define the routes for the navigation menu.
const routes = [
{ label: 'Home', href: '#' },
{ label: 'Faq', href: '#faq' },
{ label: 'Contact', href: '#contact' },
];
// Create a Link component for navigation items.
const Link = Component.create`
${({ options }) => options.renderChildren()}
`;
// Create a Navigation component that renders Link components for each route.
const Navigation = Component.create`
${({ options, partial }) => options.routes.map(
({ label, href }) => partial`<${Link} href="${href}">${label}${Link}>`
)}
`;
// Create a Main component that includes the Navigation and displays the current route's label as the title.
const Main = Component.create`
<${Navigation} routes=${({ options }) => options.routes} />
${({ model, options }) => options.routes.find(
({ href }) => href === (model.location || '#')
).label}
`;
// Initialize a model to store the current location.
const model = new Model({ location: document.location.hash });
// Update the model's location state when the browser's history changes.
window.addEventListener('popstate', () => model.location = document.location.hash);
// Mount the Main component to the body, passing the routes and model as options.
Main.mount({ routes, model }, document.body);
```
[Try it on CodePen](https://codepen.io/8tentaculos/pen/dyBMNbq?editors=0010)
## Why Choose **Rasti**?
**Rasti** is built for developers who want a simple yet powerful way to create UI components without the complexity of heavy frameworks. Whether you're prototyping, building a high-performance dashboard, or modernizing a **Backbone.js** app, **Rasti** lets you:
- **Skip the Setup**
No installations, no build tools—just load it and start coding.
- **Lightweight and Efficient**
Minimal footprint with optimized performance, ensuring smooth updates.
- **Upgrade Legacy Code Without a Rewrite**
Incrementally enhance **Backbone.js** views while keeping existing functionality.
## Example
You can find a sample **TODO application** in the [example folder](https://github.com/8tentaculos/rasti/tree/master/example/todo) of the **Rasti** [GitHub repository](https://github.com/8tentaculos/rasti). This example serves as a great starting point for your own projects. Try it live [here](https://rasti.js.org/example/todo/index.html).
## API Documentation
For detailed information on how to use **Rasti**, refer to the [API documentation](/docs/api.md).
## Powered by **Rasti**
### [Crypto Babylon](https://cryptobabylon.net)
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](https://pacman.js.org)
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](LICENSE).
## Contributing
Contributions are welcome! Share feature ideas or report bugs on our [GitHub Issues page](https://github.com/8tentaculos/rasti/issues).