mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-29 07:00:16 +02:00
🔤 ⚡ T now uses DocumentFragment
This commit is contained in:
@@ -45,7 +45,7 @@ const references= {
|
||||
export function page({ pkg, info }){
|
||||
const page_id= info.id;
|
||||
return el(simplePage, { info, pkg }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
${el("a", references.todomvc).append("TodoMVC")} is a project that helps developers compare different
|
||||
frameworks by implementing the same todo application. This implementation showcases how dd<el>
|
||||
can be used to build a complete, real-world application with all the expected features of a modern
|
||||
@@ -63,7 +63,7 @@ export function page({ pkg, info }){
|
||||
el("li", t`Component scopes for proper encapsulation`)
|
||||
)
|
||||
),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Below is a fully working TodoMVC implementation. You can interact with it directly in this
|
||||
documentation page. The example demonstrates how dd<el> handles common app development
|
||||
challenges in a clean, maintainable way.
|
||||
@@ -72,7 +72,7 @@ export function page({ pkg, info }){
|
||||
el(example, { src: fileURL("./components/examples/reallife/todomvc.js"), variant: "big", page_id }),
|
||||
|
||||
el(h3, t`Application Architecture Overview`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The TodoMVC implementation is structured around several key components:
|
||||
`),
|
||||
el("div", { className: "function-table" }).append(
|
||||
@@ -96,7 +96,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Reactive State Management with Signals`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The application uses three primary signals to manage state:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -118,7 +118,7 @@ export function page({ pkg, info }){
|
||||
});
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The ${el("code", "todosSignal")} function creates a custom signal with actions for manipulating the todos:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -200,7 +200,7 @@ export function page({ pkg, info }){
|
||||
`, page_id }),
|
||||
|
||||
el("div", { className: "note" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Using ${el("a", references.mdn_storage).append("localStorage")} allows the application to persist todos
|
||||
even when the page is refreshed. The ${el("code", "S.on")} listener ensures todos are saved
|
||||
after every state change, providing automatic persistence without explicit calls.
|
||||
@@ -208,7 +208,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Integration of Signals and Reactive UI`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The implementation demonstrates a clean integration between signal state and reactive UI:
|
||||
`),
|
||||
|
||||
@@ -233,7 +233,7 @@ export function page({ pkg, info }){
|
||||
)
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The derived signal automatically recalculates whenever either the todos list or the current filter changes,
|
||||
ensuring the UI always shows the correct filtered todos.
|
||||
`),
|
||||
@@ -268,7 +268,7 @@ export function page({ pkg, info }){
|
||||
}
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The TodoItem component maintains its own local UI state with signals, providing immediate
|
||||
UI feedback while still communicating changes to the parent via events.
|
||||
`),
|
||||
@@ -289,14 +289,14 @@ export function page({ pkg, info }){
|
||||
`, page_id }),
|
||||
|
||||
el("div", { className: "tip" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Binding signals directly to element properties creates a reactive UI that automatically updates
|
||||
when state changes, without the need for explicit DOM manipulation or virtual DOM diffing.
|
||||
`)
|
||||
),
|
||||
|
||||
el(h3, t`Performance Optimization with Memoization`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The implementation uses ${el("code", "memo")} to optimize performance in several key areas:
|
||||
`),
|
||||
|
||||
@@ -309,7 +309,7 @@ export function page({ pkg, info }){
|
||||
)
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
This approach ensures that:
|
||||
`),
|
||||
el("ul").append(
|
||||
@@ -329,14 +329,14 @@ export function page({ pkg, info }){
|
||||
))
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
By memoizing based on the todos length, the entire footer component is only re-rendered
|
||||
when todos are added or removed, not when their properties change. This improves performance
|
||||
by avoiding unnecessary DOM operations.
|
||||
`),
|
||||
|
||||
el("div", { className: "tip" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Memoization is especially important for UI elements that are expensive to render or that contain
|
||||
many child elements. The ${el("code", "memo")} function allows precise control over when components
|
||||
should re-render, avoiding the overhead of virtual DOM diffing algorithms.
|
||||
@@ -344,13 +344,13 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Component-Based Architecture with Events`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The TodoMVC implementation demonstrates a clean component architecture with custom events
|
||||
for communication between components:
|
||||
`),
|
||||
|
||||
el("h4", t`1. Main Component Event Handling`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The main Todos component sets up event listeners to handle actions from child components:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -360,7 +360,7 @@ export function page({ pkg, info }){
|
||||
`, page_id }),
|
||||
|
||||
el("h4", t`2. The TodoItem Component with Scopes and Local State`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Each todo item is rendered by the TodoItem component that uses scopes, local signals, and custom events:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -403,7 +403,7 @@ export function page({ pkg, info }){
|
||||
`, page_id }),
|
||||
|
||||
el("div", { className: "tip" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Using ${el("code", "scope")} and ${el("a", references.mdn_events).append("custom events")}
|
||||
creates a clean separation of concerns. Each TodoItem component dispatches events up to the parent
|
||||
without directly manipulating the application state, following a unidirectional data flow pattern.
|
||||
@@ -411,7 +411,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Improved DOM Updates with classList`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The implementation uses the reactive ${el("code", "classList")} property for efficient class updates:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -423,7 +423,7 @@ export function page({ pkg, info }){
|
||||
);
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Benefits of using ${el("code", "classList")}:
|
||||
`),
|
||||
el("ul").append(
|
||||
@@ -434,7 +434,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Improved Focus Management`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The implementation uses a dedicated function for managing focus in edit inputs:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -462,7 +462,7 @@ export function page({ pkg, info }){
|
||||
}, onBlurEdit, onKeyDown, addFocus)
|
||||
`, page_id }),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
This approach offers several advantages:
|
||||
`),
|
||||
el("ul").append(
|
||||
@@ -473,7 +473,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el("div", { className: "note" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Using ${el("a", references.mdn_raf).append("requestAnimationFrame")} ensures that the focus operation
|
||||
happens after the browser has finished rendering the DOM changes, which is more reliable than
|
||||
using setTimeout.
|
||||
@@ -481,7 +481,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Efficient Conditional Rendering`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The implementation uses signals for efficient conditional rendering:
|
||||
`),
|
||||
|
||||
@@ -520,7 +520,7 @@ export function page({ pkg, info }){
|
||||
`, page_id }),
|
||||
|
||||
el("div", { className: "note" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Unlike frameworks that use a virtual DOM, dd<el> directly updates only the specific DOM elements
|
||||
that need to change. This approach is often more efficient for small to medium-sized applications,
|
||||
especially when combined with strategic memoization.
|
||||
@@ -528,7 +528,7 @@ export function page({ pkg, info }){
|
||||
),
|
||||
|
||||
el(h3, t`Type Safety with JSDoc Comments`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
The implementation uses comprehensive JSDoc comments to provide type safety without requiring TypeScript:
|
||||
`),
|
||||
el(code, { content: `
|
||||
@@ -566,7 +566,7 @@ export function page({ pkg, info }){
|
||||
`, page_id }),
|
||||
|
||||
el("div", { className: "tip" }).append(
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
Using JSDoc comments provides many of the benefits of TypeScript (autocomplete, type checking,
|
||||
documentation) while maintaining pure JavaScript code. This approach works well with modern
|
||||
IDEs that support JSDoc type inference.
|
||||
@@ -575,41 +575,41 @@ export function page({ pkg, info }){
|
||||
|
||||
el(h3, t`Best Practices Demonstrated`),
|
||||
el("ol").append(
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Component Composition:")} Breaking the UI into focused, reusable components
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Performance Optimization:")} Strategic memoization to minimize DOM operations
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Reactive State Management:")} Using signals with derived computations
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Event-Based Communication:")} Using custom events for component communication
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Local Component State:")} Maintaining UI state within components for better encapsulation
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Declarative Class Management:")} Using the classList property for cleaner class handling
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Focus Management:")} Reliable input focus with requestAnimationFrame
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Persistent Storage:")} Automatically saving application state with signal listeners
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Type Safety:")} Using comprehensive JSDoc comments for type checking and documentation
|
||||
`),
|
||||
el("li").append(...T`
|
||||
el("li").append(T`
|
||||
${el("strong", "Composable Event Handlers:")} Attaching multiple event handlers to elements
|
||||
`)
|
||||
),
|
||||
|
||||
el("div", { className: "callout" }).append(
|
||||
el("h4", t`Key Takeaways`),
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
This TodoMVC implementation showcases the strengths of dd<el> for building real-world applications:
|
||||
`),
|
||||
el("ul").append(
|
||||
@@ -622,7 +622,7 @@ export function page({ pkg, info }){
|
||||
)
|
||||
),
|
||||
|
||||
el("p").append(...T`
|
||||
el("p").append(T`
|
||||
You can find the ${el("a", references.github_example).append("complete source code")} for this example on GitHub.
|
||||
Feel free to use it as a reference for your own projects or as a starting point for more complex applications.
|
||||
`),
|
||||
|
||||
Reference in New Issue
Block a user