DEV Community

Discussion on: The Cost of Investing Too Heavily in a JavaScript Framework

khrome83 profile image
Zane Milakovic

I think the future is a standard, like web components.

My concern is that the standard we got is lacking. It forces many things into JS, which is the same issue we have with these massive frameworks.

I have seen apps that are built with React, and meet 100 percent desktop, and 87-92 percent mobile page speed score.

Yet in certain parts of the world, it took 20 seconds to load. Mostly because of the poor hardware on the users device, and the time it took to parse the JS bundle, which was 700kb.

The sad part, this region made up 40 percent of the users nationally.

Where the other users would load the site sub second.

It really made me rethink how we put css in js, and hydrate components that are not reactive, and in general move more and more resources to the client.

Web components don’t really solve this. It’s more of a symptom of our change in how we build for the web. For better or worse. The older spec was much better, but Safari killed that.

ryansmith profile image
Ryan Smith Author

I think websites can be performant, even if JavaScript is doing a lot of the heavy lifting. Stencil provides a pre-rendering mode, which will generate HTML/CSS with the default properties. Your site will serve up the static HTML/CSS and then JavaScript will download to re-hydrate it. This means that sites can also run without JavaScript, so you get the best of both worlds. I have it enabled on my site if you would like to take a look.

khrome83 profile image
Zane Milakovic

This does not change my opinion.

I mean I run sites on Gridsome, Next, and Nuxt. All do this as well.

You always end up with some functionality for interactivity that’s requires that bundle.

Sometimes you can split that out. But I have ran into situations where I can’t.

So you still end up with a expensive JS bundle the user has to download. This really depends on the sites complexity. But I saw marked improvements switching from React to Svelte for a product. But things like a non reactive header still gets wrapped up in the hydra table and JS template instead of just HTML and CSS from the server. We just don’t have a clean way to split this out yet.

The SSR for stencil is a good thing to do.