Javascript

Information

If you are a web developer or a web enthusiast, you have probably heard of JavaScript! Or why else would you be here?. But what exactly is JavaScript?!, and why is it so dominant in web and application development?! Suppose you had the ability to create a web page, game or application that can change its appearance based on the time of day, the weather, or the user’s preferences. Think of how amazing it would be if you could add interactive elements such as buttons, forms, sliders, or quizzes to your web page without reloading it. Envision what it would be like to create stunning animations and graphics that make your web page stand out from the crowd. JavaScript is the one true king of the web, and it can work wonders with minimal code. Whether you want to create dynamic websites, interactive games, or powerful apps, JavaScript can make it happen. In this eye-opening document, we will give you a brief overview of JavaScript, its history, its features, and its applications. You will learn how JavaScript can make your web pages more dynamic and interactive, and how it can help you create stunning web applications that run in the browser. Prepare to unleash the power of JavaScript with this mdx documentation. You will learn everything you need to create dynamic and interactive web applications from scratch. Whether you are a beginner or a seasoned coder, this guide will take your skills to the next level.

Note

This document is designed to serve as a scholarly compendium on the vast landscape of JavaScript and its associated technologies. We begin by exploring design, layout and CSS, the fundamental language of web design aesthetics, then transition to NodeJS, which facilitates server-side scripting. Our exploration extends to React Native, a framework for crafting mobile applications that seamlessly integrate with multiple platforms. This markdown not only elucidates each technology’s unique contributions but also examines their synergies within the broader context of modern software development. Aimed at both neophytes and seasoned developers, this guide endeavors to deepen your understanding of how these diverse tools collectively enhance and refine the art of programming.

Design

Would you like to learn how to write JavaScript code that is clean, clear, and consistent? Do you have a passion and desire to solve common problems in software design with ease and elegance? How would you like to master JavaScript and dazzle your peers and clients with your brilliant code? Did any of these questions resonate with you? If that rings a bell, you’ve hit the jackpot by coming to this resource! We will introduce you to the power and beauty of design patterns and how they can enhance and transform your work. Design patterns are reusable solutions that help you organize your code, simplify your logic, and communicate your intent. They are like recipes or templates that you can use to cook up delicious and nutritious code for your app. You will learn about some of the most common and useful design patterns in JavaScript, such as creational, structural, and behavioral patterns. You will also see some real-world examples of how these patterns can make your code more efficient, maintainable, and readable. By the end of this documentation, you will have a better understanding of design within JavaScript and how to apply it to your own projects. And as a bonus, KBVE will also share with you some of the best resources and tools to learn more about design patterns and practice them in your own code. So do not miss this opportunity to become a better JavaScript developer! Read on, discover the secrets of design patterns and experience the magic and potential of design patterns for yourself below.

Design Patterns

The theory of javascript design patterns can be classified into three major categories, namely creational, structural, and behavioral patterns. These classes differ from each other in various distinctions and aspects, such as how complex and elaborate the pattern is, the level of detail it offers to the developer and end-user, and the scope of its impact on the system being designed. Understanding these divisions can help developers choose the most suitable design pattern for their specific needs and goals within the application, interface or project.

Creational Design Patterns

Creational patterns enable a more adaptable and reusable code by offering a flexible framework for creating objects or classes. In this nature, the design shields the users from the complex construction process and streamline their interaction with the classes. Thus, the pattern controls the user-class interaction and save the developers from handling complex construction.

Factories, builders and singletons are the three core concepts of creational design pattern.

Abstract Factory Design Pattern

The Abstract Factory design pattern is a fundamental component of creational patterns that offers a way to encapsulate a group of individual factories with a common theme without specifying their concrete classes. This pattern is especially useful in systems that need to be independent of how their products are created, composed, and represented.

Purpose

The Abstract Factory pattern is designed to provide an interface for creating families of related or dependent objects. It allows a system to be independent of how its products are created, composed, or represented. This pattern is beneficial for systems that require the flexibility to deal with diverse objects sharing a thematic or functional link.

Implementation

The pattern involves several key components:

• Abstract Factory: An interface that declares a set of methods for creating each of the abstract products.
• Concrete Factory: Implements the abstract factory methods to create concrete products.
• Abstract Product: Declares an interface for a type of product object.
• Concrete Product: Implements the abstract product interface; objects created through a factory.
• Client: Uses only interfaces declared by Abstract Factory and Abstract Product classes.

Scenario and Example

Consider a scenario where a software developer is tasked with creating a cross-platform application that needs to generate various user interface components like buttons, modals, forms, text boxes, and menus. By employing the Abstract Factory, the developer can define an interface for creating these UI elements which can then be implemented by different concrete factories for specific platforms (e.g., Windows, Android, iOS, MacOS, Linux).

Tip

Simplified JavaScript example illustrating this concept:

// Abstract Factory
class GUIFactory {
  createButton() {}
  createTextbox() {}
}

// Concrete Factory for Windows
class WindowsFactory extends GUIFactory {
  createButton() {
    return new WindowsButton();
  }
  createTextbox() {
    return new WindowsTextbox();
  }
}

// Concrete Factory for MacOS
class MacOSFactory extends GUIFactory {
  createButton() {
    return new MacOSButton();
  }
  createTextbox() {
    return new MacOSTextbox();
  }
}

// Abstract Products
class Button {
  render() {}
}
class Textbox {
  render() {}
}

// Concrete Products for Windows
class WindowsButton extends Button {
  render() {
    console.log('Rendering Windows button');
  }
}
class WindowsTextbox extends Textbox {
  render() {
    console.log('Rendering Windows textbox');
  }
}

// Concrete Products for MacOS
class MacOSButton extends Button {
  render() {
    console.log('Rendering MacOS button');
  }
}
class MacOSTextbox extends Textbox {
  render() {
    console.log('Rendering MacOS textbox');
  }
}

// Client code
function renderUI(factory) {
  const button = factory.createButton();
  button.render();
  const textbox = factory.createTextbox();
  textbox.render();
}

const windowsFactory = new WindowsFactory();
const macFactory = new MacOSFactory();

renderUI(windowsFactory);
renderUI(macFactory);

Abstract Factory Pattern Quick Tip:

Use the Abstract Factory pattern when you need to ensure that your application can create and manage families of related or dependent products, or when you want to provide a library of products without exposing the implementation details. This pattern not only fosters system scalability and interchangeability but also promotes consistency among products.

Advantages

• Flexibility: Allows the creation of sets of related products without specifying their concrete classes.
• Scalability: Supports adding new kinds of products without disturbing existing client code.

Caution

Warning: Abstract Factory Pattern Use

While the Abstract Factory pattern is powerful for promoting consistency among products and managing families of related objects, be cautious of its complexity. Overusing the pattern can lead to overly complicated designs that might be difficult to understand and maintain. It’s particularly important to assess whether the benefits of abstracting factory creation truly outweigh the additional overhead. This pattern is most beneficial when your system genuinely requires a diverse range of objects with shared characteristics or when you need to enforce a particular set of design constraints across various product families.

Asbtract Factory Tutorial

1. Define Abstract Factory Interface:

   Create an interface for the abstract factory. This interface will declare methods for creating each type of vehicle.

   class VehicleFactory {
   createCar() {}
   createBoat() {}
   }

2. Create Concrete Factory Classes:

   Implement concrete factories that extend the abstract factory interface. Each factory will provide specific implementations for creating vehicles suitable for its environment.

       class LandVehicleFactory extends VehicleFactory {
           createCar() {
               return new Sedan();
           }
           createBoat() {
               return new Canoe(); // Just for demonstration, usually wouldn't be in LandVehicleFactory
           }
       }
   
       class WaterVehicleFactory extends VehicleFactory {
           createCar() {
               return new AmphibiousCar();
           }
           createBoat() {
               return new SpeedBoat();
           }
       }

3. Define Abstract Product Interfaces:

   Define interfaces for each type of vehicle. These interfaces will include methods that all concrete vehicle products must implement.

   class Car {
       drive() {}
   }
   
   class Boat {
       sail() {}
   }

4. Create Concrete Product Classes:

   Implement the product interfaces with concrete classes. These classes will define the specific characteristics of vehicles.

   class Sedan extends Car {
       drive() {
           console.log("Driving a sedan on roads");
       }
   }
   
   class Canoe extends Boat {
       sail() {
           console.log("Canoeing in calm waters");
       }
   }
   
   class AmphibiousCar extends Car {
       drive() {
           console.log("Driving an amphibious car on land and water");
       }
   }
   
   class SpeedBoat extends Boat {
       sail() {
           console.log("Speeding through water with a speedboat");
       }
   }

5. Implement Client Code:

   Write the client code that utilizes the factories to create objects. The client should interact with these objects through their abstract interfaces.

   function testVehicle(factory) {
       const car = factory.createCar();
       car.drive();
       const boat = factory.createBoat();
       boat.sail();
   }
   
   const landFactory = new LandVehicleFactory();
   const waterFactory = new WaterVehicleFactory();
   
   testVehicle(landFactory);
   testVehicle(waterFactory);

6. Test Your Implementation: Test the implementation to confirm that the correct vehicle types are being created and that they behave as intended, ensuring that the factory logic correctly encapsulates the creation details.

   This example illustrates how the Abstract Factory pattern can be applied to a vehicle manufacturing scenario, facilitating the creation of products that are tailored for specific environmental conditions without exposing the creation logic to the client code.

---

Builder

The Builder design pattern is a creational pattern that separates the construction of a complex object from its representation. By doing so, the same construction process can create different representations. This pattern is particularly useful when an object must be created in multiple steps or with various configurations.

Purpose

The primary purpose of the Builder pattern is to allow the step-by-step construction of complex objects and to simplify the code by separating the construction of these objects from their class. This pattern is ideal for situations where multiple versions of an object need to be created, and a clear method of doing so is necessary.

Implementation

The Builder pattern involves three key components:

