Rewrite with React

[LitoMore]

Background

As the content of our web pages gradually increases, the performance of our web pages gradually decreases. I have tested the performance of our website on a variety of devices, and some browsers indeed have serious performance issues. Although we tried to alleviate our performance issues with loading="lazy", it is understandable that the number of elements in the document did not decrease.

Problem

The best solution for the huge list is Virtual DOM. We are using Pug for the HTML template, but it's not a good tool for Virtual DOM.

Solution

The React. With React, we can more systematically organize our components, logic, and workflows. There are also many other excellent solutions for us to choose from. This reduces our maintenance efforts on Webpack and the build scripts.

There are already several excellent ones in the React ecosystem and are easy to implement:

• react-virtualized
• react-virtuoso
• i18next
• i18next-gettext-converter

Similar implementations

simple-icons-figma

This does not use the virtualized list but the performance is still very good

• Source - https://github.com/LitoMore/simple-icons-figma
• Preview - https://litomore.github.io/simple-icons-figma/

Contributes to

• 244

• 161

• https://github.com/simple-icons/simple-icons/discussions/7125

[mondeja]

I agree, but are you referring to refactor the whole client code or only the grid?

Seems a bit difficult to refactor the whole source. If someone want to do it, feel free, I'll help in the review.

[Gaurav-Verma07]

Hiii @LitoMore I also want to work in refactoring to ReactJs. Please lemme know how to contribute. Thanks

[LitoMore]

@Gaurav-Verma07 Here is our contributing doc.

Can you briefly describe how you would go about refactoring this project using React before you submit a PR?

[adsingh14]

Going with React is better afaik but what about going with Next (React framework) ?

Looking forward when it starts so I could contribute to React development.

[LitoMore]

@adsingh14 I would say no to Next.js. This is a single-page website, so there is not necessary to use Next.js.

I have already started the work on my local. There are so many things that need to be rewritten, so this should take a long time.

But if you have any ideas and suggestions for our refactoring work, feel free to let us know. Thanks.

[Gaurav-Verma07]

@Gaurav-Verma07 Here is our contributing doc.

Can you briefly describe how you would go about refactoring this project using React before you submit a PR?

Sir, We can use various functionalities of ReactJs and associated libraries to make a robust website since I'm already experienced with it. We will use react-components to keep everything reusable.

[LitoMore]

@Gaurav-Verma07 My target is TypeScript React. And I'm not going to use any library for components.

We have lots of scripts need to be refactored, like scripts/i18n.js, public/scripts/language-selector.js, and webpack.config.js, etc.

Your answer is too simplistic, and I didn't get any useful information. You should have a good understanding of our architecture before you start. Thanks.

[mondeja]

We have lots of scripts need to be refactored, like scripts/i18n.js, public/scripts/language-selector.js, and webpack.config.js, etc.

I can help you refactoring these scripts. Just open the pull request as a draft and we'll coordinate the job there.

[LitoMore]

@mondeja Thanks. I will create a draft PR when the work has some progress.

At the same time, I'm thinking about how to optimize our current code. We may try to use <use xlink:href="file.svg#simpleicons" /> like Google Home does:

<svg role="img" aria-hidden="true" class="glue-header__logo-svg" alt="Google Logo">
    <use xlink:href="/static/icons/google-icons.svg?cache=2732009#logo"></use>
</svg>

All we need to do is stitch all the SVG together, or split them into multiple resources by initials.

This is just my guess, I haven't verified if it can improve performance.

It can be used in React as well if it works.

[mondeja]

Hi @LitoMore

I'm currently rewriting the website with Rust using Leptos as the components framework and TailwindCSS as the CSS framework. You can see the project at https://github.com/mondeja/simple-icons-website-rs

Just reached to the conclusion that React has a lot of drawacks for optimization and that TailwindCSS avoid us the problem of having a lot of CSS code to maintain. This approach produces a WASM level of optimization, which is a lot of faster than the JS approaches.

I don't plan to make this new website rewriting a replacement of the official one without the consent of Simple Icons maintainers, of course, mainly because the used tools are outside of the standard followed by the Simple Icons organization until now (pure JS solutions) and I'm just developing the project to learn Leptos and TailwindCSS in a real project. But I think that technically is the best solution possible in the long term.

