mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-22 07:49:38 +01:00
54 lines
2.6 KiB
JavaScript
54 lines
2.6 KiB
JavaScript
import { t, T } from "./utils/index.js";
|
||
export const info= {
|
||
href: "./",
|
||
title: t`Introduction`,
|
||
description: t`Introducing a library.`,
|
||
};
|
||
|
||
import { el } from "deka-dom-el";
|
||
import { simplePage } from "./layout/simplePage.html.js";
|
||
import { h3 } from "./components/pageUtils.html.js";
|
||
import { example } from "./components/example.html.js";
|
||
import { code } from "./components/code.html.js";
|
||
/** @param {string} url */
|
||
const fileURL= url=> new URL(url, import.meta.url);
|
||
const references= {
|
||
};
|
||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||
export function page({ pkg, info }){
|
||
const page_id= info.id;
|
||
return el(simplePage, { info, pkg }).append(
|
||
el("p", t`The library tries to provide pure JavaScript tool(s) to create reactive interfaces using …`),
|
||
el(h3, t`Event-driven programming (3 parts separation ≡ 3PS)`),
|
||
el("p").append(t`
|
||
Let's introduce the basic principle on which the library is built. We'll use the JavaScript listener as
|
||
a starting point.
|
||
`),
|
||
el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
|
||
el("p").append(t`
|
||
As we can see, in the code at location “A” we define how to react when the function is called with
|
||
any event as an argument. At that moment, we don't care who/why/how the function was called. Similarly,
|
||
at point “B”, we reference to a function to be called on the event without caring what the function will
|
||
do at that time. Finally, at point “C”, we tell the application that a change has occurred, in the input,
|
||
and we don't care if/how someone is listening for the event.
|
||
`),
|
||
|
||
el("p").append(...T`
|
||
We start with creating and modifying a static elements and end up with UI templates.
|
||
${el("em").append(...T`From ${el("code", "document.createElement")} to ${el("code", "el")}.`)}.
|
||
Then we go through the native events system and the way to include it declaratively in UI templates.
|
||
${el("em").append(...T`From ${el("code", "element.addEventListener")} to ${el("code", "on")}.`)}
|
||
`),
|
||
el("p").append(...T`
|
||
Next step is providing interactivity not only for our UI templates.
|
||
We introduce signals (${el("code", "S")}) and how them incorporate to UI templates.
|
||
`),
|
||
el("p").append(...T`
|
||
Now we will clarify how the signals are incorporated into our templates with regard to application
|
||
performance. This is not the only reason the library uses ${el("code", "scope")}s. We will look at
|
||
how they work in components represented in JavaScript by functions.
|
||
`),
|
||
el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }),
|
||
);
|
||
}
|