[Task]: Estimate performance improvement from moving away from styled components.

[SatishGandham]

Is there an existing issue for this?

• [X] I have searched the existing issues

SubTasks

• Estimate performance gains
• Take a final call between Stitches and Linaria

[SatishGandham]

Should evaluate if changing the way we use blueprint will reduce how extensively we use styled components. Plan is to override blueprint sass file with basic color and theme variables.

Even if it improves performance, we should eventually move to build time css solution for good.

[somangshu]

@albinAppsmith can you give us the details about the POC that we are trying to do for the ADS components with this performance optimizations

[albinAppsmith]

@somangshu what we are trying to do on the POC is to convert the button component to different Css-in-Js libraries like Stitches and Linaria. Then we will see the first render time, re-render time, etc for this component and compare it with styled component.

But this POC is on hold right now.

[somangshu]

Thanks for the update @albinAppsmith,

Adding on top of the above, While you are doing a POC it would be great to see the kind of performance gain we are having with this so that we know how to quantify this later. Kindly add the benchmarks here when you get to the POC.

Perf team can help you with this.

cc @SatishGandham @Rhitottam

This as of now is planned to be picked up in the next 2 weeks

[somangshu]

@dhruvikn will be picking this up by the end of this month, We will get a download from @SatishGandham for more information of what the POC should entail (feel free to drop so me more context on the thread if that is helpful)

@rohitagarwal88 @albinAppsmith please let us know if you guys have started work here.

[rohitagarwal88]

@somangshu : As of now, we have not started any work on it but if we can pickup before/by the end of this month, then I will update here.

[dhruvikn]

Hey @SatishGandham, as per our conversation today, please find the attached results from profiling (link here) -

Also, here's the source code where we have the migrated components and the test page. Styled - https://github.com/dhruvikn/poc-styled Linaria - https://github.com/dhruvikn/poc-linaria

[dhruvikn]

Hey @SatishGandham, as per our discussion, I have added and another task (Add 5 Button2) and profiled again. Here are the results -

Have also pushed the changes on the Git Repos - Styled here, and Linaria here

[rohitagarwal88]

@SatishGandham / @dhruvikn : Are we also considering https://stitches.dev/ POC?

[albinAppsmith]

@SatishGandham / @dhruvikn We can try using Atomic CSS feature of linaria, whether this is improving these metrics. https://github.com/callstack/linaria/blob/master/docs/ATOMIC_CSS.md

[SatishGandham]

@rohitagarwal88 , First we have to prove styled components is a problem. Stitches and Linaria should have similar performance.

[albinAppsmith]

Latest POC results:- https://docs.google.com/spreadsheets/d/1BVwjpur16DpLAHgv_vmAZSakQ_hC-Ne1ekS3d3Yg_ic/edit#gid=0

Linaria: https://github.com/albinAppsmith/poclinaria CSS modules: https://github.com/albinAppsmith/poccssmodules Compiled: https://github.com/albinAppsmith/poccompiledcssinjs Styled component: https://github.com/albinAppsmith/pocstyled Emotion: https://github.com/albinAppsmith/pocemotions

[somangshu]

Internal discussion thread

[jsartisan]

@KelvinOm Let's close the ticket if we are ok with styled-components.

[KelvinOm]

@jsartisan We have not detected a significant increase in performance from the use of other technologies. Let's continue using styled components.