Strawberry

Zero-dependency, build-free framework for the artisanal web.

Strawberry is a tiny frontend framework that gives you reactivity and composability. It does this with zero-dependencies, without a build step, and it fits in less than 4KB when gzipped.

<!-- Define Components -->
<template name="plum-p">
  <p style="color: plum"><slot /></p>
</template>

<!-- Initialize Strawberry -->
<script>
  const data = sb.init();
</script>

<!-- Use Components -->
<plum-p sb-mark="message">
  A plum colored p element!
</plum-p>

<!-- Dynamically Update Components -->
<script>
  data.message = 'Hello, World!';
</script>

Strawberry is not an alternative to React, Vue, etc. It is an alternative to Vanilla JS. It is meant for simple, long lasting, low maintenance web pages, and tiny web apps.

Basic Setup

For a basic setup, run this command in your terminal:

curl -so- https://raw.githubusercontent.com/18alantom/strawberry/main/setup.sh | bash

This will download and run a shell script that creates a folder with two files, index.html and sb.min.js which consists of a simple "Hello, World!" program using Strawberry.

To verify that setup succeeded, run the created index.html file and check the console for the window.sb object.

The ideal way of using Strawberry is by copying the source code into your project directory as opposed to linking it.

But if you want to use a link, you can :)

Link Setup

To use a link, copy and paste the following script tag at the top of your index.html:

<script src="https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"></script>

Once that is done the window.sb object should be defined.

Here's a toy example using Strawberry. An inventory app in which you can add items, move them in and out of a store, and view the movements.

Click the buttons in the bottom bar to view the different parts of the page.

Head: contains styles and a script to link Strawberry.
Templates: contains templates for inventory list (blue) item and movement item (dark-blue)
Body: contains the markup of the app.
Script: contains Strawberry code, "business logic", click handlers, and demo data.
HTML: contains HTML created by consolidating the other parts. This is used to run the app (and is a readonly view).

Clicking the code will allow you to edit it in a textarea, switching back to "View" will allow you to see your changes.

Why did you make this?

I wanted to write a simple website.

I restrained myself from using the usual frontend frameworks; for my purpose, their murder of dependencies felt like gross computational opulence.

These previously, on annual re-visitation, instead of showing me my website after an innocuous yarn build, have sprawled my terminal with scary red text; portent of wasted hours.

If it ran then. It should've run now.

But as I wrote my website, the need to manually update the UI and redefine components took away from writing the site.

And so it was created after an afternoon JavaScript experiment. A framework for people who just want to write simple websites with a smattering of JavaScript, and without having to build things that probably might not.

Douglas Crockford on the XML of today

These are excerpts from the CoRecursive podcast on JSON vs XML.

It’s probably the JavaScript frameworks. They have gotten so big and so weird. People seem to love them. I don’t understand why.

And on web APIs.

...the browsers have actually gotten pretty good. The web standards thing have finally worked, and the web API is stable pretty much. Some of it’s still pretty stupid, but it works and it’s reliable.

Read the transcript on CoRecursive.