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

Website · How it works · Docs

Warning

Strawberry is in an experimental phase. Everything stated below works, but I am still figuring out the quickest and cleanest ways of doing things.

---

Seriously, another frontend framework?

Yes, but, Strawberry is not like the usual frontend-framework.

It doesn't have any dependencies. It doesn't need a build-step to run. It's tiny, less than 3KB when gzipped. Yet it does a lot of the core things the big, spangly frameworks can do.

<!-- 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>

Here's a live example from the website.

---

Index

Installation · Features · Examples · Development

Docs · Roadmap

Documentation Index

1. Installation: explains how to pull Strawberry code into your web project.
2. Getting Started: describes a simple example with code walk through.
3. Reactivity: explains what is reactivity in Strawberry.
   1. Reactive Values: explains keys and values of the reactive object.
   2. Mark (sb-mark): explains how to mark an element to update along with data.
   3. Conditionals (sb-if, sb-ifnot): explains how to render or hide an element when data changes to truthy or falsy.
   4. Computed: explains how to define reactive values that depend on other reactive values.
   5. Directives: explains how to extend Strawberry with custom directives.
4. Composability (to be added)
5. API: lists all of Strawberry's defined directives and methods.

Installation

If you wanna try it out, then run this 👇 command to setup a simple starter page.

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

Or if you wanna just use it straight away, copy this 👇 script tag in the head of your html file:

<script src="https://unpkg.com/[email protected]/dist/sb.min.js"></script>

Features

Here're are a few of its features:

1. Reactivity: change your data and the UI updates.
2. Composability: create and use components.
3. Build-free: doesn't require a build-step. Link or copy the lib and you're ready to go.
4. Zero Dependencies: has no dependencies. Uses WebAPIs for everything.
5. Tiny: source code is under 1000 CLOC.
6. No VDOM: directly updates the DOM.

Strawberry is and will be developed with these two hard constraints:

1. Zero dependencies.
2. No build step required to run it.

Other than this, there is also a soft constraint of keeping the source code light.

---

Examples

Here are a couple of simple examples of a few things that Strawberry can do right now.

1. Basic Reactivity: innerText is updated when data.message when is set.

<p sb-mark="message">Placeholder</p>

<script>
  data.message = 'Hello, Strawberry!';
</script>

2. Computed Values: innerText is updated with the computed value data.countMessage when data.count is updated.

<p sb-mark="countMessage">Placeholder</p>

<script>
  data.count = 0;
  data.countMessage = () => `The count is: ${data.count}`;

  data.count += 1;
</script>

3. Conditional Rendering: p is rendered only when data.sayHi is true.

<template sb-if="sayHi">
  <p>Hi!</p>
</template>

<script>
  data.sayHi = true;
</script>

4. Looping: ul is populated with li when data.list is set. innerText of the li are set from the list items.

<ul>
  <li sb-mark="list.#"></li>
</ul>

<script>
  data.list = ['Strawberry', 'Mulberry', 'Raspberry'];
</script>

5. Templates: On running sb.register, the red-p element is defined and can be used.

<template name="red-p">
  <p style="color: red"><slot /></p>
</template>

<red-p>Hi!</red-p>

5. External Templates: Templates can be defined in external files. They are loaded and registered using sb.load.

<script>
  sb.load('./templates.html');
</script>

<red-p>Hi!</red-p>

6. Nested Templates: Templates can be nested, named slots can be used to

<!-- Blue H1 Template -->
<template name="blue-h1">
  <h1 style="color: blue"><slot></slot></h1>
</template>

<!-- Red P Template -->
<template name="red-p">
  <p style="color: red"><slot></slot></p>
</template>

<!-- Div Template using the above two -->
<template name="user-div">
  <div>
    <blue-h1>
      <slot name="name" />
    </blue-h1>
    <red-p>
      <slot name="age" />
    </red-p>
  </div>
</template>

<body>
  <user-div>
    <span slot="name" sb-mark="user.name"></span>
    <span slot="age" sb-mark="user.age"></span>
  </user-div>
</body>

<script>
  data.user = { name: 'Lin', age: 36 };
</script>

---

Development

The development of Strawberry does has a direction, but no deadlines as I work on this usually during the weekends.

Here's a road map. This isn't exactly a road map, but a list of problems and maybe their solutions that need to be implemented to further Strawberry.

Running Dev Mode

Strawberry has only two dev dependencies: esbuild and typescript.

To run Strawberry in dev mode:

# Clone the repo
git clone https://github.com/18alantom/strawberry

# Install esbuild and typescript
cd strawberry
yarn install

# Run in Dev mode
yarn dev

You can now create an HTML file in the repository and add script:src to link the generated index.js file. You can serve this using the Live Preview plugin.

To view the rendered HTML you need to serve it locally for that you can use the Live Preview VSCode plugin, or run this:

# Cd into strawberry root
cd strawberry

# Run simple python server to serve files in strawberry
python -m http.server 8080 --bind 127.0.0.1

Tests

Right now tests just involve linking strawberry to an html file (test.*.html), and calling the test function to check whether a value is as expected. Success and Failures are printed in the console.

See test.html for an example.

To see all tests in one place, open test/index.html.

Website

The website has two dependencies required to run, sb.min.js and highlight.min.js for running strawberry in the example and highlighting all the code.

You can run the pubwebsite.sh script which downloads these files:

./pubwebsite.sh

And then respond with "n" when it asks to publish:

$ Publish the website? [y/n]: n
$ /Users/you/Desktop/projects/strawberry

After the script has run, website/index.html should render as expected.

---

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.