Please enable JavaScript.

Coggle requires JavaScript to display documents.

Front End System Design - Coggle Diagram

- - - - (as a concept)
        
        Load time
        
        Subsequent renders
        
        Initial load
        
        Rendering
        
        Motion smoothness
        
        Transitions
        
        Animations
        
        How responsive to the user does the UI feel?
        
        State management
        
        Avoid unnecessary re-renders
        
        Redux
        
        Context?
        
        Memos
        
        2 more items...
        
        FLUX pattern?
      - Scalability
        
        Network performance
        
        What do do about it
        
        Efficient resource loading
        
        Styles
        
        Images
        
        Scripts
        
        Efficient API calls
        
        Use pagination
        
        Cache responses
        
        Browser caching?
        
        Service workers?
        
        Other ways?
        
        Server side caching?
        
        Reduce payload size
        
        Reduce latency?
        
        Throughput?
        
        CDNs to serve static assets (images, scripts, CSS)
        
        Reduce load time
        
        Initial load time
        
        Dynamic content loading
        
        2 more items...
        
        Improve availability
        
        Why does this matter?
        
        Responsiveness (slow API calls or resource loading can make the UI feel sluggish to interact with)
        
        This affects user engagement
        
        Scalability
        
        More users = more API requests and resource loads
        
        Why does this matter?
        
        1 more item...
        
        Future growth
        
        Adaptability
        
        App can grow with user base
        
        Increased traffic
        
        New features
        
        State management
        
        More instances of a component = more changes to re-render = more load on browser = more jank = users frustrated
    - - Consistent performance
        
        Smooth UX regardless of network variability
        
        how?
        
        Error handling
        
        Fallbacks
        
        Making sure errors don't cause the system to fail in a way that's obvious to users, if possible?
        
        Fault tolerance?
- - - - Mind maps
        
        Coggle (tree mind map? What is this called?)
        
        Diagrams
        
        need to find good diagram software
      - Design patterns (concepts that solve known problems)
        
        UX design patterns
        
        Common UI elements
        
        Software design patterns
        
        DSA?
        
        Singleton, etc.?
        
        Component structure
        
        Component hierarchy
        
        State management
        
        Modularity
        
        Data flow
        
        Data fetching
        
        how data's fetched from the back end
        
        how it propagates throughout the application
        
        where data is stored
        
        State synchronization
        
        avoiding unnecessary re-renders