Back to projects

Meson

Search engine result page (SERP) that uses a custom framework built with Node and React

drawing SERP

The project

Ask Media Group main product is a SERP. The SERP is deployed and hosted by many domains, a domain may have some special features but 95% of the product is the same. They had developed a custom framework called Archie, it was built on top of Node.js. A quick summary of Archie, it had some core repositories for managing components and rendering using dust.js templates, for the front-end it had a lot of repositories that contained around 6-7 domains, so the more domains they have, the more repositories they need, built time was a problem and also the cost was increasing a lot. It got to a point where they need it to come up with a better framework, they started a new project called Meson.

Meson was the new framework to solve all the cost and performance problems. They also developed a new tool for business in Retool so they can perform small changes in the SERPs, like font-size, font-color, logo position and more, Meson had to take into account this configuration to render the final SERP. The whole project took around 1.5 years to be completed.

drawing Mobile version of SERP

My participation

The first phase of the project was to develop the core of Meson. It was composed of a custom Builder (similar to Next.js) and a Core engine. Both were built by 2 architects that had been working in AMG for more than 10 years.

The second phase of the project included the migration of all features and components from Archie to Meson. This is where I joined the project. I started as a regular senior developer then at the end I was named co-tech lead. My main task were

  • I was in charge of migrating components from Archie to Meson.
  • I was in charge of deploying new releases of Meson
  • A / B testing for Meson and Archie in fastly
  • Help and guide developers from different teams to understand how meson works.

drawing Content page in non english language

The tech stack

In this project the main framework was Node.js along with React. We used SSR using a custom framework similar to Next.js. We had a mono-repo where all the components were developed and tested. The full list is

  • Frontend
    • React.js
    • Redux
    • Style Less
    • Dust.js
  • Backend
    • Node.js
    • Redis
    • Express.js
  • Other
    • Google, Yahoo and Bing APIs
    • Internal API for content
    • SSR
    • Fastly vcl