jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-21 15:39:36 +01:00
Code Packages Releases Activity

🔤 3PS

Browse Source
This commit is contained in:
Jan Andrle 2024-06-03 16:20:42 +02:00
parent 57fb9512ee
commit 97f8c2eed3
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
7 changed files with 60 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/index.html
View File

File diff suppressed because one or more lines are too long

2
docs/p04-signals.html
View File

@ -4,7 +4,7 @@ S===signal
/** @type {ddeSignal} */
/** @type {ddeAction} */
/** @type {ddeActions} */
</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the&nbsp;three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the&nbsp;signal value changes. Similarly, in a&nbsp;remaining part (γ), we can update the&nbsp;signal value. </p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "./esm-with-signals.js";
</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Let’s re-introduce <a href="./#h-event-driven-programming--parts-separation--ps">3PS principle</a>.</p><p>Using signals, we split program logic into the&nbsp;three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the&nbsp;signal value changes. Similarly, in a&nbsp;remaining part (γ), we can update the&nbsp;signal value. </p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "./esm-with-signals.js";
// α — `signal` represents a&nbsp;reactive value
const signal= S(0);
// β — just reacts on signal changes

1
docs_src/components/examples/introducing/3ps.js
View File

@ -1,3 +1,4 @@
// pseudo code!
const onchage=
event=>
console.log("Reacting to the:", event); // A

8
docs_src/components/examples/introducing/helloWorld.js
View File

@ -1,15 +1,15 @@
import { el } from "deka-dom-el";
import { S } from "deka-dom-el/signals";
const clicks= S(0);
const clicks= S(0); // A
document.body.append(
el().append(
el("p", S(()=>
"Hello World "+"🎉".repeat(clicks())
"Hello World "+"🎉".repeat(clicks()) // B
)),
el("button", {
type: "button",
onclick: ()=> clicks(clicks()+1),
textContent: "Fire"
onclick: ()=> clicks(clicks()+1), // C
textContent: "Fire",
})
)
);

48
docs_src/index.html.js
View File

@ -13,6 +13,14 @@ 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 }){
@ -25,29 +33,27 @@ export function page({ pkg, info }){
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.
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`),
);
}

4
docs_src/p04-signals.html.js
View File

@ -51,6 +51,10 @@ export function page({ pkg, info }){
el(code, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
el(h3, t`Introducing signals`),
el("p").append(...T`
Let’s re-introduce
${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}.
`),
el("p").append(...T`
Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant)
representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value

30
docs_src/p06-customElement.html.js
View File

@ -1,6 +1,7 @@
import { T, t } from "./utils/index.js";
export const info= {
title: "Custom elements",
description: "Using custom elements in combinantion with DDE",
title: t`Custom elements`,
description: t`Using custom elements in combinantion with DDE`,
};
import { el } from "deka-dom-el";
@ -14,12 +15,12 @@ const fileURL= url=> new URL(url, import.meta.url);
const references= {
/** Custom Elements on MDN */
custom_elements: {
title: "MDN documentation page for Custom Elements",
title: t`MDN documentation page for Custom Elements`,
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements",
},
/** Custom Elements tips from WebReflection */
custom_elements_tips: {
title: "Ideas and tips from WebReflection",
title: t`Ideas and tips from WebReflection`,
href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4",
}
};
@ -27,20 +28,19 @@ const references= {
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("h2", "Using custom elements in combinantion with DDE"),
el("p").append(
),
el("h2", t`Using custom elements in combinantion with DDE`),
el("p").append(...T`
`),
el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
el(h3, "Custom Elements Introduction"),
el("p").append(
el("a", { textContent: "Using custom elements", ...references.custom_elements })
),
el(h3, t`Custom Elements Introduction`),
el("p").append(...T`
${el("a", { textContent: t`Using custom elements`, ...references.custom_elements })}
`),
el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
el("p").append(
el("a", { textContent: "Handy Custom Elements' Patterns", ...references.custom_elements_tips })
),
el("p").append(...T`
${el("a", { textContent: t`Handy Custom Elements' Patterns`, ...references.custom_elements_tips })}
`),
el(mnemonic)
);