dogecoin / dogecoin.com

official repo for dogecoin.com
462 stars 217 forks source link

Proposal: rewrite in `NextJS` + `TailwindCSS` #259

Open vltansky opened 3 years ago

vltansky commented 3 years ago

Hey, would you support a rewrite of the website in NextJS + TailwindCSS? I believe it will easily get to 100 scores lighthouse vs 71 right now. image

If you will approve the idea I'll work on PR in the nearest days, it should be pretty easy and fast.

P.S just for example a few months ago I was involved in rewriting https://swiperjs.com/ to NextJS + TailwindCSS, that's the lighthouse score right now: image

cluzier commented 3 years ago

Yes, I agree that a rewrite would definitely improve web score and performance.

choutkamartin commented 3 years ago

In my honest opinion, I get a better performance rating (97 - 98) in Lighthouse, and the issues are fixable in under 10 minutes, so I wouldn't be so sure if it's even worth it to use Next.js for a single page like this, HTML with a bit of JS is sufficient.

vltansky commented 3 years ago

Yeah, but I do see advantages in maintaining a modern stack. Will be much easier to develop new pages/features. Easier to contribute - no need in complicated and outdated XAMPP. Reusability of components, now there are few pages duplicating header, footer, etc. that can be maintained in one place instead. Right now dogecoin loads jQuery + bootstrap CSS + Bootstrap JS (around 70 kb gzipped) using only a tiny part of it in another hand NextJS and Tailwind have tree shake & purge that will lead to a much smaller bundle size and as a result higher scores & performance out of the box. @choutkamartin What are the disadvantages of using Next.js for a single page?

nickatnight commented 3 years ago

I think I agree with @vltansky on this. A few months ago, sure a single page with some standard bootstrap was sufficient. But over the last couple weeks with the amount of attention Doge has been receiving, we've added additional pages that duplicate a good portion of the code. The code base will start to get bloated here soon as the amount of contributions / feature requests increase, so maintainability will be something to consider.

Ultimately, it's up to the maintainers to decide if they want to move forward with a more modern framework. Since the project runs on GH pages, it's simple to deploy a single page static site. Although, I've never ran a GH pages site with Next.js etc. My suggestion would be to prototype something, deploy it to a GH pages environment, then link the demo site.

See this GH issue from February.

choutkamartin commented 3 years ago

@vltansky @nickatnight There are no disadvantages to use Next.js for single pages - I use it daily and love Next and other frameworks. Well, to some extent haha.

What I meant was if Dogecoin needs a new, bigger website - because there isn't much content right now on the website and I always thought of Doge as a playful cryptocurrency, so the website as right now feels OK to me.

But I do agree with your points, that if there will be more content in the upcoming months, we should probably look into rewriting the website.

Both Next and Tailwind would be a great idea. In my opinion, next-i18next can be a great addition as well, to include the translations we currently have. Data fetching and so can be a huge plus for some upcoming ideas if there will be any. We can even talk about integrated API routes Next offers.

For hosting GitHub Pages could be used as it is right now, Vercel or AWS.

The easiest way would be to kick off things in a simple repository and write a draft, basically 1:1 current site with an updated UI/UX and let the maintainers of this repository decide. Basically what @nickatnight is saying.

If the maintainers would be happy with it, I would gladly help with it further.

rexhinokovaci commented 3 years ago

Yes definitely, it would look neat too.

conveyGhost commented 2 months ago

hello. I totally agree with that you are planning to update website with next.js + tailwind. throughout my career, I could prove advantages of nextjs. I m so familiar with nextjs for dApp related development. furthermore, i m so skilled in code for SEO, sementic HTML code. I would like to collaborate to work this work. lets make awesome and enhanced website with each other.