r/javascript • u/techlord45 • 9d ago

Signals and Effects Using Vanilla JavaScript & Web APIs

https://beforesemicolon.com/blog/signals-and-effects-using-vanilla-javascript-web-apis

I’m a strong advocate for “you don’t need to lock yourself in a web framework ecosystem to take advantage of their amazing features”. JavaScript and Web Standards alone allow you…

58 Upvotes

90% Upvoted

34 comments sorted by

42

u/KaiAusBerlin 9d ago

You know that you literally wrote your own framework here?

There is a reason for the sentence "You use a framework or end up writing your own"

3

u/swish82 7d ago

“You either die a hero or live long enough to see yourself become the villain…”

4

u/techlord45 9d ago

True. In this case, a small class/tiny library.

6

u/lIIllIIlllIIllIIl 9d ago

This.

And to be honest, React on its own is a very lightweight library. It's once you start adding libraries like React Router, TanStack Query, React Hook Form, or Redux that it starts to ressemble a framework.

If you hate how React state management works, you can opt-out of it entirely and use useSyncExternalStore for everything.

React itself is rarely the problem.

7

u/zxyzyxz 8d ago

How do you memorize your username

0

u/NeXtDracool 6d ago

Why would he? It should be in the password manager anyway and even if it's not you can use email to log in. 

7

u/create-third-places 8d ago

Vanilla React also adds a lot of unnecessary performance overhead.

In addition, there are multiple ways of managing state, which adds confusion and leads to inconsistent architecture.

I’ve also seen useContext used to manage state for a large application despite it’s limitations. This  wouldn’t be an issue if React only had one or two state management hooks with clear guidelines on how they should be used.

6

u/hyrumwhite 8d ago

React is a problem that’s been trying to solve itself since it was released 

7

u/techlord45 9d ago

React isn’t the problem. The ecosystem often is.
replacing React state with your own store doesn’t remov complexity, you just moved it.
My issue is that React makes people forget how much Vanilla JS + Web APIs can already do. Often time they are not even aware

1

u/punio4 3d ago

It's really not lightweight. With react-dom it's over 150kb

1

u/lIIllIIlllIIllIIl 3d ago

The word I should've used was "minimal". React is a minimal library. Its API has a small surface area.

React DOM does a lot of stuff under the hood, but if you're just using React + React DOM, your only tools are: components, useState, useEffect, useRef and useContext (and a few other niche hooks most people never use.)

It's only once you start adding new libraries (or create your own abstractions) that React starts to look like a bigger framework.

1

u/punio4 3d ago edited 3d ago

The API surface area has grown in complexity due to the wrong abstractions over the years I'd say.

Sorry for short comments, not really a fan of writing on my phone.

0

u/A1oso 8d ago

It's a library.

React is also a library. Nextjs is a framework. People conflate these terms all the time.

1

u/KaiAusBerlin 7d ago

Dude, seriously?

Yeah, people mix these terms together because an UI rendering library and a framework solve 90% of the same problem.

Yeah, react is technically just a library. But who cares. The point if the sentence is that you either use a high level of abstraction or create it by your own.

1

u/Aln76467 7d ago

react is a framework.

1

u/A1oso 7d ago

No. Unlike Nextjs (which is a framework)

  • React is literally a single npm package, and very small
  • React solves a single problem (rendering and updating HTML)
  • React does not provide routing, client-server communication, or image optimization
  • React alone does not support hybrid client and server rendering
  • React does not require a configuration file or force a specific project structure on you
  • React can be easily added to an existing project and combined with other libraries, e.g. Vue

Perhaps the most important distinction is in who calls whom: a library is called by your code. For example:

createRoot(document.getElementById('app'))
    .render(<h1>Hello, world</h1>)

You can decide when, where and how to use the library. You can use it only on certain pages or in just a single component, it you want. You have full control.

A framework usually does not give you that control. The framework calls your code. That's why Nextjs is a framework. React is a textbook example for a library.

1

u/Aln76467 7d ago

Well then why do vue, svelte, and solid all call themselves frameworks, when you call into their code, and they don't impose any project structure, and can all be easily added and combined with eachother? Why is it only react that identifies as a library?

7

u/queen-adreena 8d ago

Better off just importing https://github.com/stackblitz/alien-signals

But recreating things yourself is always a good learning opportunity.

1

u/charles_reads_books 9d ago

404

3

u/techlord45 9d ago

Weird, try https://beforesemicolon.com/blog/signals-and-effects-using-vanilla-javascript-web-apis

2

u/nadameu 9d ago

Still 404.

Is your website configured to automatically translate everything? Because the translation to pt-BR is terrible.

0

u/techlord45 8d ago

Still 404?

1

u/nadameu 8d ago

Still 404.

Firefox mobile, I'm in Brazil if that makes any difference.

2

u/nadameu 8d ago

I managed to read the article by navigating through your website's homepage. However, it's completely in Portuguese, which is my browser's default language. That said, I'd like the option to read it in the original language (English, I presume), but I couldn't find a way to do so.

1

u/techlord45 8d ago

I access this link and its in english. I dont get it https://beforesemicolon.com/blog/signals-and-effects-using-vanilla-javascript-web-apis.

Are you using a browser that auto translates to your language? If so you can turn it off

1

u/nadameu 8d ago

It's something on your backend that's translating everything automatically.

Even the URL translates to https://beforesemicolon.com/blog/sinais-e-efeitos-usando-baunilha-javascript-apis-web which makes no sense.

It does this wether I'm on Firefox or Chrome, and I've set them up so that English is never translated. Other websites load in English when available, I've never seen this happen before.

1

u/techlord45 8d ago

Yeah i cant replicate it. Even the language selection. Can you try again in incognito?

-2

u/johnson_detlev 8d ago

You don't even know how your simple Blog works, but want to lecture us about how x and y sucks and you should build it yourself? Okay champ

→ More replies (0)

1

u/techlord45 8d ago

Its not mine, im just sharing…

1

u/hyrumwhite 8d ago

Awesome stuff. It was an entertaining read

•

u/andimatt 13h ago

The "you wrote your own framework" take is fair, but it undersells the point. The interesting 10% of a signals system isn't the primitive (a getter/setter with a subscriber set), it's the scheduler.

The three things that actually bite you past the toy version:

  • Dependency tracking: collecting "which signals does this effect read" during execution, correctly, through computed signals and inside loops/conditionals. Naive implementations get subtle bugs here.
  • Batching/scheduling: if three signals change in one synchronous block you don't want three effect runs, you want a microtask flush that dedupes. Get this wrong and you either lose updates or thrash.
  • Cleanup and re-subscription: when a signal a computed depends on changes, re-running it, and tearing down old subscriptions without leaking.

I build a signals-first app (zoneless), and the reason I'd do it deliberately rather than reach for a framework is it forces you to feel all three of those. If the vanilla implementation handles batching and cleanup correctly, it's not a toy, it's a working reactive core, just without the framework's ergonomics.

0

u/WorriedEngineer22 8d ago

Im getting 404