14 KiB
| title | date | tags | ||||
|---|---|---|---|---|---|---|
| Xeact 0.0.69: A Revolutionary Femtoframework For High Efficiency JavaScript Development | 2021-11-18 |
|
Is this you? Have you wished for something like this? Your prayers have been answered! Keep reading this post to learn more about this revolutionary set of tools that let you scale up and down as you need to.
At Xeserv we strive to make solid advances forward that allow you to keep your focus on what matters: your life and more importantly your production applications. As a part of this mission, we have created a groundbreaking, revolutionary femtoframework called Xeact (npm).
Xeact is a high performance, developer-efficient and overall ballin' femtoframework for productive development in Javascript. It will take everything that is complicated about frontend web development and throw it in the trash.
Don't trust this random webpage? You don't have to! Let's see it in action with some testimonials that were collected from committed users of this amazing framework:
<blockquote id="testimonial">Loading...</blockquote>
Then you can import it from either unpkg or a local copy:
import { g } from "/static/js/xeact.min.js";
const shuf = (arr) => {
var rand, temp, i;
for (i = arr.length - 1; i > 0; i -= 1) {
rand = Math.floor((i + 1) * Math.random());
temp = arr[rand];
arr[rand] = arr[i];
arr[i] = temp;
}
return arr;
};
const testimonials = shuf([
"It Works™",
"It shouldn't crash until the heat death of the universe",
"A necessary addition to your tech stack",
"Completely revolutionized our deployment cycle",
"Our engineering team was blown away; versatile, powerful, constantly updated. It's everything we wanted and more",
"Daunting at first, but works right out of the box, with great documentation and amazing support",
"With a small footprint and big impact, this is a definite game changer",
"Something something kill child before killing parent joke",
"Made with Rust",
"Reliable, Secure, Good performance, Easy to use UI/UX, High throughput",
"It doesn't stalk me as much as the competitors!",
"this software created synergy i didn't think was possible",
"easy to use and it respects your privacy",
"this software's cloud backend has only been hacked twice this year",
"please, they have my wife and kids; i want to see them again",
"The third best femtoframework available on the market"
]);
let i = 0;
const update = () => {
i++;
i = i % testimonials.length;
g("testimonial").innerText = testimonials[i];
};
update();
setInterval(update, 3000);
Loading...
Run demo
And this is only the tip of the iceberg. Xeact is a poweruser's dream. It makes it utterly trivial to compose more complicated things out of the same basic tools that you have for free in the browser. Each of the main functions will be covered in detail below:
g - gets an element by ID
The most basic function is g, g lets you get an HTML element out of the DOM
so you can manipulate it, much like we did in the above testimonial example (no,
there is no way to stop it).
Usage is simple:
<div id="g-example"></div>
import { g } from "/static/js/xeact.min.js";
let elem = g("g-example");
elem.innerText = elem.innerText + "a";
Run demo
h - creates an HTML element
Just getting HTML elements by themselves isn't that useful outside of very simple cases. Sometimes you need to create new HTML elements to munge them back into the DOM. Let's say you want to create a replica of this Mara conversation blurb:
These are some words and I am writing them.
This actually gets expanded out to HTML that looks like this:
<div class="conversation">
<div class="conversation-picture conversation-smol">
<picture>
<source srcset="https://cdn.christine.website/file/christine-static/stickers/mara/hacker.avif" type="image/avif">
<source srcset="https://cdn.christine.website/file/christine-static/stickers/mara/hacker.webp" type="image/webp">
<img src="https://cdn.christine.website/file/christine-static/stickers/mara/hacker.png" alt="Mara is hacker">
</picture>
</div>
<div class="conversation-chat"><<b>Mara</b>> These are some words and I am writing them.</div>
</div>
HTML is a kind of a tree internally, so the h function lets you build element
trees:
<div id="exampleConversationRoot">Loading...</div>
import { g, h, x } from "/static/js/xeact.min.js";
const mkConversation = (who, mood, message) =>
h("div", {className: "conversation"}, [
h("div", {className: "conversation-picture conversation-smol"}, [
h("picture", {}, [
h("source", {type: "image/avif", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.avif`}),
h("source", {type: "image/webp", srcset: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.webp`}),
h("img", {alt: `${who} is ${mood}`, src: `https://cdn.christine.website/file/christine-static/stickers/${who.toLowerCase()}/${mood}.png`})
])
]),
h("div", {className: "conversation-chat"}, [
h("span", {innerText: "<"}),
h("b", {innerText: who}),
h("span", {innerText: "> "}),
h("span", {innerText: msg})
])
]);
// clear out #exampleConversationRoot
x(g("exampleConversationRoot"));
g("exampleConversationRoot")
.append(mkConversation("Mara", "hacker", "These are some words and I am writing them."));
Run demo
You can use this to create whatever you need to create for your webapps. This was inspired by the Elm HTML library. I may end up making a companion library with common elements as an addon to Xeact that will be distributed separately.
x - remove all children of an element
This allows you to remove everything from an element so you can recreate it anew. You should use this right before you add new things to an element to flip the page on refresh:
<ul id="exampleXRoot">
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
import { g, h, x } from "/static/js/xeact.min.js";
const addStuff = () => {
g("exampleXRoot").append(h("li", {innerText: "stuff"}));
};
const clearStuff = () => {
x(g("exampleXRoot"));
};
- stuff
- stuff
- stuff
- stuff
- stuff
Add Clear
u - build relative/absolute URLs
A common task in frontend code is to make HTTP requests to the server where
you can write the code in a real language. u lets you build those URLs
quickly:
import { u } from "/static/js/xeact.min.js";
console.log(u("/blog.json"));
The JSON Feed for this blog can be found here:
You can chain this into fetch like so:
<div id="xeblog-root"></div>
import { g, h, u, x } from "/static/js/xeact.min.js";
const div = (data = {}, children = []) => h("div", data, children);
const ahref = (to, text) => h("a", {href: to, innerText: text});
const h3 = (text, attrs = {}) => {
attrs["innerText"] = text;
return h("h3", attrs);
}
(async () => {
let resp = await fetch(u("/blog.json"));
if (!resp.ok) {
throw new Error(`/blog.json status ${resp.status}`);
}
let feed = await resp.json();
let root = g("xeblog-root");
let content = div({}, [
h3(feed.title),
h("ul", {}, feed.items.map(item => h("li", {}, [ahref(item.url, item.title)])))
]);
x(root);
root.append(content);
})();
Run
r - run a function once when the page is ready
r lets you defer execution of a function until everything in the page has
loaded. This is situationally useful and is difficult to demo.
import { r } from "/static/js/xeact.min.js";
console.log("hi, open your dev console to see me");
What kind of awesome things can you create with Xeact? Use the hashtag #xeact
on Twitter and I'll maybe give you a shoutout!