• Builder: This is an interface that defines all the steps required to build a part of the object.
• Concrete Builder: Implements the builder interface and provides an implementation for those steps. It keeps track of the representation it creates and provides an interface for retrieving the product.
• Director: Takes a builder instance and executes the necessary operations to produce a part of the object. The director knows which builder to use to get the desired object configuration.
• Product: The complex object that is being built. The builder returns the product as a final step.

Tip

Example of Builder pattern implemented in JavaScript:

class CarBuilder {
  constructor() {
    this.car = {};
  }

  addEngine(engine) {
    this.car.engine = engine;
    return this;
  }

  addWheels(wheels) {
    this.car.wheels = wheels;
    return this;
  }

  addDoors(doors) {
    this.car.doors = doors;
    return this;
  }

  build() {
    return this.car;
  }
}

// Director function to construct a sports car
function buildSportsCar(builder) {
  return builder.addEngine('V8').addWheels(4).addDoors(2).build();
}

// Usage
const builder = new CarBuilder();
const sportsCar = buildSportsCar(builder);
console.log(sportsCar);

Advantages

• Flexibility in Object Construction: Builders can construct objects step-by-step, vary the process based on the situation, and easily create different types of objects with the same construction code.
• Encapsulation and Construction Control: The product’s internal representation is protected from the client until it is fully built. This encapsulation helps in maintaining the integrity of the constructed object.

When to Use

Use the Builder pattern when constructing a complex object with multiple optional and mandatory fields, or when an object must be assembled in multiple steps or configurations. It is also beneficial when you need a clear way to create different representations of the same class.

The Builder design pattern greatly enhances the modularity and readability of code, making it easier to write, maintain, and modify code where complex objects are involved.

Singleton

Singleton is a design pattern that falls under the creational category, which concerns itself with the best ways to instantiate objects. The core principle of the Singleton pattern is to ensure that a class has only one instance and to provide a global point of access to that instance. This pattern is particularly useful when exactly one object is needed to coordinate actions across the system.

The implementation of the Singleton pattern involves creating a class with a method that creates a new instance of the class if one does not already exist. If an instance already exists, it simply returns a reference to that object. To ensure that no other instances can be created, the constructor of the class is made private.

A typical use of the Singleton pattern is in managing a connection to a database or the settings in a configuration file. By using a Singleton, multiple parts of an application can share a single connection or configuration object without the need to pass around a reference throughout the program.

Singletons also help in conserving system resources, as they avoid constant creation and destruction of objects when a single object is sufficient. However, care must be taken with Singletons as they can introduce global state into an application, which can complicate testing and limit flexibility.

Overall, the Singleton pattern provides an elegant solution to ensuring a class has only one instance while offering a global point of access, thereby contributing to a cleaner and more manageable codebase.

Tip

JavaScript Example of Singleton

class Database {
  static instance = null;

  constructor() {
    if (Database.instance) {
      return Database.instance;
    }
    Database.instance = this;
    this.connection = 'Connection established'; // Simulating a database connection
  }

  connect() {
    return this.connection;
  }
}

// Usage
const db1 = new Database();
const db2 = new Database();

console.log(db1 === db2); // Output: true
console.log(db1.connect()); // Output: Connection established

In this example, the Database class is designed such that it can only have one instance. When an instance is created, it is stored in a static property. Any subsequent attempts to create new instances will return the original instance, ensuring that there is only one Database instance throughout the application.

Singleton Pattern Quick Tip:

When using the Singleton pattern, remember that it’s best applied in scenarios where a single shared resource, like a database or configuration settings, needs to be managed consistently across an application. However, be cautious of its impact on application design, as it can introduce a global state that might complicate testing and make the code less modular. Always consider if the Singleton pattern is the best fit for your use case, particularly in environments where instance management is critical.

Structural Design Patterns

Structural Design Patterns, SDP, are concerned with how objects and classes are composed to form larger structures.

They help to ensure that changes in one part of the system do not affect other parts.

Structural Design Patterns (SDP) play a pivotal role in software architecture by focusing on how objects and classes can be assembled into larger and more complex structures. These patterns aim to improve the design of a system by ensuring that the individual components can be combined in such a way that maintains both the individual integrity and the overall flexibility of the system.

SDP are instrumental in simplifying the structure by identifying the relationships between the entities. This identification helps in facilitating better organization of the system components, making it easier to understand, maintain, and scale. Additionally, these patterns help in ensuring that changes in one part of a system do not adversely affect other parts, which is crucial for the stability and robustness of the system.

Tip

Examples of Structural Design Patterns include the Adapter pattern, which allows interfaces of different classes to work together despite incompatible interfaces; the Composite pattern, which enables the composition of objects into tree structures to represent part-whole hierarchies; and the Facade pattern, which provides a simplified interface to a complex subsystem, thereby reducing dependencies and minimizing the impact of changes.

class OldInterface {
  constructor() {
    this.request = () => 'Old Interface: Processing request';
  }
}

class NewInterface {
  constructor() {
    this.specificRequest = () =>
      'New Interface: Processing specific request';
  }
}

class InterfaceAdapter {
  constructor(newInterface) {
    this.newInterface = newInterface;
  }

  request() {
    return this.newInterface.specificRequest();
  }
}

// Usage
const oldInterface = new OldInterface();
console.log(oldInterface.request()); // Output: Old Interface: Processing request

const newInterface = new NewInterface();
const adapter = new InterfaceAdapter(newInterface);
console.log(adapter.request()); // Output: New Interface: Processing specific request

In this example, the InterfaceAdapter class adapts the NewInterface so it can be used where the OldInterface is expected. This is particularly useful in scenarios where parts of the software need to be upgraded or changed without disrupting existing code.

Structural Design Pattern Quick Tip: Adapter Pattern

The Adapter pattern is invaluable when integrating new components into existing systems where interfaces do not match. It acts as a bridge, allowing different parts of a system to communicate seamlessly without requiring changes to their actual code. Use the Adapter pattern to resolve compatibility issues while maintaining the integrity of the original system. This pattern is a testament to the flexibility and adaptability of software, ensuring longevity and scalability.

By using these patterns, developers can create systems that are more modular and easier to manage, with well-defined interconnections between different components. Structural Design Patterns are essential for developers looking to build complex systems that require high levels of inter-component flexibility and maintainability.

Behavioral Design Patterns

Behavioral Design Patterns, BDP, define the communication between objects and how they interact with each other.

They help to ensure that objects work together in a coordinated manner.

    Behavioral Design Patterns (BDP) are crucial in the realm of software engineering, specifically focusing on improving the communication and interaction between objects in software systems. These patterns facilitate a smooth and efficient orchestration of behaviors among different objects, enabling them to perform their tasks in a coordinated and cooperative manner.

    These patterns are distinguished by their ability to distribute responsibilities among objects, which helps in reducing the complexity of the code and increasing its flexibility. By defining standard communication protocols, BDP ensure that the objects can interact without being tightly coupled, thereby enhancing modularity and facilitating future scalability and maintenance.

Examples of Behavioral Design Patterns include the Observer pattern, which allows objects to be notified of changes in other objects without creating a direct dependency; the Strategy pattern, which enables the selection of an algorithm’s behavior at runtime; and the State pattern, which allows an object to alter its behavior when its internal state changes.

    Implementing these patterns can lead to more dynamic and adaptable software, with components that are easier to understand, extend, or modify. Behavioral Design Patterns are indispensable for developers aiming to create interactive systems that are robust, scalable, and maintainable.

---

NodeJS

Node.js is a dynamic open-source runtime environment that brings JavaScript to the server side. Running on Google’s powerful V8 engine, it allows for both client and server-side application development using JavaScript. This is streamlined by npm, Node’s package manager, which hosts a vast repository of open-source libraries.

Often simply called “Node,” this environment was created to extend the efficient and event-driven qualities of JavaScript beyond web browsers. Node.js executes code using the V8 engine and is designed around an event-driven, non-blocking I/O model that not only boosts efficiency but is also perfect for scalable and real-time applications.

Node.js really shines by bridging the gap between front-end and back-end development, allowing developers to work with JavaScript across the board. This unity simplifies the development process and makes it more cohesive. Npm, Node’s package manager, plays a critical role by offering a wealth of open-source libraries that help developers quickly construct applications using modules shared by the community.

Node’s utility extends beyond typical web applications. It’s also used for developing command-line tools, chat applications, data-intensive real-time applications, and even for IoT devices. With its continuous development, strong community support, and adaptability to modern development needs, Node.js is a prime example of how server-side development has transformed in the modern era.

NodeJS Installation

Getting Started with Node.js Installation

Node.js is a powerful JavaScript runtime built on Chrome’s V8 JavaScript engine. It allows developers to write server-side applications in JavaScript. Installing Node.js is the first step towards using its rich ecosystem for developing web applications, REST APIs, and more.

Choosing the Right NodeJS Version

When planning to install Node.js, you have two main versions to consider:

• LTS (Long-Term Support): This version is best for most users, especially in production environments, because it receives security and stability updates for an extended period.
• Current: This version includes the latest features and updates. It’s suitable for developers who want to experiment with the newest capabilities of Node.js but might be less stable than the LTS version.

Using the LTS version ensures that you are working on a stable and well-supported platform, which is crucial for application stability and security.

Importance of Node.js Versions

Node.js versions are important because of the following reasons:

• API Stability: Different versions of Node.js may have varying API compatibilities. LTS versions guarantee backward compatibility with older stable APIs.
• Security: Newer versions receive security updates that protect your application from vulnerabilities.
• Features: Newer versions typically have new features that are not available or are backported to older versions. Using the current version allows developers to utilize the latest features.

Version Management

For managing multiple Node.js versions on a single machine, tools like nvm (Node Version Manager) for Unix-based systems or nvm-windows for Windows are highly recommended. These tools allow you to switch between different Node.js versions easily, which is helpful when working on multiple projects that require different versions.

Here is how you can install nvm:

# Install nvm and use it to install Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
nvm install node # "node" is an alias for the latest version
nvm use node

Ubuntu NodeJS Install

1. For Debian-based distributions like Ubuntu, Node.js can be installed via the package manager. First, update your package repository:

   sudo apt-get update

2. Install Node.js:

   sudo apt-get install nodejs
   sudo apt-get install npm

