Javascript

JS Information

JavaScript / JS is a core client-side language that has evolved into an industry leading collection of libraries and frameworks through Node.

NodeJS

NodeJS is an open source javascript software built with the v8 runtime engine that allows the developer to build scalable back-end environments for their application.

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.

SWUP Framework

SWUP Install

Adding swup page into your nodejs application via yarn.
```
  yarn add swup
```
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

SWUP Journal

11/10/2022 - There seems to be issues with SWUP and frameworks that use partial hydration. The reference of the DOM seems to be the core, thus there might be a requirement of a modular framework that sits in between certain partial content and SWUP. Based upon the research, it seems that Gia might be an approach to take.

Tools

k6 by Grafana
- Official Repo
- k6 is a modern load testing tool that you can use to test case your javascript application.
- Recommended by: FireShip
Rome Tools Unified tool for Javascript / CSS3 / HTML / Typescript
- Recommended by: Ziggy9263
- h0lybyte: 10/10 - “Now I am afraid to open multiple JSX files , for the fear of the roman gods striking my screen with red digital blood blobs”

Bun

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

Bun 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

Docker

Bun recommends using the jarredsumner/bun:edge build as the Docker base.

  docker pull jarredsumner/bun:edge
  docker run --rm --init --ulimit memlock=-1:-1 jarredsumner/bun:edge

Example of Docker build:
- ```
  FROM jarredsumner/bun:edge
  WORKDIR /app
  COPY package.json package.json
  COPY bun.lockb bun.lockb
  RUN bun install
  COPY . .
  EXPOSE 3000
  ENTRYPOINT ["bun", "index.js"]
```
  - Remember to double check the working directory variable : WORKDIR /app
  - Make sure the port 3000 is the one being used by your application.
  - Ensure that index.js is the start of your application.

Bun Upgrade

CLI
- Latest Version
  - ```
    bun upgrade
```
- Canary Version
  - ```
    bun upgrade --canary
```

Bun Commands

Run

This will execute the script (Javascript / Typescript) within the runtime engine.

bun run

This should replace npm run with bun run.

Clean

To remove the cache:

bun run clean

Hot

Hot Reload : Bun will live reload the application, similar to file watchers like nodemon.

bun run --hot index.ts

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

Flags

This chart is from the official documentation.

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

Widgets

Javascript widgets / embeds. This area is still a work in progress and will be updated as we get more information / guides.

React Widget from JavascriptPros
- Github Repo
Alpine Embed Guide

Svelte

Svelte is a front end compiler engine that focuses on UX/UI , (user interfaces), through compiled and highly optimized Javascript.

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:

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

CarbonSvelte

WIP - This brings IBM’s Carbon Design System UX/UI into Svelte. I have yet to test it out, keeping this here as a reference for future usage.

Astro

Astro is an island architecture style static website generator that enables fast, powerful and multi-framework site.

Astro Svelte

Svelte is an amazing way to create brilliant UX/UI that is extremely fast within the framework of Astro.

More information on Svelte

Astro Svelte Render

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" />