forked from cadey/xesite
parent
048db0934e
commit
8ec8ce8b59
|
|
@ -0,0 +1,462 @@
|
|||
---
|
||||
title: "Xeact 0.0.69: A Revolutionary Femtoframework For High Efficiency JavaScript Development"
|
||||
date: 2021-11-18
|
||||
tags:
|
||||
- javascript
|
||||
- framework
|
||||
- satire
|
||||
- xeact
|
||||
---
|
||||
|
||||
[Writing JavaScript is so lame. All the tools require me to do so much bullshit
|
||||
to get them to even compile. I shouldn't need to compile JavaScript to
|
||||
JavaScript in order to deploy stuff to a webpage. I don't want to give Facebook
|
||||
a grant to any patents I end up creating. How did it get this bad? I wish there
|
||||
was something easier!](conversation://Cadey/coffee)
|
||||
|
||||
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.
|
||||
|
||||
<noscript>
|
||||
|
||||
[Hey, normally we try to make sure that this blog functions exactly as it would
|
||||
without JavaScript enabled as it does with JavaScript enabled. This is an
|
||||
exception. If you want the interactive parts of this post to work, you will need
|
||||
to allow JavaScript to execute on this page. These examples require <a
|
||||
href="https://caniuse.com/es6-module">ES6 module</a> support, so you may want to
|
||||
try the most up to date version of Chrome, Firefox or
|
||||
Safari.](conversation://Mara/hacker)
|
||||
|
||||
</noscript>
|
||||
|
||||
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](https://github.com/Xe/Xeact)
|
||||
([npm](https://www.npmjs.com/package/@xeserv/xeact)).
|
||||
|
||||
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:
|
||||
|
||||
```html
|
||||
<blockquote id="testimonial">Loading...</blockquote>
|
||||
```
|
||||
|
||||
Then you can import it from either
|
||||
[unpkg](https://unpkg.com/@xeserv/xeact@0.0.69/xeact.js) or a local copy:
|
||||
|
||||
```javascript
|
||||
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);
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
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"
|
||||
]);
|
||||
|
||||
const runTestimonalExample = () => {
|
||||
let i = 0;
|
||||
|
||||
const update = () => {
|
||||
i++;
|
||||
i = i % testimonials.length;
|
||||
g("testimonial").innerText = testimonials[i];
|
||||
};
|
||||
|
||||
update();
|
||||
setInterval(update, 3000);
|
||||
};
|
||||
|
||||
window.runTestimonalExample = runTestimonalExample;
|
||||
</script>
|
||||
|
||||
<blockquote id="testimonial">Loading...</blockquote>
|
||||
|
||||
<button onclick="runTestimonalExample()">Run demo</button>
|
||||
|
||||
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:
|
||||
|
||||
```html
|
||||
<div id="g-example"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
import { g } from "/static/js/xeact.min.js";
|
||||
|
||||
let elem = g("g-example");
|
||||
elem.innerText = elem.innerText + "a";
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
import { g } from "/static/js/xeact.min.js";
|
||||
|
||||
const runGExample = () => {
|
||||
let elem = g("g-example");
|
||||
elem.innerText = elem.innerText + "a";
|
||||
};
|
||||
|
||||
window.runGExample = runGExample;
|
||||
</script>
|
||||
|
||||
<div id="g-example"></div>
|
||||
|
||||
<button onclick="runGExample()">Run demo</button>
|
||||
|
||||
## `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.](conversation://Mara/hacker)
|
||||
|
||||
This actually gets expanded out to HTML that looks like this:
|
||||
|
||||
```html
|
||||
<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:
|
||||
|
||||
```html
|
||||
<div id="exampleConversationRoot">Loading...</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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."));
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
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: message})
|
||||
])
|
||||
]);
|
||||
|
||||
const runHExample = () => {
|
||||
x(g("exampleConversationRoot"));
|
||||
g("exampleConversationRoot").append(mkConversation("Mara", "hacker", "These are some words and I am writing them."));
|
||||
|
||||
g("afterHExample").style = "";
|
||||
}
|
||||
|
||||
window.runHExample = runHExample;
|
||||
</script>
|
||||
|
||||
<div id="exampleConversationRoot">Loading...</div>
|
||||
|
||||
<button onclick="runHExample()">Run demo</button>
|
||||
|
||||
<div id="afterHExample" style="display:none">
|
||||
|
||||
[What...the heck? I didn't write those words! What is going on?](conversation://Mara/wat)
|
||||
|
||||
[Don't worry, it's all part of the plan](conversation://Cadey/enby)
|
||||
|
||||
</div>
|
||||
|
||||
You can use this to create whatever you need to create for your webapps. This
|
||||
was inspired by the [Elm HTML
|
||||
library](https://package.elm-lang.org/packages/elm/html/latest/). 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:
|
||||
|
||||
```html
|
||||
<ul id="exampleXRoot">
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```javascript
|
||||
import { g, h, x } from "/static/js/xeact.min.js";
|
||||
|
||||
const addStuff = () => {
|
||||
g("exampleXRoot").append(h("li", {innerText: "stuff"}));
|
||||
};
|
||||
|
||||
const clearStuff = () => {
|
||||
x(g("exampleXRoot"));
|
||||
};
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
import { g, h, x } from "/static/js/xeact.min.js";
|
||||
|
||||
const addStuff = () => {
|
||||
g("exampleXRoot").append(h("li", {innerText: "stuff"}));
|
||||
};
|
||||
|
||||
const clearStuff = () => {
|
||||
x(g("exampleXRoot"));
|
||||
};
|
||||
|
||||
window.addXStuff = addStuff;
|
||||
window.clearXStuff = clearStuff;
|
||||
</script>
|
||||
|
||||
<ul id="exampleXRoot">
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
<li>stuff</li>
|
||||
</ul>
|
||||
|
||||
<button onclick="addXStuff()">Add</button> <button onclick="clearXStuff()">Clear</button>
|
||||
|
||||
## `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:
|
||||
|
||||
```javascript
|
||||
import { u } from "/static/js/xeact.min.js";
|
||||
|
||||
console.log(u("/blog.json"));
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
import { g, u } from "/static/js/xeact.min.js";
|
||||
|
||||
g("uExampleOne").textContent = u("/blog.json");
|
||||
</script>
|
||||
|
||||
The [JSON Feed](https://www.jsonfeed.org/) for this blog can be found here:
|
||||
<span id="uExampleOne"></span>
|
||||
|
||||
You can chain this into `fetch` like so:
|
||||
|
||||
```html
|
||||
<div id="xeblog-root"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
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);
|
||||
})();
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
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);
|
||||
}
|
||||
|
||||
const uDemo = 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);
|
||||
};
|
||||
|
||||
window.runUExample = uDemo;
|
||||
</script>
|
||||
|
||||
<div id="xeblog-root"></div>
|
||||
|
||||
<button onclick="runUExample()">Run</button>
|
||||
|
||||
## `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.
|
||||
|
||||
```javascript
|
||||
import { r } from "/static/js/xeact.min.js";
|
||||
|
||||
console.log("hi, open your dev console to see me");
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
import { r } from "/static/js/xeact.min.js";
|
||||
|
||||
console.log("hi, open your dev console to see me");
|
||||
</script>
|
||||
|
||||
---
|
||||
|
||||
What kind of awesome things can you create with Xeact? Use the hashtag `#xeact`
|
||||
on Twitter and I'll maybe give you a shoutout!
|
||||
|
|
@ -0,0 +1 @@
|
|||
const h=(e,t={},r=[])=>{let n=Object.assign(document.createElement(e),t);return n.append(...r),n},x=e=>{for(;e.lastChild;)e.removeChild(e.lastChild)},g=e=>document.getElementById(e),c=e=>document.getElementsByClassName(e),s=e=>Array.from(document.querySelectorAll(e)),u=(e="",t={})=>{let r=new URL(e,window.location.href);return Object.entries(t).forEach(e=>{var[t,e]=e;r.searchParams.set(t,e)}),r.toString()},r=e=>window.addEventListener("DOMContentLoaded",e);export{h,x,g,c,u,s,r};
|
||||
Loading…
Reference in New Issue