3. Verify the installation by typing node -v and npm -v in the terminal.

Windows NodeJS Install

1. Download the Windows installer from the official Node.js website: Node.js

2. Run the installer (.msi) and follow the prompts to set up Node.js.

   Make sure to include the installation of npm (Node Package Manager), which comes bundled with Node.js.

3. After installation, open the Command Prompt and type node -v to verify the installation.

   The version of Node.js should appear.

WSL

You can choose to install NodeJS in your WSL instance! In that case, follow the Ubuntu tutorial above.

MacOS NodeJS Install

Option A: Brew Install NVM

brew install nvm

Option B: Brew Install Node (directly)

1. You can install Node.js via the package from the Node.js website or use a package manager like Homebrew.

   To install with Homebrew:

   brew install node

2. Once installed, open a terminal window and type node -v to check the installed version.

---

Bun

Note

Bun is a batteries-included runtime engine that bundles, transpiles, installs and runs Javascript / typescript with a task runner.

    Bun is a modern JavaScript and TypeScript runtime, similar to Node.js but designed to be significantly faster and more efficient. It integrates several functionalities such as bundling, transpiling, package management, and running JavaScript/TypeScript code. Bun is optimized for performance and aims to streamline the development process by combining multiple tools into one comprehensive package.

Key Highlights of Bun

Essential Features of Bun.

Bundling

Bun comes with a built-in bundler that efficiently packages your JavaScript or TypeScript files into a single file, ready for production. This helps in reducing load times and improving performance by minimizing the number of server requests.

Transpiling

It supports on-the-fly transpilation of modern JavaScript and TypeScript, allowing developers to use the latest language features without worrying about browser compatibility.

Package Management

Bun includes a fast package manager that can install dependencies up to three times faster than npm or Yarn. It directly handles dependency resolution and integrates seamlessly with the broader npm ecosystem.

Task Running

Beyond running scripts, Bun can be used as a task runner, automating routine development tasks like minification, compilation, and testing, much like Gulp or Grunt.

Speed and Performance

One of the standout features of Bun is its focus on performance. Built on Zig, a language known for its speed and low overhead, Bun is engineered to execute JavaScript code very quickly, competing directly with established runtimes like Node.js and Deno.

Modern Syntax Support

Bun automatically supports modern JavaScript and TypeScript syntax without the need for additional plugins or configurations. This feature ensures developers can immediately take advantage of the latest language improvements and coding techniques.

Bun Install

Bun can be installed on MacOS, Linux, and Windows (via WSL) using a simple command-line interface (CLI). To install Bun, you can run the following command in your terminal: curl https://bun.sh/install | bash. Alternatively, MacOS and Linux users can install Bun using Homebrew. Start by adding Bun to your Homebrew with brew tap oven-sh/bun, then install it by running brew install bun.

Note: Bun CLI Install

CLI for MacOS, Linux and Windows (through WSL)

curl https://bun.sh/install | bash

Homebrew for MacOS / Linux

brew tap oven-sh/bun
brew install bun

Tip: Installation Verification

After installing, verify your Bun installation by running the command below in your terminal: shell bun --version This command will display the installed version of Bun, confirming a successful installation.

Bun Docker

Integrating Bun into a Docker environment provides a robust and scalable solution for deploying JavaScript and TypeScript applications. Docker containers offer an isolated, consistent environment for applications, ensuring uniform operation across different deployment locations. Developers gain significant advantages from Docker’s encapsulation features combined with Bun’s impressive performance capabilities. Such a setup promotes easier version control, dependency management, and testing. Leveraging Docker with Bun enhances the development to production workflow, minimizing discrepancies between environments and reducing deployment conflicts. The abstraction layer simplifies configuration processes and boosts overall deployment efficiency and reliability.

Note: Bun Docker CLI

To utilize Bun within Docker, use the oven/bun image. Execute Bun commands using the following single command: shell docker run --rm oven/bun --init --ulimit memlock=-1:-1 --$command

Bun DockerFile

The Dockerfile sets up a more secure and structured environment for a Bun application. It ensures that all files are neatly organized in a specific working directory (/app), dependencies are installed there, and the application is exposed on port 3000. In addition, the DockerFile example below, addresses security best practices by running the application as a non-root user, which can help mitigate potential risks in production environments.

Note: Bun Dockerfile Example

# Use the latest oven/bun image
FROM oven/bun:latest

# Set the working directory in the Docker image
WORKDIR /app

# Copy necessary files to the working directory
COPY package.json ./
COPY bun.lockb ./
COPY src ./

# Install dependencies using Bun
RUN bun install

# Expose port 3000 for the application
EXPOSE 3000

# Create a new user to avoid running the app as root for security reasons
RUN adduser --disabled-password --gecos "" appuser
USER appuser

# Command to run the application
CMD ["bun", "src/index.js"]

• Working Directory: Ensure the WORKDIR is set to /app. This is crucial as all operations thereafter are based on this directory.
• Port Configuration: Verify that the port 3000 is appropriate for your application. Adjust if a different port is required.
• Application Entry Point: Confirm that index.js is the correct entry point for your application. This should be the main file where your app starts execution.

Bun Upgrade

To update Bun to the latest stable version, run the command bun upgrade in your terminal. If you want to experiment with the newest features, you can install the Canary version by using the command bun upgrade —canary. This will download and apply the latest experimental version available.

Tips: Quick Bun Upgrade Command

Latest Version

bun upgrade

Canary Version

bun upgrade --canary

Bun Cheatsheet

This Bun Cheatsheet provides a concise overview of the most commonly used commands in the Bun toolkit. The sheet is designed to serve as a quick reference guide, helping developers efficiently navigate through Bun’s capabilities. Whether you’re installing packages, running scripts, or setting up projects, this cheatsheet can help streamline your workflow with Bun.

Command	Description	Command Example	Note
Bun Run	This will execute the script (Javascript / Typescript) within the runtime engine.	bun run	This should replace npm run with bun run.
Bun Clean	To remove the cache:	bun run clean	-
Bun Hot	Bun will live reload the application, similar to file watchers like nodemon.	bun run --hot index.ts	-
Bun Dependencies Install	This will install the dependencies for the application using an extremely fast npm-compatible package manager.	bun install	This should replace yarn install or npm install with bun install.

Bun Flags

Flag	Description
—npm	Use npm for tasks & install
—yarn	Use yarn for tasks & install
—pnpm	Use pnpm for tasks & install
—force	Overwrite existing files
—no-install	Skip installing node_modules & tasks
—no-git	Don’t initialize a git repository
—open	Start & open in-browser after finish

---

React

React Three Fiber

React Three Fiber (R3F) is a React renderer for Three.js, a popular 3D library. R3F brings the power of React’s declarative component structure to Three.js applications, making it easier to build and manage complex 3D scenes. By integrating the two, developers can leverage React’s state management and component lifecycle with Three.js’s 3D rendering capabilities.

React Unity

The main library is located at React Unity WebGL

React Unity Install

• Install via Package Manager

•       yarn add react-unity-webgl

• For NPM:

      npm add react-unity-webgl

React Unity Component

• The simple way to render the entity will be from below:

•   import React from 'react';
    import { Unity, useUnityContext } from 'react-unity-webgl';
  
    function App() {
        const { unityProvider } = useUnityContext({
            loaderUrl: 'build/kbveapp.loader.js',
            dataUrl: 'build/kbveapp.data',
            frameworkUrl: 'build/kbveapp.framework.js',
            codeUrl: 'build/kbveapp.wasm',
        });
  
        return <Unity unityProvider={unityProvider} />;
    }

• You can replace the variable of kbveapp with the app name of your finished webgl build.

---

Svelte

Threlte

An amazing and s3xy Three.js component library for Svelte. Official Repo

The Threlte library is broken into four modules that can be referenced uniquely through these packages:

1. @threlte/core - This package contains the core components library for Three.js with symbolic hooks for Svlete.
2. @threlte/preprocess - This package is the preprocessor for @threlte/core.
3. @threlte/extras - Additional components, helpers, hooks and more that extend the core functionality of Threlte.
4. @threlte/rapier - Rapier physics engine integration through components and hooks within Threlte.

---

Astro

Astro Svelte

An example of calling or rendering Svelte objects inside of Astro with a slot:

<object client:only="svelte">
    <!-- Slot -->
</object>

Without a slot:

<object client:only="svelte" />

---

MDX

MDX Cheatsheet

For indenting within a markdown file, we can use this code to produce a tab.

     

---

TailwindCSS

TailwindCSS is a popular utility-first CSS framework that allows developers to rapidly build custom user interfaces without writing a single line of custom CSS. Unlike traditional CSS frameworks that provide predefined components, Tailwind offers low-level utility classes that let developers compose and style elements directly in their markup. This approach promotes consistency, reusability, and efficiency in styling, making it easy to create responsive and visually appealing designs. TailwindCSS also features a highly customizable configuration, enabling developers to tailor the framework to fit their specific design needs and preferences.

TailWindCSS Setup

0. Create a New TailwindCSS Project Directory

   Open your terminal and create a new directory for your tailwindcss project. Navigate into the directory.

   mkdir my-tailwind-project
   cd my-tailwind-project

   After creating the directory, go ahead and initialize a new pnpm project!

   pnpm init -y

1. Install TailwindCSS

   You can use the npm or pnpm to install Tailwindcss.

   pnpm install tailwindcss

   After installing the tailwindcss package, go ahead and initialize the tailwindcss configuration with the command below.

   npx tailwindcss init

   This will generate a tailwind.config.fs file within your project root.

2. Configure TailwindCSS:

   Create a directory for your CSS files (e.g., src).

   mkdir src

   Create a main CSS file (e.g., src/styles.css).

   touch src/styles.css

   After creating the src/styles.css, open it up and paste in the default Tailwind imports.

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Then update your tailwind.config.js file to specify the paths to all of your template files. This is necessary for purging unused styles in production.

   module.exports = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
     theme: {
       extend: {},
     },
     plugins: [],
   };

