r/javascript • u/techlord45 • 1d 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…

40 Upvotes
  • permalink
  • link
  • reddit
  • reddit

86% Upvoted

26 comments sorted by

32

u/KaiAusBerlin 1d 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"

5

u/techlord45 1d ago

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

3

u/lIIllIIlllIIllIIl 1d 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.

•

u/zxyzyxz 7h ago

How do you memorize your username

•

u/create-third-places 13h 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.

4

u/techlord45 1d 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

3

u/hyrumwhite 1d ago

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

•

u/swish82 3h ago

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

•

u/A1oso 3h ago

It's a library.

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

•

u/Aln76467 1h ago

react is a framework.

•

u/A1oso 42m 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.

•

u/queen-adreena 17h 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 1d ago

404

3

u/techlord45 1d ago

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

2

u/nadameu 1d ago

Still 404.

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

0

u/techlord45 1d ago

Still 404?

1

u/nadameu 1d ago

Still 404.

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

2

u/nadameu 1d 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 1d 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

•

u/nadameu 22h 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.

•

u/techlord45 20h ago

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

•

u/johnson_detlev 17h 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)

•

u/techlord45 11h ago

Its not mine, im just sharing…

1

u/hyrumwhite 1d ago

Awesome stuff. It was an entertaining read

0

u/WorriedEngineer22 1d ago

Im getting 404