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.
Index
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 | bashOr if you wanna just use it straight away, copy this 👇 script tag in the head of your html file:
<script src="https://unpkg.com/sberry@0.0.0-alpha.1/dist/sb.min.js"></script>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 LOC.
- 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.
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 sb-mark="list" sb-child="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 H1 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>
<script>
const data = sb.init();
</script>
<body>
<user-div sb-mark="user"></user-div>
</body>
<script>
data.user = { name: 'Lin', age: 36 };
</script>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.