3. Set Up a Build Process:

   To use TailwindCSS, you need to process your CSS file, we can use a couple different tools to help us. In the example below, we will use PostCSS but we can also use Webpack or ESBuild.

   Install PostCSS and Autoprefixer:

   pnpm install postcss postcss-cli autoprefixer

   Then create a PostCSS config file in your project root and add the following default configuration:

   module.exports = {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   };

4. Build The CSS:

   Update the scripts section in your package.json to include a build script:

   "scripts": {
       "build:css": "postcss src/styles.css -o dist/styles.css"
   }

   Then to run the build script, we can execute the command below to generate the CSS files:

   pnpm build:css

5. Include the Compiled CSS in Your HTML:

   Create an index.html file in your project root and include the compiled CSS file:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0" />
       <title>TailwindCSS Project</title>
       <link href="dist/styles.css" rel="stylesheet" />
     </head>
     <body>
       <h1 class="text-3xl font-bold underline">Hello, TailwindCSS!</h1>
     </body>
   </html>

6. Development Workflow:

   If you have serve already installed, then you can run the serve from the dist directory.

   By default, serve will serve the contents of the current directory on port 3000. If you want to specify a different directory (e.g., dist), you can do so:

   serve dist

   Then open your browser and navigate to http://localhost:3000 to view your TailwindCSS project.

   You have successfully set up, installed, and configured TailwindCSS in your project. From here, you can start building and styling your web pages using Tailwind’s utility classes. For more advanced configuration and customization, refer to the official TailwindCSS documentation.

TailwindCSS Buttons

These are the Dojo buttons

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

Note

This button utilizes a glassmorphism effect with a subtle background blur and gradient overlay that intensifies on hover.

---

Note

This button features a holographic gradient effect with a radial blur that enhances the button’s vibrant colors and adds a dynamic visual appeal on hover. The button also includes a scaling and slight rotation effect when hovered to give it a more engaging and interactive look.

---

Now, the button will scale up and slightly rotate when hovered, enhancing its dynamic visual appeal.

TailwindCSS Form

TailBlocks Contact Forms:

TailWindCSS Animation

Animation Utility provides animating elements, which can be extended and abstractly layered through Rive/Lottie.

The default animations are:

• animate-spin : Which uses a keyFrames spin to transform / rotate the object, primary use case is for loading indictions.

• animate-ping : Uses transform to slowly scale out the element and create a radar / ripple effect upon the element, primary use case is for notifications.

• animate-pulse : Alter the opacity of the element, to create a fading in and out effect, primary use case is for skeleton loaders.

• animate-bounce : Transform the Y access of the element. primary use case is for aesthetics.

• hover:$animation : Conditional statement, where if the mouse is over the element, perform the animation.

TailWindCSS Spin-Slow

This is a custom animation that you can add to TailWindCSS by extending the animations field within the configuration file.

Scoped: animation: { 'spin-slow': 'spin 5s linear infinite', }

Proof of Concept:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 5s linear infinite',
      },
    },
  },
};

MUI

MUI, formerly known as Material-UI, stands as a prominent React UI framework that brings Google’s Material Design principles to life. Offering an extensive collection of React components and CSS-in-JS styling solutions, MUI enables developers to create responsive and visually consistent web applications with ease. With its standardized design components and patterns, MUI ensures cohesive and professional user interfaces, making it an invaluable asset for modern web development.

MUI Setup

0. Install PNPM (Optional):

   If pnpm is not already installed, you can install it globally using npm:

   npm install -g pnpm

1. Initialize Your Project:

   Create a new project directory and initialize it with pnpm:

   mkdir my-mui-project
   cd my-mui-project
   pnpm init

2. Install React and React DOM:

   Install React and React DOM, which are required for using MUI:

   pnpm add react react-dom

3. Install MUI Core:

   Install the core MUI package and its dependencies:

   pnpm add @mui/material @emotion/react @emotion/styled

4. Set Up Your Project Structure:

   We will create a basic project structure for this MUI example!

   • Directorymy-mui-project/

     • Directorypublic/

       • index.html
     • Directorysrc/

       • App.js
       • index.js
       • style.css
     • package.json
     • pnpm-lock.yaml
   • README.md

   Note: MUI Project README

   Use the README.md file to document your MUI project notes, installation steps, and any useful references for future development.

   Be sure to link back to this section :D

5. Create an HTML File:

   In the public directory, create an index.html file:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0" />
       <title>MUI Project</title>
     </head>
     <body>
       <div id="root"></div>
     </body>
   </html>

   Note: Understanding the HTML Code

   <div id="root"></div>

   This div container is where the React app will be mounted.

6. Create Your React Application:

   In the src directory, create an index.js file to serve as the entry point for your React application:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import './styles.css';
   
   ReactDOM.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
     document.getElementById('root'),
   );

7. Create the Main App Component:

   Create an App.js file in the src directory and set up a basic MUI component:

   import React from 'react';
   import { Button, Container, Typography } from '@mui/material';
   
   function App() {
     return (
       <Container>
         <Typography variant="h2" component="h1" gutterBottom>
           Welcome to MUI
         </Typography>
         <Button variant="contained" color="primary">
           Hello World
         </Button>
       </Container>
     );
   }
   
   export default App;

8. Add Basic Styling:

   Create a styles.css file in the src directory to add some basic styling:

   body {
     margin: 0;
     font-family: 'Roboto', sans-serif;
   }
   
   #root {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f5f5f5;
   }

9. Configure Babel:

   If your project uses advanced JavaScript features or JSX, you might need to set up Babel. First, create a .babelrc file in the root directory:

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }

   Next, install Babel dependencies:

   pnpm add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

   • Directorymy-mui-project/

     • Directorypublic/

       • index.html
     • Directorysrc/

       • App.js
       • index.js
       • style.css
     • package.json
     • pnpm-lock.yaml
     • .babelrc
   • README.md

10. Configure Webpack:

    To bundle your application, you may want to set up Webpack. Create webpack.config.js in the root directory:

    • Directorymy-mui-project/

      • Directorypublic/

        • index.html
      • Directorysrc/

        • App.js
        • index.js
        • style.css
      • package.json
      • pnpm-lock.yaml
      • .babelrc
      • webpack.config.js
    • README.md

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
            },
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html',
        }),
      ],
      resolve: {
        extensions: ['.js', '.jsx'],
      },
      devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000,
      },
    };

    Install Webpack and its dependencies:

    pnpm add -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

11. Add Scripts to Package.json:

    Add the following scripts to your package.json to build and start your application:

    {
      "scripts": {
        "start": "webpack serve --mode development",
        "build": "webpack --mode production"
      }
    }

12. Start Your Development Server:

    Run the development server to see your MUI application in action:

    pnpm start

    Open your browser and navigate to http://localhost:3000. You should see your MUI application running with a button and some text.

Tips for MUI!

• Use meaningful and descriptive names for your components to make your code more readable.
• Keep your components small and focused on a single task for better maintainability.
• Regularly commit your code to version control to track changes and collaborate effectively.
• Take advantage of MUI’s extensive documentation and examples to learn more about its features and best practices.
• Use a linter and formatter to keep your code consistent and error-free.

---

Lottie

Lottie is a dynamic and innovative library developed by Airbnb that bridges the gap between designers and developers by allowing the incorporation of rich, high-quality animations into applications with ease. Built to interpret and render animations exported as JSON data from Adobe After Effects, Lottie facilitates the use of intricate animations without the overhead of traditional image or video files. With platform-specific integrations for iOS, Android, and the web, Lottie ensures that animations remain sharp and fluid across different screen resolutions and devices. By providing a more interactive and visually engaging user experience, Lottie has become a game-changer in the realm of modern app design and development.

Note

There are a couple different lottie libraries that you can use! Try to pick the one that best fits your website or application!

Lottie Web Setup

1. Install Lottie Web:

   First, you need to install the Lottie web library. You can do this using npm or pnpm. Open your terminal and run the following command:

   pnpm add lottie-web

2. Set Up Your Project Structure:

   Create a basic lottie web project structure Here is an example of the layout:

   • Directorymy-project/

     • Directorysrc/

       • index.html
       • Directoryanimations/

         • animation.json
       • Directoryjs/

         • main.js
     • Directorycss/

       • styles.css
     • package.json
     • pnpm-lock.yaml
   • README.md

3. Create an HTML File:

   Create an index.html file in the src directory: Here is a starter html template:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0" />
       <title>Lottie Animation Example</title>
       <link rel="stylesheet" href="../css/styles.css" />
     </head>
     <body>
       <div
         id="animationContainer"
         style="width: 500px; height: 500px;"></div>
       <script src="../js/main.js"></script>
     </body>
   </html>

4. Add Lottie Animation JSON File:

   Place your Lottie animation JSON file in the src/animations directory. You can export this JSON file from Adobe After Effects using the Bodymovin plugin.

   You can also use our sister website, Rare Icon, to grab Lottie JSONs.

5. Add Lottie to Your JavaScript File:

   In your js/main.js file, initialize Lottie and load your animation:

   import lottie from 'lottie-web';
   
   const animationContainer = document.getElementById('animationContainer');
   
   const animation = lottie.loadAnimation({
     container: animationContainer, // the DOM element that will contain the animation
     renderer: 'svg', // the rendering method: 'svg', 'canvas', or 'html'
     loop: true, // whether the animation should loop
     autoplay: true, // whether the animation should start automatically
     path: '../animations/animation.json', // the path to the animation JSON file
   });

6. Add Basic CSS:

   Add some basic CSS to css/styles.css to style your page:

   body {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
     font-family: Arial, sans-serif;
   }
   
   #animationContainer {
     border: 2px solid #333;
   }

7. Test Your Setup:

   Start a local server to test your setup. You can use a simple server like http-server:

   # Install http-server globally
   npm install -g http-server
   
   # Start the server
   http-server src

   Open your browser and navigate to the URL provided by http-server. You should see your Lottie animation playing in the animationContainer div.

---

SWUP

