Login

Recent searches

No recent searches

Search options

Only available when logged in.
social.coop is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Fediverse instance for people interested in cooperative and collective projects. If you are interested in joining our community, please apply at https://join.social.coop/registration-form.html.

Administered by:

Server stats:

492
active users

social.coop: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.4

#reactiveui

0 posts0 participants0 posts today
Public
Jan Andrle

“Vanilla JavaScript for flavouring, a full-fledged feast for large projects.”

Meet dd<el> – the Vanilla JavaScript library for building reactive UIs with syntax close to native DOM! No build step required, just native DOM with superpowers. ✨ #ReactiveUI based on signals and events.

- NPM: npmjs.com/package/deka-dom-el
- GitHub: github.com/jaandrle/deka-dom-e (use star if u like it)
- Docs & examples: jaandrle.github.io/deka-dom-el

// Simple Hello World with reactive elements import { el } from "deka-dom-el"; import { S } from "deka-dom-el/signals"; function HelloWorld() { // Create a count signal with an initial value of 0 const count = S(0); // Create UI that automatically updates when signals change return el().append( el("h2", S(() => `Hello World ${count.get()} times!`)), // Update state on button click el("button", { textContent: "Increment", onclick: () => count.set(count.get() + 1) }), ); } // Add to the page document.body.append( el(HelloWorld), );
// (Derived) signals import { el } from "deka-dom-el"; import { S } from "deka-dom-el/signals"; // Create a signal and a derived computation const count = S(0); const doubled = S(() => count.get() * 2); const isEven = S(() => count.get() % 2 === 0); document.body.append( // Dynamic text content that updates automatically el("p", { textContent: S(() => `Count: ${count.get()}`) }), el("p", { textContent: S(() => `Doubled: ${doubled.get()}`) }), // Conditional elements based on signal state S.el(isEven, even => even ? el("p", "Even number!") : el("p", "Odd number!") ), // Simple button to update state el("button", { textContent: "+1", onclick: () => count.set(count.get() + 1) }) );
// Event Handling and Delegation import { el, on, scope, dispatchEvent } from "deka-dom-el"; function TodoItem({ textContent, onDelete }) { const { host }= scope; const dispatchEdit = dispatchEvent("todo:edit", host); // Lifecycle events (for example for cleanup) host( on.disconnected(() => { }), ); return el("li").append( // <= host element el("span", { textContent }), el("button", "Edit", on("click", () => dispatchEdit("edited"))), el("button", "Delete", on("click", () => onDelete())), ); } // Using the component with event handlers document.body.append( el("ul").append( el(TodoItem, { textContent: "Learn dd<el>", onDelete: () => confirm("Are you sure?") }, on("todo:edit", text => alert(`Editing: ${text}`)) ), ) );
#WebDev#JavaScript#TypeScript
Public *
Yoh Deadfall

Friday, what a wonderful day! The day when another work week comes to an end, and the day when I wrote my first ever article, so now you have something to spend the weekend on reading about #dotnet, #reactiveui, #avaloniaui, and properties because it's all about them!

github.com/YohDeadfall/YohDead

Without @oskardudycz and @thephd that work wouldn't be done at the level where it's now. Thank you for helping me in polishing it and suggesting improvements!

GitHubYohDeadfall.github.io/posts/2024-02-16-it-is-all-about-properties.md at main · YohDeadfall/YohDeadfall.github.ioContribute to YohDeadfall/YohDeadfall.github.io development by creating an account on GitHub.
Public
Peter Toft Jølving

I have the feeling that reactive programming in general and Reactive Extensions and ReactiveUI in particular can be incredibly powerful tools.

But the learning curve. 😱 I'm definitely doing something wrong, but I don't know what, and all my usual techniques fail me.

What's your best resources for newcomers to Rx.Net, ReactiveUI and similar?
Ideally it should focus not so much on the mechanics (I can read the docs), but rather how to reason about stuff and how to debug it.

#dotnet#ReactiveUI
ExploreLive feeds
About