Skip to main content

RADIO Framework Cheatsheet

Overview​

RADIO is a structured approach to frontend system design interviews:

  • Requirements exploration (15% of time)
  • Architecture design (20% of time)
  • Data model definition (10% of time)
  • Interface specification (15% of time)
  • Optimizations and deep dive (40% of time)

R - Requirements Exploration (15%)​

Key Questions to Ask​

  1. Core Use Cases

    • Which specific features should we focus on?
    • What are the primary user flows?

  2. Requirements Classification

    • Functional requirements (must-haves)
    • Non-functional requirements (nice-to-haves)

  3. Technical Constraints

    • Supported devices/platforms
    • Offline support needs
    • Performance requirements
    • Target users

  4. Design & Styling Requirements

    • Theme support (light/dark mode)
    • Brand guidelines
    • Design system requirements
    • Responsive design needs

Device Support Matrix​

Breakpoints to Consider:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Large Desktop: > 1440px

💡 Pro Tip: Write down agreed requirements for reference throughout the interview

A - Architecture Design (20%)​

Key Components to Consider​

  1. Server (treat as black box)
  2. View (user interface)
  3. Controller (user interaction handling)
  4. Model/Client Store (data management)

Rendering Strategies​

  1. Client-Side Rendering (CSR)

    • Full JavaScript bundle
    • Good for dynamic content
    • SEO challenges

  2. Server-Side Rendering (SSR)

    • Better initial load
    • Good for SEO
    • Higher server load

  3. Static Site Generation (SSG)

    • Best performance
    • Limited dynamic content
    • Good for content-heavy sites

  4. Incremental Static Regeneration (ISR)

    • Hybrid approach
    • Balance of dynamic and static

Theming Architecture​

  1. Theme Implementation

    • CSS Variables
    • Styled-components
    • CSS-in-JS
    • CSS Modules

  2. Theme Structure

    • Colors
    • Typography
    • Spacing
    • Breakpoints
    • Component-specific themes

Design Principles​

  • Separation of concerns
  • Component modularity
  • Computation placement (client vs server)
  • Responsive design patterns

💡 Pro Tip: Draw diagrams using tools like diagrams.net or Excalidraw

D - Data Model Definition (10%)​

Data Types​

  1. Server-originated Data

    • Database-sourced
    • Shared across users/devices

  2. Client-only Data

    • Persisted state (form inputs)
    • Ephemeral state (UI state)
    • Theme preferences
    • Device/viewport information

Data Model Template​

Entity:
- Fields
- Data source
- Owner component
- Relationships
- Responsive variations

I - Interface Definition (15%)​

Server-Client APIs​

  • HTTP method
  • Endpoint path
  • Parameters
  • Response format

Client-Client APIs​

  • Function signatures
  • Event listeners
  • Props (for components)
  • Return values

Responsive Component Props​

interface ResponsiveProps {
  mobile?: React.ReactNode;
  tablet?: React.ReactNode;
  desktop?: React.ReactNode;
  breakpoints?: {
    mobile: number;
    tablet: number;
    desktop: number;
  };
}

O - Optimizations & Deep Dive (40%)​

Key Areas​

  1. Performance

    • Loading optimization
    • Rendering optimization
    • Caching strategies
    • Code splitting strategies
    • Asset optimization

  2. Responsive Design Optimizations

    • Responsive images
    • Container queries
    • CSS optimization
    • Mobile-first approach
    • Touch interactions

  3. Theme Implementation

    • Runtime theme switching
    • Prefers-color-scheme
    • CSS Variables vs CSS-in-JS
    • Performance considerations
    • Storage strategy

  4. User Experience

    • Error handling
    • Loading states
    • Animations/transitions
    • Responsive behaviors
    • Touch gestures

  5. Technical Considerations

    • Network handling
    • Accessibility (a11y)
    • Internationalization (i18n)
    • Security
    • Multi-device support
    • Progressive enhancement

Rendering Optimization Techniques​

  1. Component Level

    • Lazy loading
    • Virtualization
    • Memoization
    • Code splitting

  2. Style Level

    • Critical CSS
    • Atomic CSS
    • CSS containment
    • Container queries

  3. Asset Level

    • Image optimization
    • Font loading
    • Icon systems
    • Responsive images

Deep Dive Strategy​

  • Focus on product-critical areas
  • Highlight your technical strengths
  • Address unique challenges
  • Consider device-specific optimizations

Interview Tips​

  1. Stay organized and structured
  2. Manage time according to RADIO percentages
  3. Draw clear diagrams
  4. Write down requirements
  5. Focus on frontend aspects
  6. Be ready to adapt based on interviewer feedback
  7. Consider responsive design from the start
  8. Address theme implementation early

Remember: This framework is flexible - adapt it based on the specific question and interviewer's interests.