Live data from Hacker News

Learn how modern JavaScript frameworks work by building one

nolanlawson.com

61–70 of 104 posts

Re: Learn how modern JavaScript frameworks work by building one

#61

Earlier quoted context omitted.

You mean, you want React to continue for the rest of human history? Hope not!

Or maybe we could just ditch react and everything like it? Not everyone uses it now, and many large websites are built in simpler ways despite not using ‘modern JavaScript’. Is all this pain and complexity really worth the gain? In practice it often leads to a slower experience for users due to the massive globs of js.

Have a look at this video in Rails’ Turbo 8: https://m.youtube.com/watch?v=hKKycPLN-sk

In a nutshell: we had a 7 year old server side rendered page on our site that shows a chat between two users that was more like email. So you have to refresh to see new messages. We added 2 lines of code to the HTML(!!) and now the page is fully multiplayer so messages come in directly when the other user sends one and you see other things update as they are changed in the database, etc.

2 lines of fucking HTML.

Sure turbo is built in JavaScript, but I have to spend zero time writing any and I get all the benefits in a 7 year old server side rendered page.

Re: Learn how modern JavaScript frameworks work by building one

#63

If anyone is interested in this topic, I would recommend to start from fundamentals, so it would provide some answers on why some "not so modern" frameworks aren't jumping on a "signals" hype-train. - Incremental computing - https://en.wikipedia.org/wiki/Incremental_computing - Self-Adjusting Computation (Umut A. Acar) - https://www.cs.cmu.edu/~rwh/students/acar.pdf - Introducing incremental (JaneStreet) - https://bl…

Besides React, are any of the popular frameworks not on the signals type-train?

What does this use?

https://apprun.js.org/

Re: Learn how modern JavaScript frameworks work by building one

#64
post #23

I like the article, but it gets some things subtly wrong. > To grossly oversimplify things: React assumes that your entire virtual DOM tree needs to be rebuilt from scratch, and the only way to prevent these updates is to implement useMemo Not quite, on a state update, it rebuilds the component that was updated and all of its children. Not the entire virtual DOM; old versions of Angular did this, but it was wasteful.…

The quote quite literally states “grossly oversimplify”. It being “not quite” correct is sort of the aim, for the sake of conveying a broader point.

Re: Learn how modern JavaScript frameworks work by building one

#65

You need a class called ScreenManager, one called Screen, and one called Component. Make Screen and Component able to load an htm file, then hook its tags on the DOM and do whatever you want. Update a counter? Write that in your component. Some static networking class in the background either long-polls or gets pushed new data, dispatches update events that any component can listen to. Each component can make its own…

Sounds like you implemented MVC. Model (=Component) handles its own state. Screen (=View) subscribes to state changes in the model. ScreenManager (=Controller) glues it all together.

It probably works just fine, but gets cumbersome if you want to know exactly where a piece of state is managed or the order of event processing is important for some reason.

Re: Learn how modern JavaScript frameworks work by building one

#67
post #32
post #29

Earlier quoted context omitted.

Author here. Thanks for the thoughtful reply! I did indeed mix up `useMemo` and `React.memo` – fixed it in the post. You're right, I am skipping a lot of details (hence "to grossly oversimplify"). I know that React doesn't invalidate the whole tree, but it does in the worst case. Maybe I should add a note about that. Svelte not being truly reactive makes perfect sense, but in Svelte v5 my understanding is that "runes…

Appreciate the response! You're right on Svelte v5; I just confirmed that Svelte's new runes are indeed reactive: let count = $state(0); function increment() { count += 1; console.log(count + " + 1 = " + countPlusOne); // prints "1 + 1 = 2" } let countPlusOne = $derived(count + 1);

could you explain why this demonstrates svelte is reactive?

What's the definition of reactive is I think my question and having a clear demo is useful - if I understood it it looks a useful piece code

Re: Learn how modern JavaScript frameworks work by building one

#68
post #49
post #40

This is a good article, but I've noticed that the adjective "modern" is used disproportionately more in the world of JavaScript, compared to other tech stacks. Is it more performant, more maintainable, faster to develop, compatible with more devices/platforms? If not, what is the advantage of being modern? That said, I'm a fan of JavaScript and have been writing it since 2001, and many of the backends I write are Nod…

Author here! I struggled with the word "modern" – I could have said "current gen" or "post-React" or even "Solid-inspired" frankly, but I thought "modern" was succinct with the right amount of punchiness. Obviously a lot of these techniques are pretty novel, and maybe they won't stand the test of time. Or maybe a new browser standard will make them obsolete eventually. But for now these seem to be the current wave an…

Perhaps you could have said that it is built using more modern JS APIs - template literals instead of string manipulation, Proxy(), queueMicrotask etc.

Re: Learn how modern JavaScript frameworks work by building one

#69
post #28

Question to the folks with a lot of frontend framework experience: Is there a framework/library that supports the usage of an effect-system when it comes to rendering actions? For instance, in react, a component (or rather it's render-function) has to return the element(s) directly. Is there a framework where the render-function accepts something effect-like or promise-like instead, even if that means that the render…

React now supports this using Suspense boundaries [0]. Some frameworks (eg. NextJS) already ship variants of it but here is some code you could use in React's development version: function MyComponent() { const promise = ...; const result = use(promise); // use is like await // do something } function Wrapper() { return ( }> ); } You don't need to know this to use it, but the implementation is both interesting and ho…

Is a thing in Vue3 also -- https://vuejs.org/guide/built-ins/suspense.html
Post reply on HN