Introduction

Blade is a React framework for building highly dynamic web applications.

Applications built with Blade are fast across all vectors: The first load is instant, while interactions are instant too.

By following the principles of edge compute, Blade meets your users where they are, instead of making them come to you. Your application and the data of your users are pushed as close as possible to them, instead of requiring them retrieve it.

In practice, this means that loading animations of any form (spinners, skeletons, etc) are avoided, ensuring the snappiest and thereby most joyful experience for end users, similar to how a native app feels.

The core of Blade is its query syntax, which allows for instantly reading and writing data.

It combines common data querying patterns of web apps into a syntax that is more powerful than SQL, by making it possible to express complex operations with less code, resulting in a more effective tool for web apps.

In its simplest form, reading a list of records would look like this:

const records = use.accounts();

While writing a record looks like this:

const { add } = useMutation();

add.account.with.handle('test');

This lets you focus on the user experience of your application instead of adding REST APIs, data state management libraries, React server functions, or similar.

Blade manages the state of your data for you. Any mutation you apply is instantly reflected across all read queries, and propagated to other clients in the background.

In general, just like with the data model described above, the majority of programmatic API of Blade revolves around the concept of Hooks:

• use: Read data
• useMutation: Write data
• useLocation: Mimics window.location
• useNavigator: Mimics window.navigator
• useRedirect: Change the page
• useCookie: Read and write cookies
• useJWT: Read JSON Web Tokens
• useParams: Read dynamic path segments
• usePopulatePathname: Populate dynamic path segments
• usePagination: Get the next/previous page of records
• usePaginationBuffer: Concatenate paginated lists

To get started with RONIN after signing up, first define a model and apply it to your database.

Next, to query your RONIN database, start by creating a new App (such as “Website”) in the “Apps” section of your space on the dashboard (left sidebar), which will provide you with a token.

After that, install the RONIN client on your project:

npm install ronin

Once the package is installed, make sure to define a RONIN_TOKEN environment variable on your project that contains the App Token you've created on the dashboard. The RONIN client will automatically make use of this environment variable to authenticate your queries (you can alternatively pass the token using config).

Lastly, you can then start sending queries to your RONIN database:

import { add } from 'ronin';

await add.account.with({
    name: 'Elaine Jones',
    handle: 'elaine',
});

In the example above, we're adding a new record for the "account" model. Depending on the models you've added to your database, make sure to replace "account" with the slug of the model you've added. Additionally, the fields must match the fields you've defined on your respective model.

That's it! You can now start using RONIN to build your application!

Next up, we recommend learning more about the RONIN query syntax, which allows you to construct the ideal database queries for your project.

Feel free to join our Discord community if you have any questions or need help getting started. The RONIN team would be happy to guide you in realtime.