Frontend System Design Quick Notes (WIP)

FE-system-design-quick-notes.md

System Design

Requirements

Functional

Non functional

• Performance
• Accessibility
• Compatibility
• Localization & Internationalization
• Maintainability
• Scalability
• Security
• Availability

Performance

• TTFB (Time to First Byte)
• TTFP (Time to First Pixel)
• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)
• CLS (Cummulative Layout Shift)
• TIFC (Time to First Complete)
• FID (First Input Delay)

Accessibility

• WCAG 2.1 AA (text contrast, keyboard navigation & screen reader support)
• Keyboard navigation success rate
• Screen reader score (NVDA, JAWS)
• Color contrast (4.5:1 for normal text, 3:1 for large text)
• Alt text coverage
• Form & ARIA score

Compatibility

• All devices should work
• CSS and JS compatibility index

Localization & Internationalization

• RTL
• internationalization (i18n)
• i18next, react-intl, vue-i18n (APIs: (e.g., t('key')))

Maintainability

• Code modularity
• Documentation
• Testing
• Error handling and monitoring

Rendering in Browser

1. HTML Parsing - HTML parsing Builds the (Document Object Model) DOM from HTML
2. CSS parsing - Creates the (CSS Object Model) CSSOM from the stylesheets
3. Render tree construction - Combines DOM and CSSOM, excluding hidden elements
4. Layout calculation - Determines positions and sizes of elements
5. Painting - Fills in pixels, rendering texts, colors, and images
6. Compositing - Assembles layers and prepares final screen output (animations, overlays, scrolling, etc)

States in FE System

• Local Ul state - For isolated, component-specific data (e.g., toggles, form inputs)
  • React useState, Vue reactive
  • Excessive local state can reduce reusability
• Global application state - When multiple components need access to shared data (e.g., user auth, theme)
  • Redux, Zustand, Vuex, React Context
  • Overuse can lead to tightly coupled logic
• Server state - For handling data from APIs or external sources (e.g., products, messages)
  • React Query, SWR, Apollo
  • Must handle async data and loading states correctly
• Session and persistent state - When state must persist across sessions (e.g., auth tokens, user preferences)
  • localStorage, sessionStorage, cookies
  • Needs manual sync and secure handling

Challenges & Solutions

Concurrency handling

• Use locking mechanisms (e.g., mutex, semaphores).

• Implement optimistic concurrency control.

• Apply transactional consistency models.

Ensuring consistency in distributed systems

• Use consensus algorithms (Raft, Paxos).

• Implement event-driven architectures.

• Employ distributed caching strategies.

Fault tolerance and recovery

• Apply replication and checkpointing.

• Use distributed storage solutions.

• Implement failover mechanisms.

Managing stateful interactions and transitions

• Utilize finite state machines (FSM).

• Apply event sourcing.

• Use structured state modeling.

Complexity and maintainability issues

• Adopt modular architectures.

• Use state management libraries (Redux, Zustand).

• Leverage microservices for scalability.

General

• Modular state slices
• Async state handling (e.g., with React Query)
• Memoized selectors (reselect)
• Persisted state
• Event-driven updates

Network Performance Optimization

HTTP optimization techniques

Feature	HTTP/1.1	HTTP/2	HTTP/3
Request handling	Sequential over a single connection	Multiplexing (multiple requests on the same connection)	Multiplexing with QUIC (integrated trans-port and security)
Latency	High due to head-of-line blocking	Reduced latency due to multiplexing	Further reduced latency, especially in high-loss or high-congestion networks
Connection overhead	High (multiple connections required)	Low (uses fewer connections)	Very low, optimized for real-time communication
Protocol features	Basic transport mechanism	Stream prioritization, header compression	Built-in encryption, faster connection setup
Best for	Simple web applications with low traffic	Websites with many assets or high concurrency	Real-time applications, mobile, stream-ing, or high-latency networks
Applications	Simple, low-traffic websites, basic applications	Websites with many assets (e-commerce, media-heavy sites)	Streaming services, mobile apps, real-time communication platforms

• Connection Keep-Alive
• Content compression

Caching strategies for faster load times

• Browser caching
  • Cache-Control, Expires, and ETag
  • Service workers take caching further by intercepting requests and serving pre-cached assets locally, enhancing speed and enabling offline support
• Network caching techniques
  • CDNs
  • Reverse proxies
  • Edge servers
  • Caches managed by ISPs

Optimizing network requests

• Reducing DNS lookups - use dns-prefetch
• Using prefetch, preload, and preconnect
  • prefetch: fetch resources likely needed in the near future.
  • preload: critical for the current navigation.
  • preconnect: early connections to third-party origins.

Synchronous and asynchronous resource loading

• async download parallel, execute immediately, order not guaranteed
• defer download parallel, execute after HTML parsing, in-order

Other

• Appropriate API architecture: REST, GraphQL, or gRPC
• Mobile optimization: responsive designs, minimizing resource-heavy operations, image size optimization
• Caching strategies: browser, CDN, and server-side caching
• Performance monitoring: dev tools, sentry, vercel performance

Optimizing Media Rendering for Faster Frontends

• Choosing the right image formats: WebP (lossy, lossless), AVIF (better), SVGs (infinite scalability, lightweight, CSS-JS manipulations possible)
• srcset attribute - browsers select image resolution based on the device’s screen size, save bandwidth, faster loading
• loading="lazy" - deferring the loading of offscreen images until the user scrolls near them.