Anyways, I will help with the maintainment and testing if you still consider that a React rewriting worth the effort. Cheers! 👏🏼

[kidonng]

Just want to throw in my two cents. I think the problem is more about the amount of SVGs being rendered rather than what framework is being used. And while I appreciate the effort @mondeja is putting in, rewriting the website (or anything else) in Rust/Go/WASM doesn't magically make things faster or better.

What I'm suggesting is to be really smart about how to show icons (proposed virtual list, etc.) I think Iconify website does a good job on this, but it may have something to do with pagination and (slightly) modified icons.

[mondeja]

And while I appreciate the effort @mondeja is putting in, rewriting the website (or anything else) in Rust/Go/WASM doesn't magically make things faster or better.

Yes, I agree with that, I'm not doing this rewrite to make it faster as is, I'm doing it mostly for maintainment (component-based layout) and to learn, but I'm pretty sure that anyways the WASM optimization will affect the performance as well. I've some ideas to implement the virtualization for the new rewriting, but I've didn't test them.

[mondeja]

Seems that #291 have solved the main performance issue of loading="lazy" not working well in some contexts, but I'm not totally sure about that. There are other techniques that we can try in addition to that, see https://github.com/simple-icons/simple-icons-website/issues/284#issuecomment-1498122275

[mondeja]

Hi, bringing good news for this issue and almost all others. My reimplementation of the website with Leptos and TailwindCSS is practically ready to be released. You can for now see it at http://wasm.simpleicons.org. I only need to tweak some strange problems, like not being rendered on Safari due to like seems a bug in the browser.

I would like to make this implementation of the new website the main as is solving all the problems that we've now. I know that is fairly from being inside the standard technologies that have used the Simple Icons contributors team until nowadays, but if we want to improve the web we need this jump IMHO. I'm pretty excited and really impressed of the performance improvement it supposes, even calling some JS functions from WASM like the fast-fuzzy library.

I'll try to open a PR ASAP to merge the new website here. If someone has problems with this new approach let me know.

[kidonng]

@mondeja Very inspiring. I tried the WASM version, while it's lacking nice touches here and there, it seems to have almost feature parity with the current version. It indeed is also very fast, and the rest of things is SVG rendering which you can't optimize anyway.

I know that is fairly from being inside the standard technologies that have used the Simple Icons contributors team until nowadays, but if we want to improve the web we need this jump IMHO.

I think it's fine, the website already has enough features for a catalog. Icon data is separated and has little to do with the website itself. Since the biggest issue (performance) is already tackled it's almost a build and forget thing and needs little maintenance.

This is just from a outsider's view though.

[adamrusted]

Returning to this, having made some incredibly minor contributions to @mondeja's Leptos website repo. I would be more than happy to merge it in, or perhaps do like we did with this redesign and offer it as a 'beta' for a limited time. Perhaps we add a banner onto both the current and new website highlighting the 'upcoming' change, and try to review any oustanding issues on https://github.com/mondeja/simple-icons-website-rs before making the switch? Should give us other maintainers ample time to get up to speed. Thoughts, @simple-icons/maintainers?

[ianzone]

Hi, bringing good news for this issue and almost all others. My reimplementation of the website with Leptos and TailwindCSS is practically ready to be released. You can for now see it at http://wasm.simpleicons.org. I only need to tweak some strange problems, like not being rendered on Safari due to like seems a bug in the browser.

I would like to make this implementation of the new website the main as is solving all the problems that we've now. I know that is fairly from being inside the standard technologies that have used the Simple Icons contributors team until nowadays, but if we want to improve the web we need this jump IMHO. I'm pretty excited and really impressed of the performance improvement it supposes, even calling some JS functions from WASM like the fast-fuzzy library.

I'll try to open a PR ASAP to merge the new website here. If someone has problems with this new approach let me know.

This is way faster than the current site, using Edge btw.

[keerthinannepamula1]

@mondeja can we add more space between the cards so as to not make the website feel congested? I think space between the icon cards makes the website more appealing! I would like to work it if its okay.