https://patterns.dev

Patterns.devLearn JavaScript design and performance patterns for building more powerful web applications.Patterns.dev Book About Insights Resources Feedback Read Online Interested in our next book? Learn more about Building Large-scale JavaScript Web Apps with React Improve how you architect webappsPatterns.dev is a free online resource on design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.Download eBook or PDFRead online JavaScript Patterns Patterns focused on plain Javascript and Node.js Introduction Introduction to Design Patterns Singleton Pattern Share a single global instance throughout our application Proxy Pattern Intercept and control interactions to target objects Prototype Pattern Share properties among many objects of the same type Observer Pattern Use observables to notify subscribers when an event occurs Module Pattern Split up your code into smaller, reusable pieces Mixin Pattern Add functionality to objects or classes without inheritance Mediator/Middleware Pattern Use a central mediator object to handle communication between components Flyweight Pattern Reuse existing instances when working with identical objects Factory Pattern Use a factory function in order to create objects Animating View Transitions An introduction to animating page transitions using the View Transitions API and libraries Optimize your loading sequence Learn how to optimize your loading sequence to improve how quickly your app is usable Static Import Import code that has been exported by another module Dynamic Import Import parts of your code on demand Import On Visibility Load non-critical components when they are visible in the viewport Import On Interaction Load non-critical resources when a user interacts with UI requiring it Route Based Splitting Dynamically load components based on the current route Bundle Splitting Split your code into small, reusable pieces PRPL Pattern Optimize initial load through precaching, lazy loading, and minimizing roundtrips Tree Shaking Reduce the bundle size by eliminating dead code Preload Inform the browser of critical resources before they are discovered Prefetch Fetch and cache resources that may be requested some time soon Optimize loading third-parties Reduce the performance impact third-party scripts have on your site. List Virtualization Optimize list performance with list virtualization Compressing JavaScript Reduce the time needed to transfer scripts over the network. React Logo React Patterns Patterns focused on React and Next.js Overview of React.js A UI library for building reusable user interface components Overview of Next.js Vercel's framework for hybrid React applications Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic HOC Pattern Pass reusable logic down as props to components throughout your application Render Props Pattern Pass JSX elements to components through props Hooks Pattern Use functions to reuse stateful logic among multiple components throughout the app Compound Pattern Create multiple components that work together to perform a single task Client-side Rendering Render your application's UI on the client Server-side Rendering Generate HTML to be rendered on the server in response to a user request Static Rendering Deliver pre-rendered HTML content that was generated when the site was built Incremental Static Generation Update static content after you have built your site Progressive Hydration Delay loading JavaScript for less important parts of the page Streaming Server-Side Rendering Generate HTML to be rendered on the server in response to a user request React Server Components Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle Optimize Next.js apps for the Core Web Vitals With Next.js, there are several components that can help improve Core Web Vitals metrics Vue Patterns Patterns focused on Vue.js Introduction Introduction to Vue Patterns Components Self-contained modules that couple markup (HTML), logic (JS), and styles (CSS) within them Async Components Optimize web app performance by asynchronously loading components. Composables Functions to encapsulate and reuse stateful logic among multiple components Container/Presentational Pattern Enforce separation of concerns by separating the view from the application logic Data Provider Pattern Utilize renderless components for managing and providing data Dynamic Components Dynamically switch between components with the special element Provide/Inject Have nested components access data without using props Render functions Create component templates with programmatic JavaScript Renderless components Components that don't render their own markup

Uriko ukora iki?