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.
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
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;
};