Marketplace meets React – our internal hackathon

It’s a perfect time to share an amazing update about our Marketplace meets React #Hackathon! From Dmitrii Grachikov

So, what did we do?

15 passionate Marketeers sat together (mostly online ??????) and in 2 days delivered a copy of our METRO Marketplace homepage in React.

Why would we do this?

Last year end user performance became more and more important:

• The share of mobile devices in the internet continues to grow
• Google takes performance into account when ranking websites

It became obvious: We have to have top notch performance and reach the best practices! Web Vitals

Easy peasy?

We quickly realised – improving performance is hard.

No –?really Hard!

Especially, if you already have a huge frontend app ??

Is there any other way?

As a crazy idea, we thought: What would happen, if we migrated our homepage from Angular to React? ??

Besides speeding up our Marketplace website, it may have the following effects:

1. Better developer experience for our teams

• Our developers love React!
• React is arguably the most popular UI library: State of JS 2020: Front-end Frameworks
• Next.js is, as well, very positively reviewed framework, built on top of React: State of JS 2020: Back-end Frameworks ????????? Out of the box it provides: SSR, Image and Font load optimization, easy configuration, great documentation, lots of other useful features

2. Chance to add performance monitoring from day 0 and prevent any performance degradation ????

What did we achieve?

Let’s have a look on Lighthouse of the created PoC score now:

It is light years away from the current performance! We can’t praise it enough – in 2 days of tremendous work from all participants it was possible!

See the full result here: Marketplace meets React

How did it look like?

It may be hard to believe, but we had a lot of fun despite Corona time! The event was almost fully remote, but it was worth it nonetheless.

What’s next?

Soon enough we will have the pleasure to present our home page in React with much better performance! Stay tuned – Who knows what will come next?!

Other photos