Two-way data-binding and reactivity with 15 lines of JS
HTML-код
- Опубликовано: 8 сен 2024
- One of my talks from the 2023 State of the Browser conference.
Hate the complexity of modern front‑end web development? I teach people a simpler, faster way to build for the web. Get free Daily Developer Tips at gomakethings.com.
I enjoyed this so much. All these years, first time really peaking into "Proxy({...})". Thanks, mentor!
My dude! So great to hear from you!
Very interesting topic! Thanks a lot!
Really interesting! Hadn’t played with Proxies yet, and wasn’t sure of their use. This is brilliant!
Thanks man!
Awesome!
Is there an even easier way to support two way day binding and state management for JavaScript? If not, I’m guessing just importing React library would be easier since other offer API to accomplish the want
I'm not sure in what reality its easier to npm install 30+ mb of JavaScript (and thousands of constantly updating dependencies) and run a build process when you can copy/paste 15 lines of JS and be done with it.
@@gomakethings - The choice of implementing two-way binding using VanillaJS was always there when Angular and React were made, but yet both Google and Facebook built it and millions of applications use it. This solution proposed in the video is not scalable and won't fit API support for several test-cases for Production! Also the dependencies and 30+ MB of packages allow you to scale and write standardized applications. Solutions like these do not!
The video does offer a solution but there are several cases for two-way binding and life cycle methods which control rendering. A production App for an enterprise will require everything and hence React/Angular becomes an important choice. VanillaJS + HTML5 + CSS3 will no doubt continue to evolve but JS frameworks will be ahead of the curve!
@@GameboyZoneRocks Facebook and Google do dumb shit all the time. Them choosing to do something doesn't make it a good thing to do, especially if you're not building apps of that size and reach.
Your "standardization" argument would make a lot more sense if React apps weren't also littered with spaghetti code and multiple different ways to do the same task.
And what do you mean by "allow you to scale" anyways?
@@gomakethings - My conclusion: VanillaJS + HTML5 + CSS3 will no doubt continue to evolve but JS frameworks will always be ahead of the curve! I just hope Angular and React would be there for another decade or two so there will be minimal changes from maintenance standpoint.
Interesting subject ! First time hearing about this API 🙄
Isn't it problematic that the Proxy also sets a value to the form from which the change was just made ? Maybe not but it surprises me that the input emits a new value, then proxy sets it again on the same input after. Would be interested to learn your thoughts?
It might be worth adding an `if (el.value !== val)` check to prevent that from happening, yea.
There's no infinite loop, though, because the value of the field doesn't actually change so no additional Proxy handlers are triggered.
Looks like a kind of native redux am I right?
Yea, that's a great way to think about it!