Basic JS logic

[summer terrace]

Hey guys, I'm using astro for the first time and really liking it so far; everything's worked as I'd expect it to, but I have just hit my first roadblock:

I have a basic page which isn't necessarily interactive other than the fact that I want to use JS to emulate a sticky scrolling like this page does here: https://www.ssense.com/en-gb/men/product/essentials/gray-raglan-sweater/10227131

i need to use an intersection observer to conditionally apply a class to the element that will be stuck to the side of the images that the user will be able to scroll through vertically; is this something I'd have to make my route into a react/vue component for? or can I do this keeping it to a .astro file? and are there any downsides to moving this to a component from another framework? since it encapsulates most of the page it'd essentially mean moving the entire page into the component

[rugged veldt]

hmm, even if you wrap it in a UI framework component, the code you will execute will not run as part of the render, but as part of some "post render" phase of the UI library. So, if you are comfortable writing the vanilla js code for the intersection observer, the lighter weight thing to do would be to directly write the code using dom apis. and then source the js code at the bottom of your page html (i.e. the relevant .astro file)

with a UI framework you would incurring the cost of the framework for no noticeable gain.

[summer terrace]

what does "not run as part of the render, but as part of some "post render"" entail? does that mean it isn't SSR'd?

[rugged veldt]

the intersection observer can't run on the server. so in React parlance, you would execute that code in componentDidMount or useEffect hook.

[summer terrace]

ah right, yeah i see what you mean

so i insert a separate script tag to the bottom of the page and handle it like that?

[rugged veldt]

that would be the simplest approach, yeah.

[summer terrace]

to play devils advocate: wouldn't this almost always be the suggested approach to use then? there's very few things you can't reasonably do without a ui framework

[rugged veldt]

sorry, the double negative confuses me. are you saying, there is very little reason to use JS client side UI libraries like React/Vue? If yes, then I agree with you. ... though that is a much bigger topic that depends on the kind of application you are building.

[summer terrace]

yeah, that. but particularly in astro contexts

[rugged veldt]

the typical example folks give - a music player app, we need client side routing to handle playing the current audio while allowing the user to navigate the site.

yeah, a lot of folks rely on Astro's support for multiple UI frameworks to migrate their site over from their existing setup to Astro.

it helps a lot with that.

though once you are in Astro, there is very little reason to continue using React. again, it depends on what you are building.

checkout https://github.com/astro-community/xelement

its astro's version of client side interactivity.

[summer terrace]

will do, cheers.

[rugged veldt]

@pale anchor is https://github.com/astro-community/xelement the official github repo for xelement or https://github.com/aFuzzyBear/xelement ... the astro integrations page links to the latter. neither of them link to the vercel hosted website. I was recommending xelement in this thread, and not sure where to direct folks to.

ok, i found the #x-element-archived channel. @summer terrace feel free to ask around over there if you need any help with xelement 👍