WebArray
by
Jikku Jose
in
jikkujose.in

Abstractions that fit our minds like jigsaws are fun to play with. While building tools, I have often felt state management at the backend is needlessly complicated especially for very small tasks. Say, a list management or a counter or even a simple email form.

It’s not about the difficulty, but these complicated database setups can drain the joy from building an idea in just a few hours. Especially with ChatGPT, we can now give life to an idea that we have been thinking about in practically no time. So, I wanted to build a tool that speeds up managing small states a breeze.

A web store with granular access control. Free. Anonymous. Available everywhere.

Ruby Demo

Ruby Demo

Quick Start

Open a browser console & follow along:

Import library

import("https://cdn.toolbomber.com/js/WebArray.min.js")

Generate keys

const keys = await WebArray.generateKeys("USE_YOUR_SEED")

Create instance by passing keys

const wa = new WebArray(keys)

Note: You can skip any of the read, append or replace keys to restrict the instance from doing the corresponding action.

Append

await wa.append("Mango")

Read

console.log(await wa.read())

Replace

await wa.replace('Bye!')

Features

Use cases

Apps

Examples

Shortest Backendless Code

Full frontend and backend app in 11 lines of readable code!

Edit it live in CodePen

<script src="https://cdn.toolbomber.com/js/WebArray.min.js"></script>
<script type="module">
  const fruits = await WebArray.create("fruits")
  document.querySelector("table").innerHTML += (await fruits.read())
    .map(f => `<tr><td>${f.name}</td><td>${f.updatedAt}</td></tr>`)
    .join("")
</script>

<table>
  <tr><th>Fruit</th><th>Unix Time</th></tr>
</table>

Access Control

WebArray instances requires the read, append or replace keys to do the specific actions. To prevent a specific action, initialize WebArray using the keys object excluding the corresponding access key.

Try creating the keys locally, save the seed and use the specific keys required in the page.

WebArray.generateKeys(seed)

For instance keys can be independently created and used to initialise the client for fine grained access control.

const keys = await WebArray.generateKeys("YOUR_UNIQUE_KEY")

delete keys.append
delete keys.replace

const readOnlyClient = new WebArray(keys)

Design Goal

I hope WebArray will be used by folks to test ideas on the fly. It certainly won’t scale, but thats not the point. The trade-off here is rapid prototyping, as WebArray eliminates 90% of the overhead in setting up a data store, allowing you to get your idea off the ground in just a few hours.

ChatGPT + WebArray = 💥

Checkout how a single prompt can generate a fully functional todo app with zero edits.

Note