Improve how you
architect webapps

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.

Overview of React.js

A UI library for building reusable user interface components

Overview of Next.js

Vercel's full-stack React framework for hybrid 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

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 <component> 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

<script setup>

Compile-time syntactic sugar for using the Composition API

State Management

Manage application level state between components