SWUP is a JavaScript library that brings a smooth, app-like feel to websites. Instead of traditional page reloads, SWUP provides seamless transitions with customizable animations, making browsing more enjoyable and engaging. When a link is clicked, SWUP loads new content asynchronously, avoiding the need for a full page refresh. The library is flexible and extensible, offering a variety of plugins to enhance functionality, such as improving accessibility, managing scripts, and maintaining scroll positions. SWUP is perfect for creating dynamic and responsive web applications that deliver a modern user experience.

SWUP Setup

1. Install SWUP:

   First, you need to install SWUP. Open your terminal and add the swup package:

   pnpm add swup

2. Install SWUP Plugins:

   To enhance SWUP’s functionality, install some useful plugins. Run the following command in your terminal:

   pnpm add @swup/scripts-plugin @swup/a11y-plugin @swup/head-plugin @swup/slide-theme @swup/scroll-plugin @swup/preload-plugin @swup/body-class-plugin @swup/debug-plugin

3. Set Up Your Project Structure:

   Create a basic project structure. Here’s an example:

   • Directorymy-project/

     • Directorysrc/

       • index.html
       • about.html
       • contac.html
     • Directorypublic/

       • Directoryassets/

         • robots.txt
     • Directorycss/

       • styles.css
     • Directoryjs/

       • main.js
     • package.json
     • pnpm-lock.yaml
   • README.md

4. Create HTML Files

   Create some HTML files in the src directory. Here’s an example for index.html:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0" />
       <title>Home</title>
       <link rel="stylesheet" href="../css/styles.css" />
     </head>
     <body>
       <div id="swup" class="transition-fade">
         <h1>Home Page</h1>
         <nav>
           <a href="index.html">Home</a>
           <a href="about.html">About</a>
           <a href="contact.html">Contact</a>
         </nav>
       </div>
       <script src="../js/main.js"></script>
     </body>
   </html>

   Repeat the structure for about.html and contact.html, changing the content inside the div with id="swup".

5. Add SWUP to Your JavaScript File:

   In your js/main.js file, initialize SWUP and its plugins:

   import Swup from 'swup';
   import SwupScriptsPlugin from '@swup/scripts-plugin';
   import SwupA11yPlugin from '@swup/a11y-plugin';
   import SwupHeadPlugin from '@swup/head-plugin';
   import SwupSlideTheme from '@swup/slide-theme';
   import SwupScrollPlugin from '@swup/scroll-plugin';
   import SwupPreloadPlugin from '@swup/preload-plugin';
   import SwupBodyClassPlugin from '@swup/body-class-plugin';
   import SwupDebugPlugin from '@swup/debug-plugin';
   
   const swup = new Swup({
     plugins: [
       new SwupScriptsPlugin(),
       new SwupA11yPlugin(),
       new SwupHeadPlugin(),
       new SwupSlideTheme(),
       new SwupScrollPlugin(),
       new SwupPreloadPlugin(),
       new SwupBodyClassPlugin(),
       new SwupDebugPlugin(),
     ],
   });

6. Add CSS for Transitions:

   Add some basic CSS to css/styles.css to handle the transitions:

   /* CSS for SWUP transitions */
   html,
   body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
   }
   
   nav a {
     margin: 0 10px;
     text-decoration: none;
     color: #333;
   }
   
   .transition-fade {
     opacity: 1;
     transition: opacity 0.4s;
   }
   
   html.is-leaving .transition-fade {
     opacity: 0;
   }

7. Test Your Setup

   Start a local server to test your setup. You can use a simple server like http-server:

   # Install http-server globally
   npm install -g http-server
   
   # Start the server
   http-server src

   Open your browser and navigate to the URL provided by http-server. Click the links in your navigation to see the smooth transitions provided by SWUP.

SWUP Install

• Adding swup page into your nodejs application via yarn.

      pnpm add swup

  or yarn

• Plugins to install for swup via yarn.

      yarn add @swup/scripts-plugin @swup/a11y-plugin @swup/head-plugin @swup/slide-theme @swup/scroll-plugin @swup/preload-plugin @swup/body-class-plugin @swup/debug-plugin

---

ESBuild

ESBuild is a fast JavaScript bundler and minifier that has gained popularity due to its remarkable speed and efficiency. Designed with performance in mind, ESBuild leverages Go’s concurrency model to provide lightning-fast build times, often outperforming other popular tools like Webpack and Rollup. It supports modern JavaScript features and can handle TypeScript, JSX, and even various CSS formats, making it a versatile choice for web development projects. Additionally, ESBuild’s simplicity in configuration and its ability to be integrated with other tools and workflows make it a compelling option for developers seeking a high-performance, scalable build solution.

ESBuild Setup

1. Install ESBuild:

   First, you need to install ESBuild. You can do this using npm or yarn. Open your terminal and run one of the following commands:

   npm install esbuild --save-dev

2. Create Your Project Structure:

   Set up a basic project structure

   • Directorymy-project/

     • Directorysrc/

       • Directorycomponents/

         • Graph.jsx
     • Directorypublic/

       • index.html
     • package.json
     • esbuild.config.js
   • README.md

3. Write Your JSX Component:

   Create a simple React component in src/components/Graph.jsx:

   src/components/Graph.jsx

   import React from 'react';
   
   const Graph = () => {
     return <div>This is a Graph component.</div>;
   };
   
   export default Graph;

   • Directorymy-project/

     • Directorysrc/

       • Directorycomponents/

         • Graph.jsx
     • Directorypublic/

       • index.html
     • package.json
     • esbuild.config.js
   • README.md

4. Create an HTML File;

   Create a simple HTML file in public/index.html to include your bundled script:

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0" />
       <title>ESBuild Example</title>
     </head>
     <body>
       <div id="root"></div>
       <script src="graph.js"></script>
     </body>
   </html>

   • Directorymy-project/

     • Directorysrc/

       • Directorycomponents/

         • Graph.jsx
     • Directorypublic/

       • index.html
     • package.json
     • esbuild.config.js
   • README.md

5. Create an ESBuild Configuration File:

   Create an esbuild.config.js file in the root of your project:

   esbuild.config.js

   const esbuild = require('esbuild');
   
   esbuild
     .build({
       entryPoints: ['src/components/Graph.jsx'],
       bundle: true,
       outfile: 'public/graph.js',
       minify: true,
       sourcemap: true,
       platform: 'browser',
       target: 'es2020',
       jsxFactory: 'React.createElement',
       jsxFragment: 'React.Fragment',
     })
     .catch(() => process.exit(1));

6. Add Build Script to package.json:

   In your package.json, add a script to run the ESBuild configuration:

   {
     "name": "my-project",
     "version": "1.0.0",
     "scripts": {
       "build": "node esbuild.config.js"
     },
     "devDependencies": {
       "esbuild": "^0.13.0",
       "react": "^17.0.0",
       "react-dom": "^17.0.0"
     }
   }

7. Build Your Project:

   Run the build script from your terminal:

   npm run build

   This command will bundle your Graph.jsx component, minify the output, generate a source map, and output the final script to public/graph.js.

8. Serve Your HTML File:

   You can use any static file server to serve your public directory. For simplicity, you can use the serve package:

   # Install the serve package globally
   npm install -g serve
   
   # Serve the public directory
   serve public

   Now, open your browser and navigate to the URL provided by the serve command. You should see your HTML page with the bundled Graph component.

ESBuild Example

esbuild src/components/Graph.jsx --bundle --outfile=public/graph.js --minify --sourcemap --platform=browser --target=es2020 --jsx-factory=React.createElement --jsx-fragment=React.Fragment

This command tells esbuild to:

• Bundle the Graph.jsx file.
• Output the bundle to public/graph.js.
• Minify the output.
• Generate a source map.
• Set the platform to browser (handles browser globals like window).
• Target modern JavaScript (es2020).
• Properly handle JSX for React.

Explanation of Key Options:

• —bundle: Bundles all dependencies into one file.
• —outfile: Specifies the output file.
• —minify: Minimizes the output.
• —sourcemap: Generates a source map.
• —platform: Specifies the platform (node or browser).
• —target: Sets the ECMAScript target version.
• —jsx-factory and —jsx-fragment: Sets up JSX processing for React.

ESBuild Configuration Table

Configuration Option	Description	Example Value
entryPoints	Array of entry points for the bundle.	['src/components/Graph.jsx']
bundle	Bundles all dependencies into one file.	true
outfile	Specifies the output file.	'public/graph.js'
minify	Minimizes the output.	true
sourcemap	Generates a source map.	true
platform	Specifies the platform (node or browser).	'browser'
target	Sets the ECMAScript target version.	'es2020'
jsxFactory	Specifies the JSX factory function for React.	'React.createElement'
jsxFragment	Specifies the JSX fragment function for React.	'React.Fragment'
define	Replaces global identifiers with constant expressions.	{ 'process.env.NODE_ENV': '"production"' }
external	Excludes specific modules from the bundle (e.g., node_modules packages).	['react', 'react-dom']
loader	Specifies a custom loader for specific file types.	{ '.js': 'jsx' }
plugins	Adds custom plugins to the build process.	[myPlugin()]
format	Sets the output format (iife, cjs, esm).	'iife'
globalName	Specifies a global variable name to be used in the output bundle (for iife format).	'MyLibrary'
inject	Specifies a list of files to be automatically injected into the bundle.	['src/shim.js']
outdir	Specifies the output directory (used instead of outfile for multiple entry points).	'dist'
entryNames	Specifies the name pattern for output files when multiple entry points are used.	'[dir]/[name]-[hash]'
assetNames	Specifies the name pattern for output assets (e.g., images, fonts).	'assets/[name]-[hash]'
chunkNames	Specifies the name pattern for output chunks created via code-splitting.	'chunks/[name]-[hash]'
splitting	Enables code-splitting (only for esm format).	true
metafile	Generates a JSON file with metadata about the bundle.	true
watch	Enables watch mode, automatically rebuilding on file changes.	true
logLevel	Sets the logging level (silent, error, warning, info, debug).	'info'
incremental	Enables incremental builds for faster rebuilds.	true
treeShaking	Controls tree shaking behavior.	true
minifyWhitespace	Minifies whitespace in the output.	true
minifyIdentifiers	Minifies variable and function names.	true
minifySyntax	Minifies syntax without changing semantics.	true
charset	Controls the character set used in the output (default is utf8).	'ascii'
legalComments	Controls how legal comments are handled (none, inline, eof, linked).	'eof'

