Live data from Hacker News

What dif­fer­enti­ates front-end frame­works

themer.dev

81–90 of 256 posts

Re: What dif­fer­enti­ates front-end frame­works

#81

Totally disagree with this. Change detection is nothing but a hack to get around the fact that interacting directly with the browser DOM is very slow and blinky. Imagine a world where interacting directly with the browser DOM didn't suck, then none of these libraries would exist. The crux of the problem is that the browser immediately reflects changes to the DOM to the screen. And when you make a bunch of changes to…

> the fact that interacting directly with the browser DOM is very slow and blinky.

This is not really true, or at least hasn't been for many years.

Change detection's primary purpose is to let other code know when something has changed, and what changed. You could theoretically re-render all your DOM based on that information, and in many cases that works much better than people expect. But the DOM is stateful, and truly large trees of 1000s of nodes are too slow to update, so frameworks try to also do minimal DOM updates.

> The crux of the problem is that the browser immediately reflects changes to the DOM to the screen. And when you make a bunch of changes to the DOM you immediately see a bunch of changes happen, with portions of the screen being blanked out, and layout changes happening, and a whole bunch of other nasty stuff happening immediately, which all sucks

This is also not really true. The browser doesn't update the screen until an animation frame. Anything you do synchronously is not rendered to the screen until code yields to the event loop. Even many async things, done on the microtask queue, block the next animation frame giving us visually atomic updates.

Lit, for instance, uses this to get async, batching rendering without unintended partial renders of the screen.

Re: What dif­fer­enti­ates front-end frame­works

#82
post #36

> There are tons of blog posts on the internet about how frameworks differ and which one to pick for your next web project. You can also just not pick one. MDN is my anti-framework.

MDN has a great series of guides on front end frameworks :) https://developer.mozilla.org/en-US/docs/Learn/Tools_and_tes...

Re: What dif­fer­enti­ates front-end frame­works

#83

Totally disagree with this. Change detection is nothing but a hack to get around the fact that interacting directly with the browser DOM is very slow and blinky. Imagine a world where interacting directly with the browser DOM didn't suck, then none of these libraries would exist. The crux of the problem is that the browser immediately reflects changes to the DOM to the screen. And when you make a bunch of changes to…

So what are you disagreeing with? Are you disagreeing that change detection is what mostly diffentiates the front-end frameworks? If so, what is that important factor that differentiates them if not the mechanism that modifies when change is detected? Why do you have such a strong belief that this factor isn't it?

They’re disagreeing with change detection being the most important part of a frontend framework by suggesting that the browser API change dramatically so that we fix the important problem of… change detection in frontend frameworks. Yeah it’s not the most consistent.

Re: What dif­fer­enti­ates front-end frame­works

#84
Unpopular opinion, but I just simply don't care about performance benchmarks between frameworks at all. If thats something you're actually faced with, you should be writing your own perf specific code. The only thing I care about is support. Can I hire people that know this? Is it easy to onboard? Is there a ton of really solid open source plugins and packages compatible with it? Is there an LTS version? These are the only things that really matter day to day.

Re: What dif­fer­enti­ates front-end frame­works

#85

Earlier quoted context omitted.

Really impressive stuff. Seems to have slowed down slightly now that it's on the front page, but blazing fast when I first opened it.

Impressive? This is the default. You have to actively do stuff to make it slower.

You have to actively do stuff to make a house messy, but it can still be impressive when it’s clean.

Re: What dif­fer­enti­ates front-end frame­works

#86

Totally disagree with this. Change detection is nothing but a hack to get around the fact that interacting directly with the browser DOM is very slow and blinky. Imagine a world where interacting directly with the browser DOM didn't suck, then none of these libraries would exist. The crux of the problem is that the browser immediately reflects changes to the DOM to the screen. And when you make a bunch of changes to…

Change detection has nothing to do with the speed of DOM updates, it's about directly encoding dataflow dependencies to avoid code duplication and redundant UI updates. You could paper over the lack of dataflow updates by just updating the whole screen every time, but you still need to preserve various state, like scroll positions, highlighted text, etc. which still means only some state changes and other state does not.

Re: What dif­fer­enti­ates front-end frame­works

#87
post #37

You know what I've always wanted in a front end framework, as a back end developer that sometimes is forced to work on front end tickets? I want a development build mode that generates some kind of project metadata where I can just point to something on the screen and get a report of all the interesting files in the project that are responsible for what I'm seeing: * API calls * Templates * CSS * Controllers, etc. My…

You may be looking for `sourcemap`s, which store a record of the transpilation that has happened and let you work backwards. Your browser's tools should fetch them by default if they're available, but depending on your frontend stack, they may not be generated by default.

Re: What dif­fer­enti­ates front-end frame­works

#88
post #79

Earlier quoted context omitted.

I don't know... even if the DOM was super fast, would it really be ergonomic to keep all your state in the DOM tree and only work with that? I kinda doubt it. So then you'd have to store some state in JS, and some in the DOM, and again you get a syncing problem, since you lost your single source of truth. Or did I misunderstand your comment?

At peak jquery, I argued successfully for storing the metadata on DOM, because then you have a system of record, upon which you can build a straightforward source of truth. React does a ton of work to solve that architectural puzzle another way. The thing I have run into over and over again is that when we try to pretend the system is Y when it is in fact X, inevitably the impedance mismatch results in 1) bugs that s…

> I argued successfully for storing the metadata on DOM

Who did you convince?

Re: What dif­fer­enti­ates front-end frame­works

#89
post #51

Earlier quoted context omitted.

That's not nearly all there is to it. If the DOM was fast and you could control redraws, it would still be horrible. A performant big pile of mud is still a big ball of mud.

For example, there's the way it's still impossible to pass data between native Web Components without stringifying it first.

This is an absolutely stunningly false and ignorant statement. I can't believe it's still being repeated.

Web components are objects and they have properties that can be set. The entire web components community - which includes the developers of apps like Photoshop, Reddit, Chrome, Firefox, and a lot more - passes properties down through trees of web components _all the time_.

Re: What dif­fer­enti­ates front-end frame­works

#90
post #79

Earlier quoted context omitted.

I don't know... even if the DOM was super fast, would it really be ergonomic to keep all your state in the DOM tree and only work with that? I kinda doubt it. So then you'd have to store some state in JS, and some in the DOM, and again you get a syncing problem, since you lost your single source of truth. Or did I misunderstand your comment?

At peak jquery, I argued successfully for storing the metadata on DOM, because then you have a system of record, upon which you can build a straightforward source of truth. React does a ton of work to solve that architectural puzzle another way. The thing I have run into over and over again is that when we try to pretend the system is Y when it is in fact X, inevitably the impedance mismatch results in 1) bugs that s…

Data comes from the server as JSON. Data comes from the user as DOM events and changes. There's always going to be an impedance mismatch.

The DOM API sucks, so React et al went all in with state-as-objects. IMO it was the right call.

Post reply on HN