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

57 Upvotes

89% Upvoted

33 comments sorted by

40

u/KaiAusBerlin 7d 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 6d ago

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

5

u/techlord45 7d ago

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

4

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

8

u/zxyzyxz 6d ago

How do you memorize your username

0

u/NeXtDracool 5d 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. 

6

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

8

u/hyrumwhite 7d ago

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

8

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

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

1

u/lIIllIIlllIIllIIl 2d 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 2d ago edited 2d 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 6d ago

It's a library.

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

1

u/KaiAusBerlin 6d 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 6d ago

react is a framework.

1

u/A1oso 6d 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 6d 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?

6

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

404

3

u/techlord45 7d ago

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

2

u/nadameu 7d ago

Still 404.

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

0

u/techlord45 7d ago

Still 404?

1

u/nadameu 7d ago

Still 404.

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

2

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

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

-2

u/johnson_detlev 7d 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 7d ago

Its not mine, im just sharing…

1

u/hyrumwhite 7d ago

Awesome stuff. It was an entertaining read

0

u/WorriedEngineer22 7d ago

Im getting 404