Google Hackathon Win for Tokopedia Lite

 • 

Intro

We have won Progressive Web App (PWA) Hackathon organised by Google. 10 tech companies from various domains in Indonesia has participated in the hackathon. Tokopedia emerged victorious with the lite version of the website (m.tokopedia.com) that incorporates the latest technology like react.js, PWA, AMP, service-workers, offline to help speed up loading times, reduce bounce rates, and improve the user experience on mobile.

The Journey

The journey started in October last year when our CTO asked us to start building projects using react.js. We built some products like mitra-toppers and credit-card using react. Then we shifted our focus on converting perl mobile site m.tokopedia.com. We named the project Tokopedia Lite. There were several challenges in the way. We started incrementally converting perl site to react webapp using nginx to redirect traffic to the new site.

Tokopedia Lite

Tokopedia Lite is a mobile friendly version of tokopedia site. Mobile version is very important as the majority of ads traffic land on the mobile web. The site needs to be fast and responsive. Tokopedia Lite is a Progressive Web App created using react.js. There are several factors which differentiate a web site from PWA. The web app should be able to provide add to home screen function. This is done by providing a manifest.json which lists name, description, icon, theme colour for the app.

{
  "name": "Tokopedia",
  "short_name": "Tokopedia",
  "start_url": "/?h=3",
  "icons": [
    {
      "src": "https://ecs7.tokopedia.net/assets-tokopedia-lite/prod/media/icons/icon144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "https://ecs7.tokopedia.net/assets-tokopedia-lite/prod/media/icons/icon192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://ecs7.tokopedia.net/assets-tokopedia-lite/prod/media/icons/icon512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#42b549",
  "background_color": "#FFFFFF",
  "display": "fullscreen",
  "orientation": "portrait",
  "gcm_sender_id": "482941778795"
}

Technologies

We used react.js as our main framework. React comes with a whole ecosystem of tools and technologies with which one can build a good progressive web-app. We are using:

  • react.js for rendering
  • redux for state store on our webapp.
  • graphql for communication, integrating to backend golang microservices.
  • ES2017 javascript as our language. This is transpiled to ES5 js using babel transpiler.
  • Our build system is managed by webpack, where we have used many plugins to make development and deployment seamless. One of the exAMPles is webpack visualizer to analyse bundle size.
  • For offline experience, we are using Google’s sw-precache module to generate service worker. This is used to serve assets even when the site is offline.
  • We are moving to universal rendering to make first page load fast.
  • node.js as a server for graphql.
  • nginx for reverse proxy and serving static assets.
  • ansible to automate deployment.
  • circle ci for continuous integration.
  • open signal for push notification.

The Hackathon

The Google Indonesia Hackathon challenged leading developers from e-commerce, travel, finance and news to build a Progressive Web App and Accelerated Mobile Pages (AMP).

Google reached out to us to participate in their July Hackathon. We already had a PWA with us by that time, but criteria of competition was tough. The app will be judged on UX, load time, performance, time to interactive. There is a very good tool to measure all this, called lighthouse. It is available in various forms one of which is a google chrome extension. Lighthouse result would be a major metrics for winning criteria.

Result of Google Lighthouse
Result of Google Lighthouse

AMP

The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. At the hackathon, we decided to try to implement AMP version of our webapp. AMP page is lightning fast to load. But there is a catch while using the AMP you cannot write custom javascript. CSS needs to be embedded in the page. There is size restriction for the page and you cannot use some CSS rules. This might seems too restrictive but there are excellent reasons to use AMP for things like landing pages and SEO.

We were able to create and deploy AMP page to production during the hackathon.

The Results

In the end, Tokopedia Lite was the winner of the hackathon. We learned a lot from the experience and had a lot of fun. Main factors were UX, lighthouse result, use of AMP. Google Indonesia e-Commerce head Henky Prihatna said that Google will continue to empower the Indonesian ecosystem of highly skilled web developers by initiating a series of classroom training programmes on PWA. We thank Google for providing such platform which takes the web forward.