🍙
Frontend Dev Guide
  • ⚡Read Me First
  • 📖Frontend Interview Guide
    • 💬Technical Behavior
      • Frontend Interview Questions
      • Answering Interview Questions
    • 💻Coding Challenges
      • Frontend Code Challenges
      • Data Structures and Algorithms
        • Binary Search Tree
        • Blind 75 and Neetcode
      • Take Home Assignments
    • 🕸️Frontend System Design
      • What is Frontend System Design?
        • Parts of the Frontend System Design
          • 1) Gather Requirements
          • 2) Architecture/High Level Design
          • 3) Data Model and Flow
          • 4) API
          • 5) Optimization and Deep Dive
        • Example: Design Spotify
  • 🔦Frontend Deep Dive
    • 🥞Microfrontends
    • 🧩Fundmentals
      • 🔵Cross Browser Compatibility
    • 📚Frameworks/Libraries
      • 🟢Vue
      • 🔵React
        • Waterfalls, Unidirectional Data Flow
        • React Server Components
    • 🏁Patterns
      • 🟡Design Patterns
      • ⚪Rendering Patterns
      • 🟣Performance Patterns
    • 🔋Performance
      • ⚪Network Optimizations
      • 🟠Build Optimizations
      • 🟣Asset Optimizations
      • 🔵Core Web Vitals
  • 🐍Python
    • ⚪Django
      • Classbased Views (CBV)
      • Cross-Site Request Forgery (CSRF)
  • 🗻Working Life
    • 🟣Technical Communication
  • 📚Glossary
  • 💡Resources
  • 👩‍💻About Me
Powered by GitBook
On this page
  1. Frontend Deep Dive

Patterns

Learn about the patterns used for architecting web apps

PreviousReact Server ComponentsNextDesign Patterns

Last updated 2 years ago

Types of Patterns

According tothere are three major categories of patterns:

  1. Design Patterns

  2. Rendering Patterns

  3. Performance Patterns

Design Patterns

These are a set of best practices and standard solutions for common design problems that occur in frontend web apps. Examples of design patterns include the use of a grid layout for consistent spacing, the use of a navigation bar for easy navigation, and the use of a modal dialog for displaying important information. These patterns are used to create a consistent and user-friendly interface for the app.

Rendering Patterns

These are patterns that dictate how a web app is rendered on the client side. Examples of rendering patterns include server-side rendering, client-side rendering, and a combination of both. These patterns are used to improve the performance of the app and make it more responsive to user interactions.

Performance Patterns

These are patterns that help to improve the performance of a web app. Examples of performance patterns include lazy loading, minification, and caching. These patterns are used to reduce the amount of data that needs to be loaded, improve the speed of the app, and reduce the amount of memory used. These patterns can help to improve the overall user experience of the app.

🔦
🏁
patterns.dev