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

51–60 of 104 posts

Re: Learn how modern JavaScript frameworks work by building one

#51

Post by jph »

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,…

Toot your horn because your project is really great. I blog with SvelteKit, and your way has many improvements galore. Thank you for sharing this!

Re: Learn how modern JavaScript frameworks work by building one

#53

Post by noduerme »

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 calls and update its own data instantly when a user interacts with it.

No abstraction, no nonstandard HTML tags, no , no Proxy, no master class trying to figure out what part of the DOM should or shouldn't be redrawn based on inbound data. Every component should be autonomous, every screen should be able to destroy or resurrect its own components. If you need a central data cache, put that on the ping and let every component deal with it on the event firing.

[edit] I've built and maintained two frameworks, one for websites and one for single page apps, rewritten and improved over 20 years, originally in PHP, now in Nodejs. The main guiding principle for me has always been decoupling design from code.

Re: Learn how modern JavaScript frameworks work by building one

#54

Post by sureglymop »

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 love svelte too but I've found it hard to integrate it in different places where I may run js (e.g. obsidian plugins, browser plugins). It was hard to configure the necessary tooling but maybe it's not sveltes fault. I think svelte would really benefit from better documentation on how to do this (and I don't mean sveltekit documentation). It was also at least non-trivial to use with typescript and even more non-trivial to have some third-party dependencies/components that don't use typescript. Again, maybe not sveltes fault and hard in every framework but those were my show-stopping issues the last time I tried to build something real in svelte.

Re: Learn how modern JavaScript frameworks work by building one

#55

Post by grey-area »

breadwinner wrote: post #26
stanislavb wrote: post #11

Please, do not build more JS frameworks (see-no-evil emoji).

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.

Re: Learn how modern JavaScript frameworks work by building one

#56

Post by gherkinnn »

genuine_smiles wrote: post #45
localvoid wrote: post #42

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?

Vue.js is and isn't. It did ""fine grained reactivity getter setter proxy something"" before it was cool [0].

At this point I can't stop myself from pointing out that the underlying reactivity/diffing system is rarely what makes an application slow. I've heard the creator of XState and Stately [1] say that React's vdom is not fast enough for updating edges in their state chart in real time without lots of optimisations and I believe him. It's just that most people don't encounter such issues and spend adding a dozen tracking scripts that run before the actual application does.

0 - https://vuejs.org/guide/extras/reactivity-in-depth.html#conn...

1 - https://stately.ai/

Re: Learn how modern JavaScript frameworks work by building one

#57

Post by anonzzzies »

n2d4 wrote: post #32
nolanl wrote: 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);

I never used svelte, so it’s probably a weird question, but how is increment() called?

Re: Learn how modern JavaScript frameworks work by building one

#59

Post by 698969 »

anonzzzies wrote: post #57
n2d4 wrote: post #32

Earlier quoted context omitted.

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

I never used svelte, so it’s probably a weird question, but how is increment() called?

The calling location has been omitted from the snippet. You don't need to do anything special to call it, just `increment()` wherever it's in scope.

` increment()}>+`

Re: Learn how modern JavaScript frameworks work by building one

#60

Post by SebastianKra »

eyelidlessness wrote: post #38
n2d4 wrote: post #28

Earlier quoted context omitted.

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.

To be fair, in js, throwing is the only way a function (aka Hook) can abort the execution of its calling function (aka Component).

The decision to avoid a custom compiler is responsible for almost all oddities and downsides of React.

Post reply on HN