---

Shiki

Shiki is a syntax highlighter based on the same syntax definitions as Visual Studio Code, ensuring accurate and visually consistent code highlighting. When integrated with MDX, a format that combines Markdown and JSX, Shiki can provide syntax highlighting for code blocks within MDX content. The combination ensures that developers get a high-quality, themeable code highlighting experience in their MDX-based documents or blogs.

Shiki Setup

To set up Shiki, a powerful syntax highlighter, simply install it using npm with the command npm i shiki. This will allow you to integrate rich code syntax highlighting into your projects, enhancing the readability and aesthetics of code snippets on web pages or in documentation.

Shiki Configurations

Template themes for Shiki:

export type Theme =
  | 'css-variables'
  | 'dark-plus'
  | 'dracula-soft'
  | 'dracula'
  | 'github-dark-dimmed'
  | 'github-dark'
  | 'github-light'
  | 'hc_light'
  | 'light-plus'
  | 'material-darker'
  | 'material-default'
  | 'material-lighter'
  | 'material-ocean'
  | 'material-palenight'
  | 'min-dark'
  | 'min-light'
  | 'monokai'
  | 'nord'
  | 'one-dark-pro'
  | 'poimandres'
  | 'rose-pine-dawn'
  | 'rose-pine-moon'
  | 'rose-pine'
  | 'slack-dark'
  | 'slack-ochin'
  | 'solarized-dark'
  | 'solarized-light'
  | 'vitesse-dark'
  | 'vitesse-light';

---

Signature Pad

Signature Pad is a JavaScript library that utilizes HTML5 canvas technology to facilitate smooth signature drawing on web pages. It’s designed to function seamlessly across all modern desktop and mobile browsers without the need for any external libraries. Signature Pad supports various features like variable width Bézier curve interpolation, allowing for natural pen strokes and is ideal for applications requiring users to provide signatures digitally. You can install it via npm or directly embed it into your web pages using a script tag. For developers looking to implement detailed canvas-based interactions, Signature Pad offers extensive API options for managing signature data.

Singature Pad Tutorial

1. Install and Include Signature Pad:

   You can install Signature Pad using npm or yarn, or directly include it in your HTML file. If you are using npm or yarn, run one of the following commands in your project directory:

   npm install signature_pad

   Alternatively, you can directly include Signature Pad in your HTML page using a script tag. This method is particularly useful if you’re not using a JavaScript module bundler:

   <script src="https://cdn.jsdelivr.net/npm/signature_pad@latest/dist/signature_pad.umd.min.js"></script>

   This script tag links to the latest version of Signature Pad hosted on the jsDelivr CDN, making it immediately available for use in your project.

2. Create a Canvas Element:

   Add a canvas element to your HTML where the signature will be drawn:

   <canvas id="signature-pad" width="400" height="200"></canvas>

3. Initialize Signature Pad:

   In your JavaScript file, initialize Signature Pad on the canvas element:

   const canvas = document.getElementById('signature-pad');
   const signaturePad = new SignaturePad(canvas);

4. Configure Options (Optional):

   Configure Signature Pad with options such as pen color or background color:

   const options = {
     backgroundColor: 'rgb(255, 255, 255)', // Set canvas background color
     penColor: 'rgb(0, 0, 0)', // Set pen color
   };
   const signaturePad = new SignaturePad(canvas, options);

5. Handling Resize:

   Add event listeners to resize the canvas appropriately when the window size changes:

   function resizeCanvas() {
     const ratio = Math.max(window.devicePixelRatio || 1, 1);
     canvas.width = canvas.offsetWidth * ratio;
     canvas.height = canvas.offsetHeight * ratio;
     canvas.getContext('2d').scale(ratio, ratio);
     signaturePad.clear(); // otherwise isEmpty might return incorrect value
   }
   
   window.addEventListener('resize', resizeCanvas);
   resizeCanvas();

6. Save and Clear Functions:

   Implement functions to save the signature to an image or clear the canvas:

   document.getElementById('save').addEventListener('click', function () {
     const dataURL = signaturePad.toDataURL();
     console.log(dataURL); // Save the data URL of the signature image
   });
   
   document.getElementById('clear').addEventListener('click', function () {
     signaturePad.clear();
   });

---

Tools

This section provides an overview of essential JavaScript tools that can significantly enhance your project’s development and maintenance processes. From code editors and linters that ensure code quality and consistency, to frameworks and libraries that expedite development with ready-made functions and components, these tools cover a broad spectrum of functionalities. Additionally, we’ll explore build tools and task runners that automate routine tasks like minification and testing, alongside version control systems that track changes and facilitate collaboration. Whether you’re building a small application or a large-scale enterprise solution, integrating the right tools can streamline your workflow and increase efficiency.

Note: JavaScript Tools

When integrating JavaScript tools into your project, focus on those that align with your development environment and project requirements. For instance, consider using webpack for module bundling if your project involves numerous dependencies, or Babel for transpiling if you need to support older browsers. Stay updated with the latest versions of these tools to leverage enhancements and security improvements.

Cypress

Cypress stands out as a comprehensive testing framework specifically tailored for modern web applications and written in JavaScript. Developers favor Cypress for its ability to streamline the testing process, enabling the creation of end-to-end tests, integration tests, and unit tests in a manner that is both coherent and straightforward. Unlike other testing tools, Cypress operates directly within the browser and executes commands concurrently with the application’s run loop. Such synchronization facilitates real-time interaction and debugging while its automatic waiting feature minimizes the inconsistencies commonly associated with asynchronous test execution. The framework’s extensive API library and user-friendly dashboard further bolster test automation and monitoring. These features collectively make Cypress a highly regarded tool among developers aiming to enhance the robustness and reliability of web applications.

Cypress Table

File / Directory	Description
cypress.json	Configuration file for Cypress settings. It allows customization of default behaviors for running tests.
cypress.env.json	Environment variables specific to Cypress can be stored here, providing a secure place to store sensitive information outside of source control.
commands.ts	Custom commands can be added to Cypress in this file, enhancing its functionality and reusability across tests.
index.ts	This file within the Cypress plugin folder is used to load plugins or modify internal behavior of Cypress via its API.
fixtures/	Directory for storing static data that can be used during test runs. Helps in managing test data separately from test cases.
integration/	Default directory where test files are located. Cypress will look for test files here unless configured otherwise.
plugins/	Contains JavaScript files that are executed when a project is opened or re-opened. Useful for tasks like modifying webpack configuration, handling environment variables, etc.
support/	Files in this directory are loaded before each test file execution. Useful for overriding configurations, creating global functions etc.

Cypress Command Table

Command	Description
cy.get(selector)	Retrieves one or more DOM elements by selector. Commonly used to interact with or assert the properties of elements on the page.
cy.request(url)	Makes HTTP requests to specified URLs. Useful for testing backend APIs directly or to prepare application state before a test.
cy.trigger(eventName)	Triggers an event on a DOM element. This is handy for testing interactive behavior like mouseover or keypress events.
cy.should(assertion, value)	Attaches one or more assertions to elements yielded by the previous command. Frequently used to check if elements contain expected properties or states.
cy.invoke(functionName)	Invokes a function on the previously yielded subject. Useful for invoking jQuery methods or other functions provided by DOM elements.
cy.contains(content)	Finds and yields DOM elements containing the specified content, which can be text or a regular expression.
cy.visit(url)	Visits the specified URL. It is the starting point for most end-to-end tests that interact with web pages.
cy.wait(alias)	Waits for a specific alias to resolve before moving on. Aliases are typically used with cy.route() to wait for requests or responses.
cy.route(method, url, response)	Intercepts and manages the behavior of network requests. cy.route() is essential for stubbing network calls to control test environments.
cy.click(options)	Issues a click event on the first element within a set of DOM elements. Options can modify the behavior, like forcing the click or specifying the mouse button.

Cypress Advance Table

Category	Command	Description
Context and Hooks	describe() / context()	Define a test suite.
	it() / specify()	Define a test case.
	before()	Run once before all tests in a block.
	after()	Run once after all tests in a block.
	beforeEach()	Run before each test in a block.
	afterEach()	Run after each test in a block.
Assertions	.should('not.exist')	Assertion to check if element does not exist.
	.should('be.visible')	Assertion to check if element is visible.
	.should('contain', 'text')	Assertion to check if element contains text.
	.should('have.value', 'value')	Assertion to check if form element has a value.
	.should('be.checked')	Asserts that the element is checked.
	.should('have.class', 'className')	Asserts that the element has a specific class.
Utility Commands	cy.log()	Log a message to the Cypress Command Log.
	cy.clearCookies()	Clear browser cookies.
	cy.fixture()	Load a fixed set of data located in a file.
	cy.reload()	Reload the current page.
	cy.screenshot()	Take a screenshot of the current state of the application.
Selection Commands	cy.get(selector)	Select DOM elements.
	cy.contains(content)	Select elements containing specific text or content.
	cy.root()	Get the root DOM element.
	cy.within()	Scope upcoming commands to within a DOM element.
Action Commands	cy.click()	Click a DOM element.
	cy.type('text')	Type text into a DOM element.
	cy.check()	Check a checkbox or radio button.
	cy.uncheck()	Uncheck a checkbox.
	cy.select('option')	Select an option in a dropdown.
	cy.submit()	Submit a form.
Browser Commands	cy.visit(url)	Visit a URL.
	cy.location()	Get the current URL, pathname, or hash.
	cy.title()	Get the title of the current page.
	cy.url()	Get the current URL as a string.
	cy.go('back') / cy.go('forward')	Navigate back or forward in the browser’s history.
Network Requests	cy.request()	Make an HTTP request.
	cy.server()	Start a server to manage HTTP requests.
	cy.route()	Control behavior of network requests.
Aliases	cy.as('aliasName')	Assign an alias for later use.
	cy.get('@aliasName')	Retrieve an aliased element.
