mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-25 17:49:37 +01:00
63 lines
2.7 KiB
JavaScript
63 lines
2.7 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= {
|
||
w_mvv:{
|
||
title: t`Wikipedia: Model–view–viewmodel`,
|
||
href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel",
|
||
},
|
||
w_mvc: {
|
||
title: t`Wikipedia: Model–view–controller`,
|
||
href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller",
|
||
},
|
||
};
|
||
/** @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 ${el("em", t`how to react`)} when the function
|
||
is called with any event as an argument. At that moment, we ${el("em", t`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
|
||
${el("em", t`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 ${el("em", t`don't care if/how someone`)}
|
||
is listening for the event.
|
||
`),
|
||
el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }),
|
||
el("p").append(...T`
|
||
The library introduces a new “type” of variable/constant called ${el("em", t`signal`)} allowing us to
|
||
to use introduced 3PS pattern in our applications. As you can see it in the example above.
|
||
`),
|
||
el("p").append(...T`
|
||
Also please notice that there is very similar 3PS pattern used for separate creation of UI and
|
||
business logic.
|
||
`),
|
||
el("p").append(...T`
|
||
The 3PS is very simplified definition of the pattern. There are more deep/academic definitions more precisely
|
||
describe usage in specific situations, see for example ${el("a", { textContent: t`MVVM`, ...references.w_mvv })}
|
||
or ${el("a", { textContent: t`MVC`, ...references.w_mvc })}.
|
||
`),
|
||
|
||
el(h3, t`Organization of the documentation`),
|
||
);
|
||
}
|