Grab's Front End Study Guide

Summary

Rapid hiring and engineering expansion created a steep learning curve for newcomers and backend engineers unfamiliar with modern web architecture. Grab created an opinionated front-end study guide to help engineers navigate JavaScript tooling, state management, and modern application practices. The guide frames client-side single-page applications as a scalable alternative to traditional server-side rendering, enabling clear client-server separation for multiple client apps hitting the same backend API. It establishes core competencies in ECMAScript 2015 via Babel and explains how component-driven interfaces in React improve maintainability and performance through virtual DOM reconciliation. Ultimately, the resource aims to ramp up developer onboarding and accelerate shipping speeds across web platforms.

Context

New hires and backend engineers unfamiliar with the evolving JavaScript ecosystem felt overwhelmed by modern front-end tooling, slowing their onboarding and feature delivery at Grab.

Approach / What changed

Grab published an opinionated front-end study guide covering single-page app architecture, ES2015, Babel transpilation, and declarative component development with React.

Takeaways

• Single-page application architectures improve team scalability by enforcing independent client-server contracts and letting multiple platforms consume the same backend API.
• Using Babel with the Stage-0 preset allows engineering teams to write ES2015 features while maintaining compatibility with browsers that only run ES5.
• React achieves performance optimizations by updating an in-memory virtual DOM and patching only the calculated minimal difference to the real browser DOM.

Related reading

• Grab · May 30, 2019

  React Native in GrabPay

  Following the release of the GrabPay Merchant App, Grab adopted React Native inside the Grab Passenger app to maintain a single cross-platform codebase across iOS and Android. Integrating the framework into native applications required establishing bridge communication guidelines and incorporating React Native modules into the Grablet architecture. To streamline network communication, API calls were migrated from axios to native bridges returning promises, which eliminated the need to pass access tokens into JavaScript. The team also established a shared internal library of approximately 20 UI components alongside Redux for state management and react-navigation for routing. Modules like BillPay and Transaction History successfully launched across Southeast Asia while maintaining the performance and feel of native software.

  Sushant Tiwari

• Grab · Sep 23, 2020

  Our Journey to Continuous Delivery at Grab (Part 1)

  Around the end of 2018, Grab's backend architecture consisted of roughly 270 services managed through fragmented, manual deployment workflows. Engineers copied release parameters between build logs, wiki pages, Slack bots, and multiple Jenkins jobs, leading to high operational friction and an average of 10 business days between production updates for a service. To streamline delivery, Grab built Conveyor, an internal automation platform built on top of open-source Spinnaker. Conveyor introduced a custom user interface focused on pipeline visibility and a pipeline-as-code DSL called Artificer using Jsonnet files in the monorepository. The platform automatically registers build artifacts with commit metadata to eliminate manual parameter entry and automatically provisions integration, staging, and production pipelines.

  Sylvain Bougerel

• Grab · Jul 29, 2021

  How We Cut GrabFood.com’s Page JavaScript Asset Sizes by 3x

  GrabFood.com faced high cloud costs while serving over 1 TB of weekly network egress across 175 million requests. To minimize egress and improve page performance, the engineering team audited and reduced their webpack dependencies using tools such as webpack-bundle-analyzer and dependency-cruiser. Their strategies included lazy loading rarely used libraries, unifying duplicate modules under single entry points, and substituting utility libraries like axios with native browser Web APIs. Additionally, altering implementation approaches, such as replacing client-side signed JWT cookie encoding with plain JSON strings, eliminated heavy Node dependencies like crypto. These optimizations reduced JavaScript static assets from 750 KB to 250 KB, decreased CloudFront costs by 20%, and accelerated build times by 3.6x.

  Gibson Cheng

• Grab · May 4, 2022

  Embracing a Docs-as-Code approach

  Engineers at Grab faced difficulties finding and writing technical documentation because materials were fragmented across various platforms and disconnected from daily workflows. To establish a single source of truth, the organisation adopted a Docs-as-Code approach starting in 2021. Under this system, documentation is written in plaintext Markdown within dedicated folders inside each service's Git repository. An internal developer portal automatically builds and publishes documentation whenever updates are committed, integrating documentation maintenance into the standard code development and review workflow. By April 2022, approximately 80% of Grab services were projected to host their documentation on the internal portal, with the model also expanding to technical training content.

  Shu Juan Cheong