rasviitanen / allotize Goto Github PK

Automatic Infrastructure from Code

Recent developments have made Infrastructure as Code very popular, as it's declarative and expressive. However, typical Infrastructure as Code still defines your infrastructure in a separate system, which requires you to still set up integrations. Allotize insteads attempts to let your application define the infrastrucutre through dependency inference. This allows you to quickly implement complex applications with dynamic content without having to think about infrastructure - only client side code.

Web Page | Demo | Book

_{Built with 🦀🕸 by the Allotize Team}

import { useAllotize } from "allotize-js"

export function Counter() {
    const [state, setState] = useAllotize({
        route: `store#counter`,
        data: {
            count: 0,
        },
    });

    const increment = () => {
        setState({
            count: state.count + 1,
        });
    };

    return (
        <button onClick={increment} />
    );
}

Allotize is a system for creating collaborative and dynamic web apps without traditional server infrastructure. The project is composed of two major modules, a database and a P2P networking solution.

The database is optimized to run in edge environments and replicates freely between nodes using conflict-free strategies.

To make development as frictionless as possible, the system handles JS-values directly and establishes proxies to them. This enables you do to things such as: votes += 1, but where mutations propagates to all connected users instead of just locally via the proxy. i.e. you write regular JavaScript, but operations can replicate remotely if you connect your variables/objects/items to Allotize

📚 Read the tutorial! 📚

This tutorial is designed for kickstarting your first Allotize app.

Here is an example of Allotize in action! As users can act as hosts, you could serve this as a static file, yet allow your app to show real-time changes. You don't need complex frameworks either, here is an example with regular JavaScript:

const upvotes = document.getElementById("upvotes");
const downvote = document.getElementById("downvote");
const upvote = document.getElementById("upvote");

const votes = Allotize.Data({
    route: "cube/votes",

    data: {
        upvotes: 0,
    },

    onChange: (old, new) => {
        upvotes.innerHTML = new.upvotes;
    },
});

upvote.onclick = () => {
    votes.data.upvotes += 1;
};

downvote.onclick = () => {
    votes.data.upvotes -= 1;
};