File Handling	cy.readFile()	Read a file’s contents.
	cy.writeFile()	Write data to a file.
Environment and Configuration	Cypress.env('VAR')	Access environment variables.
	Cypress.config('key')	Get or set configuration.
Debugging	cy.debug()	Debug the command’s subject in the developer tools.
	cy.pause()	Pause test execution.

Tip: Cypress

When writing tests with Cypress, it’s beneficial to use the .contains() command to select elements by their text content. This approach is more resilient to changes in the UI, such as class names or IDs, making your tests less likely to break with UI updates. Additionally, consider using Cypress’s network stubbing capabilities with cy.route() or cy.intercept() to control and test network responses without relying on external servers. This ensures your tests run quickly and remain consistent, regardless of network conditions.

Cypress Tutorial

1. Install Cypress in your project:

   npm install cypress --save-dev

   This command adds Cypress to your project as a development dependency, ensuring that it’s available for writing and running tests.

2. Open Cypress for the first time:

   npx cypress open

   Running this command sets up the initial Cypress configuration and opens the Cypress Test Runner, which helps you manage and run your tests.

3. Create the test files:

   After opening Cypress, it automatically generates a cypress folder in your project. Inside this folder, create two files: app.cy.ts for your test cases and app.po.ts for your page objects, which help manage element selectors and interactions in a reusable manner.

   app.po.ts File:

   app.po.ts

   export class PageObjects {
     getSubmitButton() {
       return cy.get('button[type="submit"]');
     }
   }

   app.cy.ts File:

   app.cy.ts

   import { PageObjects } from './app.po';
   
   describe('App Test', () => {
     const page = new PageObjects();
   
     beforeEach(() => {
       cy.visit('http://localhost:3000'); // Adjust URL to your application's URL
     });
   
     it('Should click the submit button', () => {
       page.getSubmitButton().click();
       cy.url().should('include', '/success'); // Adjust the assertion to match expected behavior
     });
   });

4. Run your tests:

   npx cypress run

   The command runs your tests in the headless mode, which is suitable for continuous integration environments or local test runs without the GUI.

5. Review test results:

   After running the tests, Cypress provides detailed results in the terminal or command prompt. If you prefer a graphical interface, you can use npx cypress open to run tests and observe their execution in real time.

Warning: Cypress Usage

When using Cypress for testing, ensure that your test environment closely mimics your production environment to avoid discrepancies that could affect test reliability. Avoid using production credentials or sensitive data in your test scripts to maintain security. Be mindful of Cypress’s limitation with cross-origin policies when designing tests that interact with multiple domains.

Danger: Security Risks with Cypress

Be vigilant about not hardcoding sensitive information such as passwords or API keys directly in your Cypress tests. Exposing sensitive data can lead to security breaches and data leaks. Always use environment variables to manage sensitive information securely, and ensure that these variables are not included in version control. Additionally, regularly review your test scripts and environment configurations to prevent accidental exposure of secure data.

Cypress JSON API Example

Example Function:

export const checkJSONendpointAPI = (endpoints: string[]) => {
  endpoints.forEach((endpoint) => {
    cy.request(endpoint).then((response) => {
      expect(response.status).to.eq(200);
      expect(response.headers['content-type']).to.include(
        'application/json',
      );
      expect(response.body).to.be.an('object');
    });
  });
};

1. Define the Function and Parameters: Begin by declaring the function checkJSONendpointAPI and specify that it accepts an array of strings, where each string represents an API endpoint URL.

   export const checkJSONendpointAPI = (endpoints: string[]) => {};

   This setup allows the function to handle multiple endpoints, making it versatile for API testing.

2. Iterate Over the Endpoints: Use the forEach method to loop through each endpoint provided in the array. This method applies a function to each item in the array, which in this case is used to initiate a Cypress request to the endpoint.

   endpoints.forEach((endpoint) => {});

   This step is crucial for automating the process of sending requests to multiple endpoints without repeating code.

3. Make a Request to Each Endpoint:

   Within the loop, use cy.request() to send an HTTP request to the current endpoint. This Cypress command is designed to handle asynchronous requests and fetches data from the specified endpoint.

   cy.request(endpoint).then((response) => {});

   Here, cy.request returns a promise that resolves with the response object, allowing you to inspect the response further in the subsequent steps.

4. Check the Response Status: After receiving the response, ensure that the HTTP status code is 200. This status code indicates that the request was successful.

   expect(response.status).to.eq(200);

   Checking the status code is a basic validation to confirm that the endpoint is reachable and responding as expected.

5. Validate the Content-Type: Verify that the Content-Type header of the response includes application/json. This step confirms that the endpoint is indeed returning JSON data.

   expect(response.headers['content-type']).to.include('application/json');

   It’s essential to check the Content-Type to ensure that the data format is correct, as the subsequent validation assumes JSON format.

6. Assess the Response Body: Finally, ensure that the response body is an object. This check is vital because JSON data, when parsed, should typically be an object or an array.

   expect(response.body).to.be.an('object');

   The assertion verifies that the parsed JSON data structure is as expected, reinforcing the integrity of the response.

7. Close out the function and then check if it executes without any issues!

---

Playwright

Playwright is a powerful open-source automation library developed by Microsoft, tailored for JavaScript developers aiming to perform end-to-end testing and web scraping across multiple browsers, including Chromium, Firefox, and WebKit. Its single API streamlines the testing process, allowing for consistent and reliable browser automation. Playwright’s automatic waiting mechanism ensures elements are ready before actions are performed, reducing test flakiness and enhancing reliability. Additionally, Playwright offers robust debugging tools, such as the Playwright Inspector and Trace Viewer, which provide comprehensive insights into test execution, aiding developers in efficiently identifying and resolving issues. With support for various programming languages, including JavaScript, Playwright empowers developers to write tests in their preferred language, making it a versatile and invaluable tool in modern web development workflows.

Playwright Install

pnpm exec playwright install

To set up Playwright, run pnpm exec playwright install, which installs the core library and required browser binaries. This ensures seamless cross-browser automation without additional configuration. Playwright manages browser versions internally, providing a stable and consistent testing environment. With this setup, you can start writing and executing reliable tests across Chromium, Firefox, and WebKit immediately.

Playwright missing dependencies.

Incase the Host system is missing dependencies to run browsers. Please install them with the following command:

pnpm exec playwright install-deps

sudo apt-get install libnss3 \
        libnspr4 \
        libatk1.0-0 \
        libatk-bridge2.0-0 \
        libcups2 \
        libxcomposite1 \
        libxdamage1 \
        libxfixes3 \
        libxrandr2 \
        libgbm1 \
        libpango-1.0-0 \
        libcairo2 \
        libasound2 \
        libatspi2.0-0

sudo apt-get install libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libpango-1.0-0 libcairo2 libasound2 libatspi2.0-0

---

Biome

Note: Transition of Rome to Biome

The development and maintenance of the Rome tool, initially a standalone project, has been officially taken over by the Biome team. This transition aims to integrate Rome’s capabilities into the broader suite of tools offered by Biome, enhancing both projects with improved functionality and support.

Biome.js is a comprehensive toolchain specifically designed for web projects, providing a range of functionalities to maintain and enhance project quality. It features a formatter and linter that can be utilized through a Command Line Interface (CLI) or a Language Server Protocol (LSP). The toolchain supports JavaScript, TypeScript, JSX, and JSON, offering a high degree of compatibility with existing formatting standards like Prettier, and includes over 200 linting rules to help improve code quality.

Biome.js is designed to function interactively within an editor, allowing it to format and lint code as it is written, which is particularly useful for developers looking for immediate feedback on their code quality. For those looking to integrate Biome.js into their projects, it can be installed with npm and used directly from the command line to format, lint, and check code, making it a versatile addition to development workflows.

For detailed usage and more information about setting up Biome.js in your projects, you can visit their official GitHub page here.

Biome Setup

1. Install Biome:

   You can install Biome using npm or your preferred Node.js package manager in a directory that contains a package.json file. This installation method is quick and integrates easily with your existing Node.js setup.

   npm install --save-dev --save-exact @biomejs/biome

   Alternatively, if you prefer not to use Node.js, you can download a standalone CLI binary from the Biome GitHub releases page, suitable for your operating system, and give it execution permissions.

2. Configure Biome:

   To streamline your Biome usage across different environments (like your editor and CI systems), it’s recommended to create a biome.json configuration file in your project’s root directory. This file ensures consistent settings are used everywhere Biome is run. You can generate this file by running the following command:

   npx @biomejs/biome init

   This command will create a biome.json file with default settings, which you can modify as needed.

3. Usage:

   Biome can be used to format, lint, and apply safe fixes to your code. You can run these tools individually or together depending on your needs.

   • To format your code:

     npx @biomejs/biome format --write ./src

   • To lint and apply safe fixes:

     npx @biomejs/biome lint --apply ./src

   • To check (format, lint, and organize imports) all at once:

     npx @biomejs/biome check --apply ./src

4. Integrating with Your Editor: For an improved development experience, integrating Biome with your code editor is recommended. This enables features like format-on-save and provides inline suggestions and fixes. Most popular editors have plugins or extensions available for Biome.

   • VS Code BiomeJS Extension
   • NeoVim
   • Additional Editors from Biome Docs

5. Set Up Continuous Integration: Incorporate Biome into your CI/CD pipeline to ensure all submitted code meets your formatting and linting standards before it is merged. Using Biome in your CI setup helps maintain code quality and reduces manual review time.

   Head over to the Git for CICD tutorials, information.

   Example of a Github Action from Biome Docs:

   name: Code quality
   
   on:
   push:
   pull_request:
   
   jobs:
   quality:
       runs-on: ubuntu-latest
       steps:
       - name: Checkout
           uses: actions/checkout@v4
       - name: Setup Biome
           uses: biomejs/setup-biome@v2
           with:
           version: latest
       - name: Run Biome
           run: biome ci .

Tip: Using Biome with Reviewdog Action

