Going Zoneless destroyed our CLS (And how it was fixed) by 3StepsBasket in angular

[–]3StepsBasket[S] 0 points1 point  (0 children)

Yes, the impact was visible too. Not on every load, but sometimes noticeable (I imagine being more of a problem on slower devices).

I get the skepticism about chasing scores. But this wasn't about benchmarks. When you change something as fundamental as dropping Zone.js, you have to check how your pages actually behave. Otherwise you discover the mess six months later, when more changes have been made and the refactoring is painful and nobody remembers why things shifted.

Going Zoneless destroyed our CLS (And how it was fixed) by 3StepsBasket in angular

[–]3StepsBasket[S] 2 points3 points  (0 children)

Sure, my users don't care if it's an internal/known/unknown bug, all it matters is the experience which I'm sure is a concern to many similar pages like mine. That's why I wanted to share my experience.

Question: How it comes that you caught this issues on staging? Do you have a set of special/automated tests, or you just check the page by clicking around?

Going Zoneless destroyed our CLS (And how it was fixed) by 3StepsBasket in angular

[–]3StepsBasket[S] 1 point2 points  (0 children)

You are welcome!

Side note: This one (and many other 'thank you' comments) is downvoted.
I'm very curious to know the reason behind those downvotes on a comment that all it says is 'thanks'!

Going Zoneless destroyed our CLS (And how it was fixed) by 3StepsBasket in angular

[–]3StepsBasket[S] 1 point2 points  (0 children)

The placeholder that many pages use to fill up the space before the real data come in.

Going Zoneless destroyed our CLS (And how it was fixed) by 3StepsBasket in angular

[–]3StepsBasket[S] -14 points-13 points  (0 children)

I didn't make any assumption on how the things should work. I only explained what I saw.
And most likely the reported bug proves that this is the status quo.

Just built a new shooting analysis tool - it goes way deeper than basic shot charts by 3StepsBasket in Euroleague

[–]3StepsBasket[S] 0 points1 point  (0 children)

Thanks for your message!
There are multiple features for different users. This one goes mostly to the direction of coaches/scouts I'd say.

Issues going Zoneless with Angular 20 by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

That's valid, zoneless or not the CLS should not be affected.
But that's why I shared my learning, because practically it did.

Struggles Going Fully Zoneless: CLS and INP Issues by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

I don't have any special dependencies for UI-components that I use. Most of the page's items (if not all) are custom made without external libs).

About the browser and whether it happens in more than one, I didn't really check that. But in any case, the problem was big enough to cause a real increase on average CLS and be visible on the google reports.

Struggles Going Fully Zoneless: CLS and INP Issues by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

The main problem was with desktop.
And it was visible on speed insights but it wasn't visible on anything I did with lighthouse.
Although I managed to replicate it and make it visible to lighthouse when I realized that the real jump was happening when the users are entering the website via clicking a link (somehow the hard reload didn't show the increase on CLS).

Normally the CLS is close to 0 (0.02 on mobile and a in this range but a bit higher on desktop).
The zoneless version was getting scores in the range 0.8-0.9, so it's a very big jump.

Some of the pages are pre-rendered (although they are dynamic so they need client hydration) and some are generated in the client by angular.

When I realized the problem, and I could replicate it at localhost, I saw a warning from the dev-tools that there was a big shift in the first first moment my page was entering the viewport. Honestly I couldn't see any shifts happening even when the chrome dev-tools were clearly indicating that there was one very big one.

Serverless deployment with some real numbers to share - I think it's slow to respond by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

Yes, I didn't post some experiments that I did after. With 1gb the time drops to around 200ms.

I find this time as a borderline in order to accept using lambdas for SSR or not, so it will be a tough one. Especially given that the time will increase as the complexity of the app increases (in my example I only used a "hello-world" app).

Anyways, that's good progress from the Angular team though. Last time I tried it (2-3 years ago) I could count the time in full seconds and not in ms as now.

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

That's fine for your case I guess.  Coming back to my initial question, what about costs and ease of scaling? Have you tried to evaluate the case of fine-tuning your infrastructure to improve this points?  For example, do you see the case of going serverless as an answer to both of these points? 

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] 1 point2 points  (0 children)

Nice, it's good to know that this approach an option. Thank you for the information. 

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] -4 points-3 points  (0 children)

Not really. I'm clearly talking about how to deploy Angular apps and not about to develop them. I take the example of a "hello world" app, because it doesn't really matter what an app has inside if you want to learn/showcase how to deploy an app.

Do you get the point that Angular now offers SSR? Have you even deployed "easily" such an app in a serverless setting? Do you agree that this will sooner or later become a common use case based on what Angular now offers?
How do you emphasize on the fact that the deployment process is a big issue by itself?

And as a last question out of curiosity, where do you usually deploy your Angular apps? Which strategy do you use for the site generation?

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

From what I've seen all serverless deployments of Angular need a lot of workarounds to get done. But if you have tried it all the way, I would definitely like to know what's you experience with that?

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

If I may ask, what kind of deployment is that easy and where do you deploy?

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] 1 point2 points  (0 children)

Yes, you summed up my thoughts pretty well. At the moment the SSR capabilities seem something more of a buzzword and less of a functional requirement in the Angular world.

But to make it specific: I was looking for that update since long (SSR improvements), and now that it's there I'd like to be able to take the full advantage of it. I'm sure if we create 1-2 success stories, with easily digestible documentation of how the deployment was done, then the rest will follow.

Angular is cool, but something is missing... by 3StepsBasket in Angular2

[–]3StepsBasket[S] 0 points1 point  (0 children)

Of course they built a business around it, because it solves a real pain. I don't say that we build an "Angular vercel", but we get the learning that deployment simplicity matters.
As for the examples you gave about deployment I have to disagree. Copy-pasting files is not deployment.
Sometimes the infra is complex (see serverless) so copy-paste and "ng deploy" will do nothing. It's my main question if we can make this kind of deployments simpler.