Warning
Strawberry is in a very experimental phase; pre-alpha. 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.
Installation
If you wanna try it out, then run this
curl -so- https://raw.githubusercontent.com/18alantom/strawberry/main/setup.sh | bashOr if you wanna just use it straight away, copy this
<script src="https://unpkg.com/[email protected]/dist/sb.min.js"></script>Features
Here're are a few of its features:
- Reactivity: change your data and the UI updates.
- Composability: create and use components.
- Build-free: doesn't require a build-step. Link or copy the lib and you're ready to go.
- Zero Dependencies: has no dependencies. Uses WebAPIs for everything.
- Tiny: source code is under 1000 CLOC.
- No VDOM: directly updates the DOM.
Strawberry is and will be developed with these two hard constraints:
- Zero dependencies.
- 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 devYou 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.1Tests
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.shAnd then respond with "n" when it asks to publish:
$ Publish the website? [y/n]: n
$ /Users/you/Desktop/projects/strawberryAfter 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.