Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn how modern JavaScript frameworks work by building one

nolanlawson.com

Post reply on HN
Print view View original

31–40 of 104 posts

Re: Learn how modern JavaScript frameworks work by building one

#31

Post by 698969 »

mhh__ wrote: post #22
xrd wrote: post #16

I really love Svelte. The compiler is great and very extensible. For example, you can easily add functions to the processing pipeline to process Svelte templates (or the script elements or style sections) in your own special way. It's a fantastic way to build JavaScript frameworks. Svelte people always note Svelte isn't a framework, so this isn't a framework on top of another framework! I used this to build Svekyll,…

I also like svelte but as a compiler-y person who happens to be doing some JS I can't work out why I'm annotating so much stuff by hand (even with svelte 5). I can get why you might want this for react, but isn't svelte a compiler? Can't we do dataflow analysis? I'm 50% convinced there's a Chesterton's fence I'm mising but where?

You can only do so many compiler-y things in a dynamically typed language like Javascript. And even less of it within the context of a single file, unless you implement a bundler (web jargon equivalent of linker). Otherwise by the time the run-of-the-mill bundler is done connecting parts of your component tree into a single file, so much of the high-level information of the component is lost that you can't really do much analysis on it.

At least that were the reasons I saw when I was thinking about the same. If anyone has ideas around it, please get in touch.

Re: Learn how modern JavaScript frameworks work by building one

#32

Post by n2d4 »

nolanl wrote: post #29
n2d4 wrote: 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.…

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);

Re: Learn how modern JavaScript frameworks work by building one

#35

Post by valenterry »

n2d4 wrote: post #28
valenterry wrote: post #27

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…

Thank you, this is exactly what I meant! Awesome that this is already being worked on in react.

Yeah, the implementation under the hood seems a bit crazy. Reminds me of how I found out that angular used to call toString on functions to get the parameter names for dependency injection.

But honestly, if I can use it without problems as a user, that's what I care most, even if the backend developer in me is horrified about it, haha. But I guess that is mostly Javascripts fault after all.

Re: Learn how modern JavaScript frameworks work by building one

#36

Post by ketzo »

nolanl wrote: post #29
n2d4 wrote: 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.…

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…

Hard to ride the line between clear, concise explanation and perfect technical correctness; I thought you picked good tradeoffs in your article.

Re: Learn how modern JavaScript frameworks work by building one

#37

Post by valenterry »

marcelr wrote: post #30
valenterry wrote: post #27

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…

If you mean effects as data, I can't think of anything off top other than elm which is a language + framework. I've made my own though: https://github.com/marcellerusu/capable-js . Its not for use but it was an interesting experience that enables a lot of new patterns by using generators. I don't claim that it is better than other frameworks though, there's a lot of times where this pattern is significantly more cumb…

Very cool! Especially I liked your example of elements that have "finished". Funnily, this was one of the major problems of mine when I built [visakami](www.visakami.com) which essentially is just a survey on steroids.

I think you should join the react developer's team. ;-)

Re: Learn how modern JavaScript frameworks work by building one

#38

Post by eyelidlessness »

n2d4 wrote: post #28
valenterry wrote: post #27

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…

The way Suspense works is actually even a bit more interesting/horrifying: it doesn’t throw an error, it throws a Promise. Which again you don’t need to know to use it, and so it’s a valid implementation detail, but it’s a really odd one.

Re: Learn how modern JavaScript frameworks work by building one

#39

Post by explaininjs »

mhh__ wrote: post #22
xrd wrote: post #16

I really love Svelte. The compiler is great and very extensible. For example, you can easily add functions to the processing pipeline to process Svelte templates (or the script elements or style sections) in your own special way. It's a fantastic way to build JavaScript frameworks. Svelte people always note Svelte isn't a framework, so this isn't a framework on top of another framework! I used this to build Svekyll,…

I also like svelte but as a compiler-y person who happens to be doing some JS I can't work out why I'm annotating so much stuff by hand (even with svelte 5). I can get why you might want this for react, but isn't svelte a compiler? Can't we do dataflow analysis? I'm 50% convinced there's a Chesterton's fence I'm mising but where?

Kind of an aside, but I can’t stand how in Svelte the statement “foo = foo” is semantically meaningful.

Re: Learn how modern JavaScript frameworks work by building one

#40

Post by hliyan »

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 Node.
Post reply on HN