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

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

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...

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:

Chợ Tốt Design System

Solving Design Consistency
and Styling Solution

Clad UI Solutions

etc...

Zero-runtime CSS-in-JS
Styling Solution

Zero-runtime CSS-in-JS
Styling Solution

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 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