Leverage the power of Reviewdog when integrating Biome in your CI/CD pipeline to automate code reviews and maintain high-quality code standards. By combining Biome with Reviewdog, you can automatically flag coding style violations and potential errors directly in pull requests, providing actionable feedback within the context of code reviews. This setup not only streamlines the review process but also ensures consistency across your project’s codebase. Ensure to secure your github_token and set the appropriate permissions in your workflow file for seamless integration.

name: reviewdog
on: [pull_request]
jobs:
    biome:
        name: runner / Biome
        runs-on: ubuntu-latest
        permissions:
            contents: read
            pull-requests: write
        steps:
            - uses: actions/checkout@v4
            - uses: mongolyy/reviewdog-action-biome@v1
              with:
                  github_token: ${{ secrets.github_token }}
                  reporter: github-pr-review

---

Size Limit

Size Limit is a powerful tool designed to help developers control the size of their packages. It offers a suite of functionalities to measure various metrics such as the time it takes to load your package on a 3G network, the execution time of your JavaScript, and the overall size of your package. These measurements can assist in optimizing performance and ensuring your application loads efficiently for users.

Size Limit is particularly useful in a continuous integration environment, as it can be integrated with GitHub Actions through the Size-limit Report. This GitHub Action automates the process of tracking and reporting on the size impacts of new code, making it easier to prevent performance regressions during development

---

Note: JavaScript Reminder

Choosing the right JavaScript tools is crucial for optimizing your development process and ensuring high-quality outcomes. Consider the scale of your project and specific needs when selecting tools, as each offers different benefits. Regularly update and review your tools to keep up with new features and improvements in the development ecosystem.

---

Expo

Expo is a powerful open-source platform that supercharges React Native development, letting developers craft universal apps for Android, iOS, and the web with JavaScript, all while streamlining workflows and minimizing native code hassles. With the release of Expo SDK 52, it embraces React Native 0.76 and introduces the New Architecture by default for new projects, boosting performance by replacing the old bridge with a faster, more efficient system—think of it as upgrading from a rickety rope bridge to a sleek steel highway. This SDK brings stable goodies like the expo-video library, offering slick video playback with lock screen controls and Picture-in-Picture support, alongside beta features like expo-audio and enhanced file management with expo-file-system. It’s a playground for developers, with tools like Expo Router v4 for seamless navigation, experimental tree shaking to trim unused code, and even a taste of React Server Components for cutting-edge app-building. Expo SDK 52 also ditches JSC for the speedier Hermes engine and ups minimum OS requirements (iOS 15.1, Android 24), ensuring modern compatibility. From rapid prototyping to polished production apps, Expo transforms complex mobile development into an engaging, accessible adventure—one line of code at a time.

Expo SDK 52

These notes are for Expo SDK 52 with some minor references to the beta SDK 53!

Expo Webpack

This section is for the Expo webpack.

The Expo Webpack, once a cornerstone of Expo’s web development ecosystem, was a tailored configuration built on Webpack 4 to bundle React Native apps for the browser, enabling single-page applications (SPAs) with a setup inspired by Create React App. Integrated through @expo/webpack-config, it streamlined the process of transpiling JavaScript, optimizing assets, and managing dependencies, allowing developers to target web platforms alongside iOS and Android with minimal friction—think of it as a trusty Swiss Army knife for cross-platform bundling. Webpack leveraged tools like Babel for broad compatibility and supported progressive web app (PWA) features via Workbox, making offline functionality a breeze. However, as of SDK 50 in late 2023, Expo Webpack has been deprecated in favor of Metro, Expo’s newer universal bundler, which promises tighter alignment with React Native’s native ecosystem and faster performance. While customizable through expo customize:web, its maintenance mode status—announced in early 2024—signals a shift, leaving developers with a robust but aging tool that’s being sunsetted for a more cohesive future. Still, for legacy projects or specific use cases, it remains a battle-tested option, packing a punch of efficiency and familiarity.

Looking to modernize your Expo web setup?

Switch to Metro, Expo’s current universal bundler, and pair it with a static build for a leaner, faster workflow. With Metro’s tighter integration into the React Native ecosystem and support in SDK 50+, you’ll get quicker builds and seamless multi-platform alignment—perfect for ditching Webpack’s legacy baggage while keeping your app snappy and future-proof.

In the event that you encounter this error: Error: ENOSPC: System limit for number of file watchers reached , update the webpack.config.js with an ignore on node_modules folder.

config.watchOptions = {
    ...config.watchOptions,
    ignored: ['**/node_modules/**'], // Ignore all files in node_modules
  };

Expo Metro

Expo Metro is the beating heart of React Native bundling, a blazing-fast JavaScript bundler forged by Meta to power apps like Facebook and Instagram, now supercharged for the Expo ecosystem. Born in 2017 as an open-source spin-off from React Native’s packager, Metro transforms your sprawling code—JavaScript, TypeScript, even CSS on web—into a single, efficient bundle, ready to run on iOS, Android, or browsers with Hermes or Chakra engines. With Expo SDK 52 (November 2024), it’s turbocharged by the New Architecture, slashing resolution times up to 15x via a rewritten resolver—think of it as a librarian who instantly knows every book’s shelf. It’s not just speed; Metro’s async route splitting, introduced in SDK 50, loads only what’s needed, making apps feel snappy—like a chef prepping just your order, not the whole menu. Maintained by Meta’s engineers, it scales effortlessly, handling over 400,000 source files with tricks like Watchman file-watching and lazy SHA-1 hashing ([email protected]), cutting memory use for tools like Replit. Expo CLI leans hard into Metro, ditching Webpack in SDK 50 for a unified, cross-platform beast that supports DOM components—imagine web libraries popping into native apps via webviews. It’s customizable too; tweak metro.config.js to hoist assets like SQLite databases or redirect imports, all while caching aggressively to avoid Babel’s grind on every reload. Metro’s web game is strong—CSS module nesting and static builds mean SEO-friendly sites, while eager builds (npx expo run --eager) pre-bundle for native speed-ups. Sure, it’s not perfect—dynamic imports need hacks like @metro-ignore, and monorepo fans rejoice at pnpm support—but it’s battle-tested across millions of devices. Expo Metro isn’t just a bundler; it’s a time machine, hurling your app into the future, one optimized byte at a time.

Nx Metro Configuration

Below is an example of a metro.config.js that we use in our Nx Monorepo.

// Import the Nx-specific Metro integration from '@nx/expo'
// This helper enhances Metro for Nx monorepos, managing workspace dependencies and watch folders
const { withNxMetro } = require('@nx/expo');

// Import Expo’s default Metro configuration generator
// This provides a baseline Metro config tailored for Expo projects, rooted at the project directory
const { getDefaultConfig } = require('@expo/metro-config');

// Import NativeWind’s Metro plugin for Tailwind CSS integration
// This wires up CSS-in-JS styling (like Tailwind) for React Native components
const { withNativeWind } = require('nativewind/metro');

// Import Metro’s config merger utility
// This allows combining multiple config objects into one, resolving overlaps cleanly
const { mergeConfig } = require('metro-config');

// Fetch the default Expo Metro config, passing __dirname as the project root
// __dirname ensures the config knows where to look for files relative to this script
const defaultConfig = getDefaultConfig(__dirname);

// Destructure assetExts and sourceExts from the default config’s resolver
// assetExts lists file types Metro treats as assets (e.g., png, jpg); sourceExts lists code files (e.g., js, ts)
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Custom Metro configuration object
 * This defines overrides and extensions to the default config
 * See: https://reactnative.dev/docs/metro for Metro’s full spec
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  // Set a cache version string to invalidate Metro’s cache when needed
  // Changing 'mobile' forces a cache reset—useful for major updates
  cacheVersion: 'mobile',

  // Transformer settings for code processing
  transformer: {
    // Point to a custom Babel transformer for SVG files
    // 'react-native-svg-transformer' converts SVGs into React components
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },

  // Resolver settings for file handling
  resolver: {
    // Filter out 'svg' from assetExts so it’s not treated as a static asset
    // This lets the SVG transformer process it as code instead
    assetExts: assetExts.filter((ext) => ext !== 'svg'),

    // Extend sourceExts with additional file types Metro should process
    // Adds CommonJS (.cjs), ES Modules (.mjs), and SVG (.svg) to the default list (js, ts, etc.)
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
};

// Define an async function to build the final Metro config
// Async because withNxMetro and withNativeWind may involve promises
async function createConfig() {
  // Merge the default and custom configs first
  // Then wrap with NxMetro for monorepo support (e.g., watching Nx workspace libs)
  return await withNxMetro(mergeConfig(defaultConfig, customConfig), {
    // Disable debug logging for NxMetro (set true to troubleshoot)
    debug: false,
    // No extra file extensions beyond what’s in resolver.sourceExts
    extensions: [],
    // No additional folders to watch (Nx handles this automatically for workspace libs)
    watchFolders: [],
  }).then((nxConfig) =>
    // Take the Nx-enhanced config and pipe it into NativeWind
    // This adds Tailwind CSS support, pointing to a global CSS file
    withNativeWind(nxConfig, {
      // Path to the Tailwind CSS file for styling NativeWind components
      input: './src/global.css',
    }),
  );
}

// Export the config as a resolved promise
// Metro expects a function returning the config; calling createConfig() runs it
module.exports = createConfig();

0. Key Explanations for the Metro Configuration.
1. Imports:
   • Each library integrates a specific feature—Nx for monorepos, Expo for defaults, NativeWind for Tailwind, and Metro for merging.
2. Default Config:
   • getDefaultConfig(__dirname) sets up a standard Expo-aware Metro config, which we extend.
3. Custom Config:
   • Tweaks caching, SVG handling (via a transformer), and file extensions for broader compatibility.
4. SVG Handling:
   • Removing svg from assetExts and adding it to sourceExts ensures SVGs are processed as code, not assets.
5. Async Flow:
   • createConfig chains withNxMetro and withNativeWind asynchronously, building the config step-by-step.
6. NxMetro:
   • Enhances Metro for Nx workspaces, though here it’s minimal (no extra watchFolders).
7. NativeWind:
   • Adds Tailwind CSS, linking to global.css for styling.

Expo Tamagui

Work in Progress Notes

---