This is why JavaScript proxies are important

preview_player
Показать описание
Sharing how proxies work and also how I used it to wrap a react state object

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

Рекомендации по теме
Комментарии
Автор

This guy is skyrocketing my knowledge in software engineering…

chizidotdev
Автор

As far as I'm aware, every JS framework uses proxies to a lesser or greater extent. I use them in the projects I work on frequently as well. They are convenient basically for the simple reason that you can listen to changes, you can validate data, you can send update requests to a backend or localStorage/sessionStorage, etc. It's an incredibly powerful tool.

CottidaeSEA
Автор

"I don't know man.." "I was talking about..." "and then I went on a rant..."

My life on 3 sentences.

joaomendoncayt
Автор

Immutable code has been consistently easier for me to work with and test across the board at scale, especially if you're dealing with any kind of concurrency. The benefits for me have been far from small and pretty much the only times I bother with mutable approaches is when there are specific performance considerations I need to contend with. I actually started with mostly mutable code professionally, but got tired of tracking down side effects across the application and worrying about breaking something if I changed a value. For me, there's no real going back to preferring mutable code except for certain edge cases.

baka_baca
Автор

in React everything is a state, useState and UseReducer are asynchronous.Other state changing is synchronous. You can take advantage of that.With proxy you can accumulate data without any render, use this fresh data in event handlers for example and rerender when your condition is satisfied.

EddiMOffical
Автор

Vue 3 uses Proxy for reactive object ex: const reactiveData = reactive({ foo: "bar"});
When dealing with plain refs ex: const foo = ref("bar"), Vue 3 uses object getters and setters.

Vue 2 used only getters and setters due to browser support limitations at the time.

BeliCsGROM
Автор

What extension shows the TS errors inline?
EDIT: never mind, just found it in the description. Error lens

TheProcessor
Автор

Have you looked into valtio? It's a state management library that is front end/framework agnostic. Also uses the proxy pattern to get and set state like this.

Cliffordthe
Автор

I am having a very hard time trying to recreate your app without the MVC approach… I am stuck and the MVC approach is so hard for me to understand and follow.

thark
Автор

Immutable code is easier/safer to work with, especially with concurrency; however, there is a tradeoff.
Using spread operator (ie: copying) everywhere means your program will likely be memory-hungry, and AFAIK your garbage collector will be stopping your program more often to clean up

jly_dev
Автор

I think part of the issue with React is that the immutability is so on the nose. For example setState; why is it designed in a way where you have to return copies every time when that's already what it's supposed to do? Why does it not already give you a value copy of the current state that you can modify and return? It's just a bunch of busywork.

CottidaeSEA
Автор

You should check valtio state management, since were talking about proxy. Valtio use proxy behind the scene

hut_fire
Автор

It's true that immutable data helps prevent bugs, but the benefit is very small. It's not as big of a benefit as it is touted to be. I think the bigger driving force behind React choosing to use immutable state is because companies like FB collect advanced analytics from it. I imagine that is very valuable data for them. For the average developer, this probably isn't something we will ever use. So it is kind of funny that the majority of react devs are doing this extra busy work for a benefit they we don't even use.

jjfattz
Автор

Honestly I've come to feel that the frontend framework choice has way less of an impact than the other decisions of the app. For all the shit it gets, react is pretty great, I'd take it over the chaos of JQuery any day. I work out of react because I love remix right now, I can imagine switching over to solid / preact eventually, probably not svelte because I'm not a huge fan of compiler magic-ey things.

JonathanHigger
Автор

Mutable code bugs are so hard to find, i seriously advise viewers to not start mutating objects after after watching this. Thanks for the proxy info though.

g-luu
Автор

you can actually implement reactivity without using javascript variable to store elements states, elements has or is already a state

kuhaniresti
Автор

Very good on proxies. Please, never do this in prod. React is immutable by design, better use util libraries for better usability

rayetzki
Автор

so tl dr?
(I have my attention span f up)

alejomakevids
Автор

Code has to mutate sooner or later. The only constant in life is change. The main thing is to be in control of the changes.

mervinmarias
Автор

You inspire me to write better code lol

spiridonov