Improve how you architect webapps

Introduction to Design Patterns

Share a single global instance throughout our application

Intercept and control interactions to target objects

Make data available to multiple child components

Share properties among many objects of the same type

Enforce separation of concerns by separating the view from the application logic

Use observables to notify subscribers when an event occurs

Split up your code into smaller, reusable pieces

Add functionality to objects or classes without inheritance

Use a central mediator object to handle communication between components

Pass reusable logic down as props to components throughout your application

Pass JSX elements to components through props

Use functions to reuse stateful logic among multiple components throughout the app

Reuse existing instances when working with identical objects

Use a factory function in order to create objects

Create multiple components that work together to perform a single task

Decouple methods that execute tasks by sending commands to a commander

Learn how to optimize your loading sequence to improve how quickly your app is usable

Import code that has been exported by another module

Import parts of your code on demand

Load non-critical components when they are visible in the viewport

Load non-critical resources when a user interacts with UI requiring it

Dynamically load components based on the current route

Split your code into small, reusable pieces

Optimize initial load through precaching, lazy loading, and minimizing roundtrips

Reduce the bundle size by eliminating dead code

Inform the browser of critical resources before they are discovered

Fetch and cache resources that may be requested some time soon

Reduce the performance impact third-party scripts have on your site.

Optimize list performance with list virtualization

Reduce the time needed to transfer scripts over the network.

An introduction to Rendering Patterns

A UI library for building reusable user interface components

Render your application's UI on the client

Generate HTML to be rendered on the server in response to a user request

Deliver pre-rendered HTML content that was generated when the site was built

Update static content after you have built your site

Delay loading JavaScript for less important parts of the page

Generate HTML to be rendered on the server in response to a user request

Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle

How to use combine streaming server-side rendering with a new approach to hydration, selective hydration

The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages

An introduction to animating page transitions using the View Transitions API and libraries