Front End Architecture at Chợ Tốt

12/2022

Agenda

  • The Micro Web App Architecture
  • Chợ Tốt Design System
  • What's next for Cho Tot Web Platform?

The Micro Web App* Architecture

Building a Web Product at Scale

* This term is coined by me; it's not a reference, but a coincidence with Microapp

Quick Overview of Cho Tot Web Platform

  • No. 1 online classified platform in Vietnam
  • Nearly 1 mil daily users across web & mobile apps
  • Hundreds of feature screens
  • Verticalized into 04 categories

chotot.com
nhatot.com
xe.chotot.com
vieclamtot.com

How to scale a large product web platform?

  • 2000s: Traditional server pages (SSR): PHP, ASPX...
  • 2011: A large SPA with client side routes (CSR): Angular.js, Ember...
  • 2015: JAM* stack (SSG): Gatsby, Hugo, Jekyll...




JAM*: Javascript - API - Markup;
SSR: Server side render; CSR: Client side render; SSG: Static site generation

How to scale a large product web platform?

  • 2016: Universal JavaScript Application (SSR+CSR): Angular, Nextjs...
  • 2019: “Micro Frontend” SPA: React, Vue, Angular... in the same web app!?


Diagram from microfrontends.com

Here's how we build the
Web Platform at Chợ Tốt

Micro Web App Tech Stacks @ Chợ Tốt

  • Main user facing micro web apps: Next.js
  • CMS web apps: Wordpress, Ghost.js
          
  • Back office: Ant Pro + Apollo GraphQL

Cho Tot Micro Web App Architecture

✅ Benefits

  • Scalable: multiple teams build features at the same time
  • Maintainable: micro web apps are isolated and small in scope
  • Flexible: micro web apps can be built with any paradigm: SSR, CSR, Universal
  • Agnostic: teams can choose any tech stack for each micro web app

⚠️ Challenges

  • Fragmented: difference in teck stacks, frameworks, library versions
  • Less efficient: framework bundles redownload, extra CI/CD pipelines and container storage
  • Inconsistent: hard to keep UI consistent across web apps

Micro Web Apps are not Microfrontends

Their concepts may look similar but there are fundamental differences:

Micro Web App Microfrontend
Web apps built with any tech stack Single-page apps (SPA)
Both SSR & CSR Client-side only
Different micro web apps served at different URL Different microfrontend apps are composed in the same SPA
Team concerns are siloed by request routes Team concerns are siloed by widgets inside the SPA

Chợ Tốt Design System

Solving Design Consistency
and Styling Solution

  • Code name: Clad UI
  • Started since 2020
  • Code name: Clad UI
  • Started since 2020
  • Theming and styling solution
  • Code name: Clad UI
  • Started since 2020
  • Theming and styling solution
  • Reusable Components library
  • Online specification documentation

Clad UI Solutions

etc...

Zero-runtime CSS-in-JS
Styling Solution

UX

    DX

      Zero-runtime CSS-in-JS
      Styling Solution

      UX

      • Reduces First Contentful Paint
      • Reduces JS bundle size
      • Works with SSR out of the box

      DX

      • Theming with auto completion
      • Linting and validating
      • Dynamic style with comp. props

      Read more: https://linaria.dev

      Benefits of Design System

      What's next for
      Chợ Tốt Web Platform?

      What's next for
      Chợ Tốt Web Platform?

      • Unify and reuse framework bundles across micro web apps
      • Adopt monorepo to verticalize micro web apps
      • Module federation for reusable components (Header, Footer)
      • Improve theming, adopt clad-ui across web apps, usage tracking
      • Explore into React Server Component and Next.js Nested Layout

      Thank You

      Want to help improve Chotot logo Web Platform?
      Visit careers.chotot.com to check out our open positions.

      Link to this slide: bit.ly/vws-chotot-frontend

      Contact me: int3ractive.com - : @trongthanh


      The End