ytnozto

GregorWedlich

_gregor_paul_

hello@sil3ntrunning.net

Erfahre, wie Next.js Server Actions und Tanstack Query deine Todo-App mit schnellem Datenmanagement und sicheren Mutationen!!

tanstack-query-server-actions-next.png

Das Dream-Team für dein Datenmanagement?

Next.js Server Actions & Tanstack Query

TanStackQuery

next.js

react

Ich bin aktuell ziemlich angetan von Deno und dessen Ökosystem. Seit Version 2 vor einigen Tagen erschienen ist, habe ich mich intensiver mit den verschiedenen Aspekten von Deno beschäftigt. Unter anderem habe ich den Package Manager JSR erkundet, der unabhängig arbeitet und nicht auf Deno selbst angewiesen ist, aber dennoch das gesamte Deno-Ökosystem ergänzt. In diesem kurzen Tutorial möchte ich dir einen Überblick geben, wie einfach es ist, eigene JSR-Pakete zu veröffentlichen.

## Projekt erstellen

Um zu starten, initialisiere dein Projekt mit folgendem Befehl:

```bash
deno init orakel-otter // Unser beispiel Projektname
```
## Projekt öffnen

Wechsel in das Projektverzeichnis:
```bash
cd orakel-otter
```

## Aufräumen

Für dieses Tutorial können wir die Datei main_test.ts löschen. Es ist jedoch auch in Ordnung, sie zu behalten. Öffne jetzt die `main.ts` und entferne den boilerplate Code.

## Unsere App erstellen

Ich habe hier ein einfaches Programm, das die aktuellen Bitcoin-Preise von einer API abruft. Mir ist nichts Besseres eingefallen, aber es dient dazu, zu veranschaulichen, wie das Veröffentlichen von JSR-Paketen mit Deno 2 funktioniert. Ich habe es 🦦 Orakel Otter 🔮 genannt, warum auch immer :-)

Hier ist unser Programm, das die aktuellen Bitcoin-Preise von einer API abruft:
```typescript
type Response = [string, number][];

async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  try {
    const response = await fetch("https://mempool.space/api/v1/prices/");
    const pricesObj = await response.json();
    const prices = Object.entries(pricesObj);

    if (currency === "ALL") {
      return prices as Response;
    }

    const filteredPrice = prices.filter(
      (price) => price[0] === currency?.toUpperCase()
    );

    if (filteredPrice.length > 0) {
      return [...prices[0], filteredPrice[0]] as Response;
    } else {
      throw new Error(`Currency ${currency} not found.`);
    }
  } catch (error) {
    console.error(error);
    return [];
  }
}

const getPrice = await orakelOtter();
console.log(getPrice);
```

**Führe folgenden Befehl aus, um das Programm zu testen:**

```bash
deno task dev
```
Das Terminal wird um Erlaubnis bitten, auf das Netzwerk zuzugreifen. Bestätige dies mit y:
```bash
Watcher File change detected! Restarting!
┏ ⚠️  Deno requests net access to "mempool.space:443".
┠─ Requested by `fetch()` API.
┠─ Learn more at: https://docs.deno.com/go/--allow-net
┠─ Run again with --allow-net to bypass this prompt.
┗ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) > y
```
Sobald der Zugriff gewährt ist, solltest du eine Ausgabe wie diese sehen:
```bash
✅ Granted net access to "mempool.space:443".
[
  [ "time", 1728830104 ],
  [ "USD", 62513 ],
  [ "EUR", 57121 ],
  [ "GBP", 47771 ],
  [ "CAD", 86060 ],
  [ "CHF", 53563 ],
  [ "AUD", 92464 ],
  [ "JPY", 9344100 ]
]
```
## Projekt zur Veröffentlichung auf JSR.IO vorbereiten

Um das Paket auf JSR.IO zu veröffentlichen, benötigst du ein Konto. Nach dem Einloggen gehst du auf dein Profilbild, wählst „+ Ein Paket veröffentlichen“ und erstellst einen Scope. Zum Beispiel kannst du deine Initialen als Scope verwenden. Danach benennst du dein Paket "orakel-otter" (oder wie auch immer du dein Projekt genannt hast) und klickst auf „Create“.

## Codeanpassungen

Vor der Veröffentlichung müssen wir uns noch die main.ts anpassen und eine Dokumentation hinzufügen.

In der main.ts nehmen wir folgende Änderungen vor:

1.	Entferne die console.log()-Zeile und die Instanzierung.
```typescript
const getPrice = await orakelOtter();
console.log(getPrice);
```
2.	Füge export zur orakelOtter-Funktion hinzu, damit sie als Modul zugänglich ist.
3.	Füge eine Dokumentation zur Funktion hinzu, was optional ist, aber für einen besseren JSR-Score empfohlen wird.
```typescript
/**
 * Fetches the current prices for various currencies from the Mempool.space API.
 *
 * @param currency - The currency (USD, EUR, GBP, CAD, CHF, AUD, JPY) to filter the prices for. If not provided, returns all available prices.
 * @returns An array of tuples, where the first element is the currency code and the second element is the current price.
 * @throws {Error} If the specified currency is not found in the API response.
 */
export async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  // Funktion bleibt unverändert
}
```
4.	Aktualisiere die deno.json-Datei mit den erforderlichen Feldern: name, version und exports. Inklusive Lizenz (optional):
```bash
{
  "name": "@gw/orakel-otter",
  "version": "0.0.1",
  "license": "MIT",
  "exports": "./main.ts"
}
```
Der Name muss den Scope und den Paketname beinhalten **(@gw/orakel-otter)**, die Version muss dem SemVer-Format folgen.

## Paket veröffentlichen

Die Veröffentlichung kann über die CLI oder GitHub Actions erfolgen. Für dieses Tutorial verwenden wir die CLI.

Führe einen Testlauf durch, um sicherzustellen, dass alles korrekt eingerichtet ist:
```bash
deno publish --dry-run
```
Wenn der Testlauf erfolgreich ist, veröffentliche nun dein Paket in dem du den Befehl ohne `--dry-run` ausführst:

```bash
deno publish
```
Nun wirst du Automatisch zu deinem Default Browser weitergeleitet um dich zu authentifizieren, hier jetzt die bestätigen das alles ok ist und dein Paket wird veröffentlicht! Und das wars auch schon, dein erstes JSR Package wurde veröffentlicht :-)

## Fazit

Dieses Tutorial deckt nicht alle Details ab, geht aber auf die wichtigsten Punkte ein, um ein Paket auf JSR.io zu veröffentlichen. Beachte, dass JSR Pakete basierend auf verschiedenen Kriterien bewertet, die zum „JSR-Score“ beitragen. Ziel ist es, eine gute Dokumentation und Best Practices einzuhalten, um eine hohe Punktzahl zu erreichen. Ein gut dokumentiertes Paket kann dir wie in meinem Beispiel eine Bewertung von 94 Punkten einbringen!

**Weitere Details findest du in den folgenden Dokumentationen**

[JSR Documentation](https://jsr.io/docs/publishing-packages)

[Deno Documentation](https://docs.deno.com/runtime/reference/cli/publish/)

**Ryan Dahl der gründer von Nodejs und Deno über die neue Version Deno 2:**
[Rayen Dahl about Deno 2](https://www.youtube.com/watch?v=d35SlRgVxT8)

**Nützliche Links:**

[Project on GitHub](https://github.com/GregorWedlich/orakel-otter)

[Project on jsr.io](https://jsr.io/@gw/orakel-otter)



Wir lernen, wie man mit Deno 2 ein Paket auf JSR.io veröffentlicht.

jsr-deno-2.png

mit Deno 2

 Wie du ein Paket auf JSR.io veröffentlichts

deno

Wie wir mit React Fiber, Drei und Three.js in Next.js ein Metallic Flakes Material erstellen.

A simple Metalic Material Effekt with three.js and next.js

metallic-flakes-threejs.png

Wir wir einen Metallic Flakes Material erstellen

Metallic-Flakes Material in three.js und next.js

typescript

three.js

## React Hooks: Vorwort

  
In dieser Reihe schauen wir uns die verschiedenen React Hooks an und wie wir sie einsetzen können. Ich verfolge dabei keinen tieferen Plan oder ein Skript, daher könnte es gut möglich sein, dass du dich jetzt fragst, wieso fängt der denn jetzt mit dem useRef\-Hook an? Ehrlich gesagt, weiß ich das auch nicht. Seht es mir also nicht nach, ich schreibe hier einfach nur Dinge nieder, und vielleicht hilft es ja doch jemandem da draußen. 

Lange Rede, kurzer Sinn, lasst uns beginnen.

## Wozu dient der useRef Hook?

Der useRef\-Hook in React dient dazu, Referenzen auf DOM-Elemente oder andere mutable Objekte zu erstellen, die während des gesamten Lebenszyklus einer Komponente bestehen bleiben. Im gegensatz zu State-Änderungen, welche ein Re-Rendering auslösen, führt eine Referenz mit useRef nicht zu einem erneuten Rendern der Komponente. 

useRef wird häufig verwendet, um Werte zu speichern, die über Renderings hinweg persistent bleiben sollen, aber nicht in den Render-Prozess einbezogen werden müssen. Beispiele dafür sind das Speichern von DOM-Referenzen, Timer-IDs oder anderen mutierbaren Werten, die keinen Einfluss auf das UI haben.

Um es hier auf den einfachsten Weg darzustellen, wofür der useRef im Kern genutzt werden kann, hier ein kleines Beispiel um den Fokus durch Klick auf einen Button auf das Input Feld zu setzen. 

```javascript
import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputElement = useRef<HTMLInputElement>(null);

  const onButtonClick = () => {
    // `current` points on the Input-element
    inputElement.current?.focus();
  };

  return (
    <>
      <input ref={inputElement} type="text" />
      <button onClick={onButtonClick}>Focus</button>
    </>
  );
}
```

## Was passiert hier?

  
Wir rufen useRef auf der obersten Ebene unserer Komponente auf. Wir sind hier nicht limitiert und könnten auch weitere Refs deklarieren.

useRefgibt ein Ref-Objekt zurück, mit einer current property,welche wir auf einen Anfangswert gesetzt haben (null).

```typescript
import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputElement = useRef<HTMLInputElement>(null);
	// ...
```

Dann übergeben wir unser Ref-Objekt deminputElementals ref\-Attribut an das JSX des Dom-Knotens.

```typescript
  return (
    <>
      <input ref={inputElement} type="text" />
      <button onClick={onButtonClick}>Focus</button>
    </>
  );
```

Nachdem React den DOM-Node  erstellt und auf den Bildschirm anzeigt, setzt React die current Eigenschaft ihres Ref-Objekts auf diesen DOM-Node. Damit können wir nun auf das `<input>` Feld zugreifen und Methoden wie focus() aufrufen.

```typescript
  const onButtonClick = () => {
    // `current` points on the Input-element
    inputElement.current?.focus();
  };
```

## Weitere Anwendungsfälle für useRef

Ein typischer Anwendungsfall wäre zum Beispiel der Einsatz bei One-Pager-Applikationen, wo wir zu bestimmten Punkten springen möchten. Mit useRef haben wir Zugriff auf Browser-Methoden wie scrollIntoView(), um zu diesen Punkten zu scrollen.

Weiterführende Links:  
  
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

https://react.dev/learn/manipulating-the-dom-with-refs

In dieser Reihe schauen wir uns die verschiedenen React Hooks an und wie wir sie einsetzen können.

thumbnail-v1-useRef.png

React Hooks vorgestellt

React Hooks: Der useRef Hook

In diesem Beitrag zeige ich euch, wie man mit Server Actions in Next.js arbeitet. Keine Sorge, ich werde es einfach halten und mich nicht in die hitzige Diskussion einmischen, ob es eine gute Idee ist, Server-Logik und Client-Logik zu vermischen. Aber weil diese Diskussion so kontrovers ist (und es immer noch bleibt), möchte ich euch dieses amüsante Meme dazu nicht vorenthalten.

 ![{{ w: 1000, h: 300 }}](/uploads/server_action_is_crazy_v0_yloxtuizn3xb1_4281400aa9.webp) 

Um dieses Bild richtig zu verstehen, solltet ihr euch den Vortrag von Vercel ansehen, in dem das Feature der Server Actions erstmals vorgestellt wurde.

[Hier geht's zum Video.](https://www.youtube.com/watch?v=9CN9RCzznZc)

Da einige ziemlich irritiert davon waren, serverseitigen Code innerhalb von clientseitigem Code auszuführen, und dies von vielen Seiten kritisiert wurde, hat das Internet natürlich direkt ein paar Memes dazu erfunden. Ein gutes Beispiel dafür ist das 2D-Game Redstone-Meme hier.

Ob sich die Server Actions letztendlich durchsetzen werden, wird die Zeit zeigen. Die Community ist dazu gespalten.

## Kopf in den Nacken & Los geht's

Leider komme auch ich nicht ganz um ein bisschen Einführung und Theorie herum. Also hier das Wichtigste: Mit der Einführung des App-Routers in Next.js 13.4 wurde ein neues Feature namens Server Actions vorgestellt. Dieses Konzept soll die Entwicklung von Webanwendungen optimieren, indem es die Kommunikation zwischen Client und Server verbessert und unnötige Komplexität reduziert. Mit Server Actions können bestimmte Aktionen direkt auf dem Server ausgeführt werden, anstatt sie auf der Client-Seite zu behandeln und dann über die /api an den Server weiterzugeben. Dadurch wird die Anwendungsarchitektur vereinfacht, die Leistung verbessert und eine klarere Trennung zwischen Client- und Server-Aufgaben erreicht.

Seit Next.js 14 sind Server Actions offiziell als stabiles Feature verfügbar, und wir können jetzt von den Vorteilen profitieren, wie zum Beispiel der Reduzierung von Client-Server-Roundtrips und der Möglichkeit, serverseitige Mutationen durchzuführen. Allerdings gab es auch einige Kritikpunkte an der Einführung von Server Actions (siehe unser Meme). Einige sahen Ähnlichkeiten zur Arbeitsweise von PHP und kritisierten die Vermischung von Zuständigkeiten zwischen Client und Server. Auch Bedenken hinsichtlich der Skalierbarkeit und Serverbelastung wurden geäußert. Daher ist es wichtig, sorgfältig abzuwägen, ob und wie Server Actions in einem Projekt eingesetzt werden sollten, um die bestmögliche Architektur und Leistung zu erzielen.

Server Actions müssen explizit als solche markiert werden. Das geschieht mit der Anweisung "use server";. Wir werden im Laufe unserer Beispiele noch näher darauf eingehen. Ein Vorteil von Server Actions ist, dass wir Async/Await in unseren Komponenten verwenden können, da Server Actions auf dem Server ausgeführt werden. Was jedoch nicht möglich ist, sind clientseitige React Hooks wie useEffect, useMemo usw. Diese können wie gewohnt nur in Client Components verwendet werden.

Es gibt verschiedene Möglichkeiten, wie wir Server Actions einsetzen können: In einem Formelement, durch Event Handler oder auch in einem useEffect-Hook. Ich werde hier auf alle Varianten mit Beispielen eingehen und hoffe, dass es euch weiterhilft und ihr danach etwas mehr Klarheit habt.

## Server Actions in form Elementen

React hat das HTML <form>-Element mit der Prop action erweitert, die es uns ermöglicht, Server Actions direkt beim Absenden des Formulars auszuführen.

```jsx
  return (
    <form action={createPost}>
      <label className="block">Title</label>
      <input type="text" name="title" className="block mb-2" />

      <label className="block">Text</label>
      <textarea
        name="post-text"
        rows={4}
        className="block mb-2"
        placeholder="Post Text"
      ></textarea>
      <button type="submit" className="bg-slate-600 p-2">
        Create Post
      </button>
    </form>
  );
```
Wenn wir die Action in einem `<form>`-Element aufrufen, erhält sie automatisch das [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData)-Objekt. Mit diesem Objekt sind wir nicht mehr auf den React Hook `useState` angewiesen, um die Felder zu verwalten. Stattdessen können wir die nativen Methoden von [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods) nutzen und darauf zugreifen.

```jsx
export default function CreatePostForm() {
  async function createPost(formData: FormData) {
    'use server';

    const data = {
      title: formData.get('title') as string,
      body: formData.get('post-text') as string,
    };

    await createPostAction(data);
  }
```
Zuerst kennzeichnen wir mit `"use server";` unsere Funktion explizit als Server Action.

Die eigentliche Verarbeitung haben wir in eine extra Datei namens "action.ts" ausgelagert. Es wäre aber auch möglich, die Funktionalität direkt in unsere Server-Komponente einzufügen, und es würde sogar als Inline-Code innerhalb der `action`-Prop in unserem Formelement funktionieren.

Hier geht es zu unserem **[Beispielcode.](https://stackblitz.com/edit/nextjs-server-actions-form?file=lib%2Factions.ts)**

> Schaut euch auch die [Dokumentation](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms) dazu an dort wird das ganze noch weiter vertieft.

## Server Actions mit Event Handler

Wie schon am Anfang gesagt, lassen sich Server Actions auch außerhalb von Formelementen aufrufen.

Lasst uns also die Möglichkeit betrachten, Server Actions mit Event-Handlern (onClick, onChange, ...) aufzurufen.

Dazu haben wir ein kleines Programm geschrieben, das durch einen Klick auf den Button "Click me" die Server Action aufruft. Dabei wird ein Fake-Eintrag bei unserer API erstellt und die Antwort an unsere Client-Komponente "ShowPost.tsx" weitergegeben.

```jsx
'use client';

import { createPostAction } from '@/lib/actions';
import { useState } from 'react';
import ShowPost from '@/components/ShowPost';
import { Post } from '@/lib/types';

export default function CreatePost() {
  const [post, setPost] = useState<Post>();

  return (
    <>
      <button
        className="bg-stone-500 p-1 rounded"
        onClick={async () => {
          const createPost = await createPostAction();
          setPost(createPost);
        }}
      >
        Click me
      </button>
      <div className="pt-10">{post && <ShowPost post={post} />}</div>
    </>
  );
}
```
Ich denke, dass mein Beispiel hier ganz gut erklärt, was eigentlich passiert. Die onClick-Methode ruft in einer Async-Funktion die Server Action auf und schreibt die Antwort mit dem Hook useState in die Variable "post".

Den kompletten Code dazu könnt ihr euch hier [**anschauen**](https://stackblitz.com/edit/nextjs-server-actions-event-handler-method?file=components%2FCreatePost.tsx). 

## Server Actions mit useEffect aufrufen

Eine weitere Möglichkeit ist es, innerhalb von Client-Komponenten mit dem React useEffect-Hook Server Actions aufzurufen. Ich werde hier kurz darauf eingehen, und am Ende findet ihr wieder den Link zu meinem Code-Beispiel.

Bei jedem Reload der Seite holen wir uns mit unserem useEffect-Hook alle Einträge von unserer API.

```jsx
'use client';

import { useEffect, useState } from 'react';
import { getPostsAction } from '@/lib/actions';
import { Post } from '@/lib/types';

export default function ShowPosts() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const posts = await getPostsAction();
        setPosts(posts);
      } catch (error) {
        console.log(error);
      }
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <ul>
        {posts.map((posts) => (
          <li className="my-5" key={posts.id}>
            {posts.id}. {posts.title}
          </li>
        ))}
      </ul>
    </div>
  );
}
```
Es wird bei jedem Seiten-Reload die API aufgerufen `const posts = await getPostsAction();`, die Antwort unseres Servers speichern wir nun mit useState in einer Variable und liefern sie an unser Frontend aus.

Hier geht es zu dem [Beispielcode](https://stackblitz.com/edit/nextjs-server-actions-useeffect-method?file=components%2FShowPosts.tsx).

## Error Handling mit Server Actions

In unseren bisherigen Beispielen haben wir gänzlich auf die Fehlerbehandlung im Frontend verzichtet, daher würde ziemlich großer Wahrscheinlichkeit unsere App bei Fehlern abstürzen. Deswegen zeige ich hier noch, wie wir in unserem Beispiel mit `<form>`-Elementen und Server Actions Fehler abfangen können.

Damit wir dem Frontend die Fehlermeldung übergeben können, benötigen wir eine Client-Komponente. Damit unser Programm aber nicht abstürzt, müssen wir unsere Komponente dazu etwas umbauen. Da wir Server Actions inline innerhalb unseres Action-Elements in unserem `<form>`-Element aufrufen können, refaktorieren wir unseren Code aus dem ersten Beispiel so, dass wir bei einem Fehler mit useState den Fehler speichern und an unser Frontend übergeben.

Der Code vorher:

```jsx
// CreatePost.tsx

import { createPostAction } from '@/lib/actions';

export default function CreatePostForm() {
  async function createPost(formData: FormData) {
    'use server';

    const data = {
      title: formData.get('title') as string,
      body: formData.get('post-text') as string,
    };

    await createPostAction(data);
  }

  return (
    <form action={createPost}>
      <label className="block">Title</label>
      <input type="text" name="title" className="block mb-2" />

      <label className="block">Text</label>
      <textarea
        name="post-text"
        rows={4}
        className="block mb-2"
        placeholder="Post Text"
      ></textarea>
      <button type="submit" className="bg-slate-600 p-2">
        Create Post
      </button>
    </form>
  );
}
```
Wenn ihr hier auf "Create Post" geht wenn ihr nichts angegeben habt wird euch der Fehler nicht angezeigt nur wenn ihr innerhalb der Server Action die Antwort loggen würdet könntet ihr in der Server Console den Fehler sehen. Im schlimmsten fall stürzt aber auch eure App ab und um das zu verhinden zeigen weißen wir den User darauf hin das er Titel und Text angeben muss.

```ts
// actions.ts
'use server';
import { Post, PostForm } from '@/lib/types';

export async function createPostAction(postData: PostForm): Promise<Post> {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
        title: postData.title,
        body: postData.body,
        userId: 1,
      }),
      headers: { 'Content-type': 'application/json; charset=UTF-8' },
    });
    // Fake response from API
    const data: Post = await res.json();

    // Show Post when click on "Create Post"
    console.log(data);

    return data;
  } catch (error) {
    console.log(error);
    throw new Error('Failed to create post');
  }
}
```

Der Code nach dem wir ihn Refaktoriert haben:

```jsx
//CreatePost.tsx
'use client';
import { createPostAction } from '@/lib/actions';
import { useState } from 'react';

export default function Form() {
  const [error, setError] = useState('');

  return (
    <form
      action={async (formData: FormData) => {
        const data = {
          title: formData.get('title') as string,
          body: formData.get('post-text') as string,
        };

        const result = await createPostAction(data);
        if ('error' in result) {
          setError(result.error);
        }
      }}
    >
      <label className="block">Title</label>
      <input type="text" name="title" className="block mb-2" />

      <label className="block">Text</label>
      <textarea
        name="post-text"
        rows={4}
        className="block mb-2"
        placeholder="Post Text"
      ></textarea>
      {error && <p className="text-red-400">{error}</p>}
      <button type="submit" className="bg-slate-600 p-2">
        Create Post
      </button>
    </form>
  );
}
```

```ts
// actions.ts
'use server';
import { Post, PostForm } from '@/lib/types';

export async function createPostAction(
  postData: PostForm
): Promise<Post | { error: string }> {
  // Check if title and body is not empty
  if (!postData.title || !postData.body) {
    return { error: 'Title and body are required.' };
  }

  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
        title: postData.title,
        body: postData.body,
        userId: 1,
      }),
      headers: { 'Content-type': 'application/json; charset=UTF-8' },
    });
    // Fake response from API
    const data: Post = await res.json();

    // Show Post when click on "Create Post"
    console.log(data);

    return data;
  } catch (error: any) {
    console.log(error);
    return { error: error.message };
  }
}

```
Das war's auch schon! So einfach könnt ihr in Formelementen mit Fehlern umgehen. Diese können natürlich auch anders dargestellt werden, z.B. mit einer Toast-Message oder Ähnlichem.

## Fazit

In diesem Beitrag habe ich euch gezeigt, wie man mit Server Actions in Next.js arbeitet. Wir haben uns angesehen, wie Server Actions in Formelementen, durch Event-Handler und in Kombination mit dem useEffect-Hook verwendet werden können. Dabei habe ich auch erklärt, wie ihr mit Fehlern umgehen könnt.

Server Actions bieten einige Vorteile, wie die Reduzierung von Client-Server-Roundtrips und die Möglichkeit, Async/Await in euren Komponenten zu nutzen. Allerdings gibt es auch Kritikpunkte, wie die Vermischung von Zuständigkeiten zwischen Client und Server und Bedenken hinsichtlich der Skalierbarkeit.

Ob sich Server Actions letztendlich durchsetzen werden, bleibt abzuwarten, da die Community dazu gespalten ist. Aber mit etwas Übung und Anpassung könnt ihr die Vorteile dieser neuen Funktionalität voll ausschöpfen und eure Anwendungen optimieren.

Ich hoffe, dieser Beitrag hat euch einen guten Überblick gegeben und ihr habt nun mehr Klarheit darüber, wie ihr Server Actions in euren Projekten einsetzen könnt. Viel Spaß beim Ausprobieren und Entwickeln!


Next.js Server Actions: Form, Event Handler und useEffect - so geht's!

future42_Security_in_the_Web_Networked_Server_securitya_vinta_b43dd4c2-45d9-4509-9fff-08f231b8f7ef_0.png

Super Simple

Next.js Server Actions

nextjs

Im Ökosystem der modernen Webentwicklung ist die nahtlose Integration von Frontend und Backend über verschiedene Ursprünge hinweg ein wesentliches Element. Doch diese Integration stellt Entwickler:innen oft vor eine Herausforderung: die 'Same-Origin Policy' (SOP), eine Sicherheitsmaßnahme, die verhindert, dass eine Webseite Skripte ausführt, die auf Daten von einem anderen Ursprung als dem eigenen zugreifen. Hier kommt CORS, oder Cross-Origin Resource Sharing, ins Spiel.

CORS ist eine Technik, die es Webanwendungen ermöglicht, die Einschränkungen der SOP zu umgehen und sicher auf Ressourcen von anderen Ursprüngen zuzugreifen. Es ist ein Konzept, das in der heutigen vernetzten Welt, in der APIs und externe Dienste eine zentrale Rolle spielen, von großer Bedeutung ist. Bevor CORS weit verbreitet war, griffen Entwickler:innen oft auf Lösungen wie JSONP (JSON with Padding) zurück, die zwar funktional, aber nicht ohne Sicherheitsbedenken waren.

In diesem Artikel werden wir uns anschauen, wie CORS funktioniert, warum es für die Entwicklung moderner Webanwendungen unerlässlich ist und wie es in Node.js mit dem CORS-Paket implementiert wird. Von den Grundlagen der 'Simple Requests' bis hin zu den komplexeren 'Preflight-Requests' decken wir alle wichtigen Aspekte ab, die wir als Entwickler:in wissen müssen, um die Kommunikation zwischen verschiedenen Ursprüngen sicher und effizient zu gestalten.

## Einführung in CORS (Cross-Origin Resource Sharing) und JSONP (JSON with Padding)

Im Bereich der Webentwicklung ist das Konzept von Cross-Origin Resource Sharing (CORS) von zentraler Bedeutung. Es ermöglicht Webanwendungen, die Einschränkungen der 'Same-Origin Policy' (SOP) zu überwinden.

Vor der Etablierung von CORS griffen Entwickler:innen oft auf JSONP (JSON with Padding) zurück, um Cross-Origin-Datenabrufe zu ermöglichen. JSONP nutzte Skript-Tags, um Daten von anderen Ursprüngen zu laden, indem es die Einschränkungen der SOP umging. Obwohl diese Methode funktionierte, war sie nicht ohne Mängel. Sicherheitsbedenken, wie die Anfälligkeit für Cross-Site Scripting (XSS) Angriffe, und Designeinschränkungen, wie die Begrenzung auf GET-Anfragen, machten JSONP zu einer suboptimalen Lösung.

CORS hingegen bietet eine sicherere und flexiblere Alternative. Durch das Definieren spezifischer Regeln und Header ermöglicht CORS Webseiten den sicheren Zugriff auf Ressourcen über Ursprünge hinweg. Es erlaubt Entwickler:innen, moderne Webanwendungen zu erstellen, die nahtlos Dienste und APIs von verschiedenen Ursprüngen integrieren können. Von der einfachen Abfrage von Daten bis hin zu komplexen API-Interaktionen hat CORS die Art und Weise, wie Webanwendungen kommunizieren, revolutioniert.

## Grundlagen und Anwendungsfälle von CORS

CORS (Cross-Origin Resource Sharing) ist eine Technik, die ein grundlegendes Problem in der Webentwicklung adressiert, welches durch die 'Same-Origin Policy' (SOP) entsteht. Die SOP dient als Sicherheitsmaßnahme, indem sie festlegt, dass Skripte auf einer Webseite nur auf Ressourcen desselben Ursprungs zugreifen dürfen. Obwohl dies eine wichtige Sicherheitsvorkehrung ist, kann es die Funktionalität legitimer Anwendungen, die auf die Integration verschiedener Online-Dienste angewiesen sind, einschränken.

CORS ermöglicht die Kommunikation zwischen unterschiedlichen Ursprüngen, ohne die Sicherheit zu beeinträchtigen, indem es spezielle HTTP-Header verwendet. Es ist nicht auf bestimmte HTTP-Methoden wie GET, POST oder DELETE beschränkt und bietet somit eine vielseitige Lösung für eine Vielzahl von Anwendungen. Im Gegensatz zu JSONP, das nur GET-Anfragen unterstützt, ist CORS flexibler und sicherer.

Die Notwendigkeit von CORS entsteht hauptsächlich, wenn eine Webanwendung auf Ressourcen oder Dienste zugreifen muss, die auf einem anderen Ursprung als dem eigenen gehostet werden. Ein typisches Beispiel hierfür ist eine Benutzeroberfläche (UI), die unter einer Domain wie 'www.beispiel-ui.com' läuft und auf eine API unter einer anderen Domain wie 'api.beispiel-service.com' zugreifen muss.

Es ist wichtig zu erwähnen, dass CORS nicht für alle Arten von Cross-Origin-Anfragen benötigt wird. Browser erlauben beispielsweise das Laden von JavaScript oder CSS von einem CDN oder das Einbinden von iFrames von anderen Webseiten, solange diese Anfragen die GET-Methode verwenden. Für komplexere Interaktionen, insbesondere solche, die POST- oder PUT-Anfragen beinhalten oder Benutzerdaten und authentifizierte Sessions verarbeiten, wird CORS jedoch unerlässlich.

In der Praxis müssen Entwickler:innen verstehen, wann und warum CORS in ihren Anwendungen erforderlich ist. Es ist ein Balanceakt zwischen der Sicherheit und der Funktionalität der Anwendung. CORS ermöglicht es, diese Interaktionen auf eine sichere und kontrollierte Weise zu handhaben, was es zu einem unverzichtbaren Werkzeug in der modernen Webentwicklung macht.

## CORS Konfiguration auf dem Server

Die Implementierung von CORS ist primär eine serverseitige Aufgabe. Während die Client-Seite, zum Beispiel die Benutzeroberfläche einer Webanwendung, CORS-Anfragen initiieren kann, liegt es am Server, diese Anfragen entsprechend den definierten CORS-Richtlinien zu akzeptieren oder abzulehnen. Diese Herangehensweise stellt sicher, dass die Kontrolle über die Zugriffsrechte bei der vertrauenswürdigen Seite – dem Server – liegt.

Die Konfiguration von CORS auf dem Server beinhaltet in der Regel die Definition spezifischer HTTP-Header, die festlegen, welche Ursprünge Zugriff auf die Ressourcen des Servers haben dürfen. Der wohl bekannteste dieser Header ist Access-Control-Allow-Origin, der entweder einen spezifischen Ursprung oder ein Wildcard-Symbol (*) enthalten kann. Während die Verwendung eines Wildcards für öffentlich zugängliche Ressourcen wie Schriftarten oder Bibliotheken aus einem CDN sinnvoll sein kann, ist es für sensible Daten empfehlenswert, spezifische Ursprünge anzugeben, um die Sicherheit zu erhöhen.

*Ein wichtiger Aspekt bei der Konfiguration von CORS ist, dass alle modernen Browser CORS-Regeln unterstützen und durchsetzen. Sogar ältere Browser wie der Internet Explorer 11 bieten Unterstützung für CORS.*

Im Falle eines Cross-Origin-Zugriffs sendet der Browser automatisch einen 'Origin-Header' mit der Anfrage. Dieser Header informiert den Server über den Ursprung der Anfrage. Der Server prüft dann diesen Ursprung gegen seine CORS-Richtlinien und entscheidet, ob die Anfrage akzeptiert oder abgelehnt wird. Wird die Anfrage akzeptiert, fügt der Server den entsprechenden Access-Control-Allow-Origin-Header zur Antwort hinzu. Dieser Prozess ist transparent und wird vollständig vom Browser und dem Server gehandhabt, sodass die Client-Anwendung in der Regel keine zusätzliche Konfiguration benötigt.

## Methoden in CORS (Simple Requests & Preflight-Requests)

### Simple Requests

Simple Requests in CORS sind Anfragen, die bestimmte Kriterien erfüllen und daher keiner vorherigen Genehmigung durch den Server bedürfen. Diese Anfragen verwenden üblicherweise Methoden wie GET, HEAD oder POST. Eine wichtige Bedingung für Simple Requests ist, dass der Content-Type der Anfrage entweder application/x-www-form-urlencoded, multipart/form-data oder text/plain sein muss.

Bei einem Simple Request fügt der Browser automatisch den Origin-Header hinzu. Der Server prüft diesen Origin und, wenn er mit den CORS-Richtlinien des Servers übereinstimmt, antwortet er mit dem Access-Control-Allow-Origin-Header in seiner Antwort. Diese Vorgehensweise ermöglicht eine einfache und effiziente Abwicklung von Cross-Origin-Anfragen für alltägliche Szenarien.

In Node.js können Simple Requests mit dem CORS-Paket und Express wie folgt implementiert werden:

```js
const express = require('express');
const cors = require('cors');

const app = express();

// Einfache CORS-Konfiguration: Erlaubt Zugriffe von allen Ursprüngen
app.use(cors());

app.get('/simple-route', (req, res) => {
    res.json({ msg: 'Simple Request erfolgreich' });
});

app.listen(3000, () => {
    console.log('Server läuft auf Port 3000');
});
```
*Dadurch das wir hier keine Optionen festlegen wird automatisch ein Wildcard gesetzt `Access-Control-Allow-Origin: *` also alle Clienten haben zugriff.*

Unser Beispiel oben erlaubt ja alle externen Anfragen, Simple Requests erlaubt aber auch die Spezifiierung was erlaubt ist:

- HTTP-Methoden: GET, HEAD, POST.
- Nur bestimmte Standard-Header wie `Accept`, `Accept-Language`, `Content-Language`, `Content-Type `(aber nur mit bestimmten Werten wie `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`) sind erlaubt.
- Keine zusätzlichen manuellen HTTP-Header.

Hier ist ein Beispiel, wie ein Simple Request mit spezifischem Origin Header in Node.js aussehen könnte:

```js
const express = require('express');
const cors = require('cors');

const app = express();

// CORS für Simple Requests mit spezifischem Origin
app.use(cors({
    origin: 'http://example.com'
}));

app.get('/simple-route', (req, res) => {
    res.json({ msg: 'Simple Request mit spezifischem Origin' });
});

app.listen(3000, () => {
    console.log('Server läuft auf Port 3000');
});
```

### Preflight-Requests

Preflight-Requests sind für komplexere Anfragen vorgesehen, die nicht den Kriterien für Simple Requests entsprechen. Dazu zählen Anfragen, die andere HTTP-Methoden als GET, HEAD oder POST verwenden oder Anfragen, die einen anderen Content-Type als die für Simple Requests zugelassenen haben. Ein Preflight-Request wird mit der HTTP-Methode OPTIONS vor der eigentlichen Anfrage gesendet und enthält Header wie Access-Control-Request-Method und Access-Control-Request-Headers, die dem Server mitteilen, welche Art von Anfrage folgen wird.

Der Server antwortet auf den Preflight-Request mit Headern, die angeben, ob die eigentliche Anfrage zulässig ist. Diese Antwort kann Header wie Access-Control-Allow-Methods und Access-Control-Allow-Headers enthalten, die spezifizieren, welche Methoden und Header in der tatsächlichen Anfrage verwendet werden dürfen.

Wenn die Anfragen über die Kriterien von Simple Requests hinausgehen was folgende Punkte einschließt:

- Verwendung anderer HTTP-Methoden als GET, HEAD, POST.
-Hinzufügen von nicht standardmäßigen HTTP-Headern oder Verwendung von Content-Types außerhalb der für Simple Requests erlaubten.
- Anfragen, die mit Credentials (wie Cookies) gesendet werden.

Hier ist ein Beispiel für eine CORS-Konfiguration, die einen Preflight-Request benötigen würde:

```js
const express = require('express');
const cors = require('cors');

const app = express();

// Detaillierte CORS-Konfiguration für Preflight-Requests
const corsOptions = {
    origin: 'http://example.com', // Spezifischer Ursprung
    methods: 'POST', // Erlaubte Methoden
    allowedHeaders: ['Content-Type', 'Authorization'] // Erlaubte Header
};

// Aktiviert CORS nur für diese spezielle Route mit den definierten Optionen
app.options('/complex-route', cors(corsOptions)); // Preflight-Request
app.post('/complex-route', cors(corsOptions), (req, res) => {
    res.json({ msg: 'Preflight Request erfolgreich bearbeitet' });
});

app.listen(3000, () => {
    console.log('Server läuft auf Port 3000');
});
```

### Preflight-Requests Responses

Die Antwort des Servers auf einen Preflight-Request kann verschiedene Header enthalten, die die Regeln für die folgende eigentliche Anfrage festlegen. Zu diesen Headern gehören Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Expose-Headers, Access-Control-Max-Age, Access-Control-Allow-Methods und Access-Control-Allow-Headers. Diese Header geben an, welche Ursprünge, Methoden und Header für die Cross-Origin-Anfrage erlaubt sind und wie lange die Antwort des Preflight-Requests gültig bleibt.

Durch die Kombination dieser CORS-Methoden können Entwickler:innen in Node.js aber auch jeder anderen Programmiersprache die Kommunikation zwischen verschiedenen Ursprüngen auf eine sichere und kontrollierte Weise handhaben, was die Entwicklung von robusten und interaktiven Webanwendungen ermöglicht.

***Sources:***

[Express CORS Docs](https://expressjs.com/en/resources/middleware/cors.html) 


[Wikipedia](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)

CORS: Ermöglicht sichere Web-Interaktionen über verschiedene Hosts

retro-cors.png

Cross-Origin Resource Sharing

CORS

security

Von for und while bis zu forEach und map, entdecke die Javascript Schleifen-Typen.

javascript-loops.webp

Javascript und seine Schleifen-Typen

Ein Ritt durch Iterationen

javascript

tutorial

howto

Worker Threads stehen seit der Node.js-Version 10.5 als experimentelles Feature zur Verfügung und wurden in der [Version 12.11.0](https://nodejs.org/docs/v12.11.0/api/worker_threads.html) auch als stabil eingestuft. Zum Zeitpunkt dieses Artikels war die Node.js-Version 20.9.0 die aktuelle LTS-Version.

JavaScript ist traditionell eine Singlethreaded-Sprache, was bedeutet, dass alle Operationen nacheinander in einem einzigen Thread ausgeführt werden. Dies hat zur Folge, dass unser Programm warten muss, bis die letzte Aufgabe im Main-Thread abgearbeitet ist, was dazu führen kann, dass unsere Anwendung einfriert. 
Um dieses Problem zu lösen, wird in JavaScript die Aufgabenbearbeitung über den sogenannten Event-Loop gesteuert. Der Event-Loop ermöglicht es, asynchron und nicht-blockierend zu agieren, selbst wenn JavaScript eine Single-Threaded-Sprache ist. I/O-Aufgaben (Netzwerkanfragen, Dateizugriffe und Benutzereingaben), die in der Regel nicht rechenintensiv sind, können somit durch den Event-Loop asynchron abgearbeitet werden.

Wer mehr über den Event-Loop erfahren möchte dem lege ich zwei Videos ans Herz, das eine etwas kürzer das andere etwas länger.

https://www.youtube.com/watch?v=lqLSNG_79lI https://www.youtube.com/watch?v=cCOL7MC4Pl0

Die asynchrone Bearbeitung unserer Aufgaben ist in der Regel der synchronen Verarbeitung und den Worker Threads vorzuziehen. Leider trifft dies nicht auf rechenintensive Aufgaben wie beispielsweise Bildkomprimierung oder komplexe Berechnungen zu. Diese könnten den Main-Thread blockieren und somit unsere Anwendung zum Einfrieren bringen. Genau aus diesem Grund wurden Worker Threads eingeführt.

Worker Threads ermöglichen es uns, Aufgaben auf verschiedene Threads zu verteilen. Dies hat den Vorteil, dass der Main-Thread frei bleibt und unsere Anwendung reibungslos weiterlaufen kann. Die Verteilung der Aufgaben auf mehrere Threads kann zudem zu einem Leistungsgewinn führen.

Jetzt könnte man logischerweise annehmen, einfach alle Aufgaben in Worker Threads auszulagern. An dieser Stelle muss ich jedoch enttäuschen: In der Regel ist das asynchrone Abarbeiten von Aufgaben die effizientere Methode und meistens den Worker Threads vorzuziehen. Dies liegt häufig daran, dass Worker Threads einen hohen Overhead mit sich bringen, da jeder Worker erst gestartet werden muss. Das führt dazu, dass die asynchrone Bearbeitung der Aufgaben in den meisten Fällen auf aktuellen Computern schneller ist. Nur bei wirklich rechenintensiven Aufgaben könnte es sinnvoll sein, auf Worker Threads zurückzugreifen.

Ich möchte anhand der Berechnung von Fibonacci-Zahlen erläutern, wann es sinnvoll ist, auf Worker Threads zu setzen und wann man darauf vielleicht verzichten sollte.

## Exkurs: Fibonacci-Folge

Damit alle wissen was Fibonacci-Zahlen sind und auch um den Code weiter unten besser zuverstehen hier ein versuch das euch etwas näher zubringen. Ihr könnt es aber auch überspringen da ich einfach eine möglichkeit gebraucht habe Komplexe berechnungen durchzuführen. Aber auch ganz unabhängig vom Nutzen von Fibonacci-Zahlen.

### Was ist nun die Fibonacci-Folge?

Die Fibonacci-Folge ist eine Folge von Zahlen, bei der jede Zahl die Summe der beiden vorherigen Zahlen ist. Die Sequenz beginnt typischerweise mit 0 und 1.

```bash
n-0 + n-1 + n-1
n-2 + n-3 + n-5
n-8 + n-13 + n-21
n-34 + n-55 + n-89
n-144 ...
```
Eine kleine kleine Analogie für Dummies ;-)

Stell dir die Fibonacci-Folge als eine Reihe von Boxen vor welche hintereinander aufgereit sind. Jede der Boxen enthält eine Zahl. Die ersten zwei Boxen haben also die Zahl 0 und 1.

Wenn du die Zahl der nächsten Box wissen möchtest addiere die zahlen aus den letzten beiden Boxen:

```bash
Box1: 0
Box2: 1
Box3: 1 // 0 + 1
Box4: 2 // 1 + 1
Box5: 3 // 1 + 2
Box6: 5 // 2 + 3
```
## Vergleich zwischen Main-Thread und Worker-Thread

Ich habe hier eine iterative Fibonacci-Funktion in node.js erstellt, die alle Fibonacci-Zahlen nur einmal berechnet und sie in einem Array speichert. Diese Methode ist sehr effizient und hilft uns gut zu simulieren, wann der Einsatz von Worker Threads aus Performance-Gründen sinnvoll ist und wann eher nicht.

## Ohne Worker Threads

```js
const rounds = 100;

const fibonacci = (n) => {
  const numbers = [0, 1];
  for (let i = 2; i <= n; i++) {
    numbers[i] = numbers[i - 1] + numbers[i - 2];
  }
  return numbers[n];
};

const startWithoutWorker = Date.now();
for (let i = 0; i < rounds; i++) {
  fibonacci(100);
  process.stdout.write(`\r${i + 1}/${rounds}`);
}
const endWithoutWorker = Date.now();
console.log(
  ` Total duration without worker threads (ms): ${
    endWithoutWorker - startWithoutWorker
  }`
);
```
Wir beginnen mit der Berechnung und legen fest, dass diese 100-mal durchgeführt werden soll. Dies wiederholen wir 100-mal damit wir die Auslastung besser simulieren. Das Ergebnis sieht wie folgt aus:

```bash
100/100 Total duration without worker threads (ms): 5
```
100.000-mal:
```bash
100/100 Total duration without worker threads (ms): 127
```
1.000.000-mal:
```bash
100/100 Total duration without worker threads (ms): 1378
```
10.000.000-mal:
```bash
100/100 Total duration without worker threads (ms): 10790
```
All unsere Berechnungen wurden im Event-Loop ausgeführt (Single-Threaded). Zum Vergleich schauen wir uns nun die gleichen Berechnungen mit Worker Threads an.

## Mit Worker Threads

![Javascript Worker Threads {{ w: 1000, h: 300 }}](/uploads/Javascript_Worker_Threads_67c1927e7b.svg) 

Dazu erstellen wir zwei Dateien: eine "worker.js", der wir die Aufgaben zur Berechnung übergeben, und eine Datei, die den Worker aufruft, "index.js". Beginnen wir mit der letzteren. Ich werde hier nicht auf die Funktionsweise und die Implementierung von Worker Threads eingehen; dafür empfehle ich, die [Node.js-Dokumentation](https://nodejs.org/docs/v20.9.0/api/worker_threads.html)!

```js
// index.js
import { Worker } from "worker_threads";

const rounds = 100;
const maxConcurrentWorkers = 16;

let completedRounds = 0;

const startWithWorker = Date.now();

function runWorker() {
  if (completedRounds >= rounds) {
    return;
  }

  const worker = new Worker("./worker.js");
  worker.on("message", (result) => {
    completedRounds++;
    process.stdout.write(`\r${completedRounds}/${rounds}`);
    if (completedRounds === rounds) {
      const endWithWorker = Date.now();
      console.log(
        `\nTotal duration with worker threads (ms): ${
          endWithWorker - startWithWorker
        }`
      );
      process.exit();
    } else {
      runWorker();
    }
  });
  worker.postMessage(100);
}

for (let i = 0; i < maxConcurrentWorkers; i++) {
  runWorker();
}
```
Genau wie in unserem Beispiel ohne Worker Threads führen wir die Berechnung 100-mal durch (const rounds = 100;). Da wir nun aber mit Worker Threads arbeiten, können wir diese Berechnungen auf die Worker auslagern und sie parallel durchführen, was als "Parallelisierung" bezeichnet wird. Hierbei ist zu beachten, dass man bei CPU-intensiven Aufgaben in der Regel einen Worker pro CPU-Thread verwenden möchte. Bei stark I/O-lastigen Aufgaben in einem Worker Thread könnte es jedoch sinnvoll sein, mehr Worker pro CPU-Thread zu nutzen. Da wir eine stark CPU-gebundene Berechnung durchführen, macht es Sinn, nur so viele Worker zu erstellen, wie wir CPU-Threads zur Verfügung haben. In meinem Fall sind das bei meiner CPU (Ryzen 5800X3D) 16 Threads.

Und hier noch der Code für den Worker:

```js
// worker.js
import { parentPort } from "worker_threads";

const fibonacci = (n) => {
  const numbers = [0, 1];
  for (let i = 2; i <= n; i++) {
    numbers[i] = numbers[i - 1] + numbers[i - 2];
  }
  return numbers[n];
};

parentPort.on("message", (n) => {
  const result = fibonacci(n);
  parentPort.postMessage(result);
});
```

Beginnen wir also nun mit unseren Berechnungen, dieses Mal jedoch mit Worker Threads.

100-mal:
```bash
Total duration with worker threads (ms): 605
```
100.000-mal:
```bash
Total duration with worker threads (ms): 730
```
1.000.000-mal:
```bash
Total duration with worker threads (ms): 1222
```
10.000.000-mal:
```bash
Total duration with worker threads (ms): 5237
```
10.000.000-mal (mit nur einem Worker):
```bash
Total duration with worker threads (ms): 14259
```
Was wir jetzt sehen, ist folgendes: Bis zu 1.000.000 Durchläufen ist die Fibonacci-Berechnung im Main-Thread deutlich schneller als die Berechnung mit Worker Threads. Erst bei einer sehr hohen Anzahl an Fibonacci-Berechnungen machen sich die Worker Threads bemerkbar. Und auch das nur, wenn wir genügend Worker bereitstellen. Begrenzen wir dies auf nur einen Worker, dauert die Berechnung sogar deutlich länger. Die Gründe dafür sind vielfältig, der wichtigste ist jedoch der hohe Overhead den Worker Threads mit sich bringen.

Jeder Worker muss zunächst eine V8-Instanz starten, was sowohl Zeit kostet als auch zusätzlichen Speicher belegt. Das bedeutet, das man zusätzlich auch den Speicherbedarf im Auge behalten muss.

## Fazit

Unser kleines Experiment zeigt, dass in den meisten Fällen der Einsatz von Worker Threads nicht empfehlenswert ist, zumindest wenn es darum geht, die Performance der Anwendung zu steigern. Nur für wirklich rechenintensive Aufgaben könnten Worker Threads relevant sein.

Ein weiterer Pluspunkt für Worker Threads könnte bei Aufgaben liegen, die parallel im Hintergrund ablaufen können und nicht auf Benutzereingaben angewiesen sind. Zum Beispiel könnte ein Programm einen Bilderupload anbieten und die Bilder im Hintergrund komprimieren. Dadurch bleibt der Main-Thread und somit der Event-Loop frei, und die Anwendung läuft nicht Gefahr, einzufrieren.

Ich hoffe, ich konnte etwas Licht ins Dunkel von "Worker Threads" bringen. Falls ich Fehler gemacht habe oder etwas unklar ist, lasst es mich gerne in den Kommentaren wissen.


Ich möchte hier zeigen wann es sinn macht Worker Threads einzusetzen und wann ihr es vielleicht lassen solltet

JavaScript-Worker-Threads-Single-Threaded-vs-Mult-Threaded.png

Singlethread- vs. Multithread

Javascript Worker Threads

nodejs

Obwohl es eine ausführliche [Dokumentation](https://domo-2.gitbook.io/brc-20-experiment/) von den Erstellern des BRC20 Token Standards gibt, ist diese in vielen Teilen sehr theoretisch. Das ist grundsätzlich gut, aber wenn man nur alle paar Monate Zeit hat, sich mit dem Thema Ordinals und dessen Ökosystem auseinanderzusetzen und jedes Mal erneut die Dokumentation durchgehen muss, finde ich das eher lästig als hilfreich. Deshalb habe ich mich entschlossen, eine kleine Schritt-für-Schritt-Anleitung zu erstellen, wie man Tokens erstellt, mintet und transferiert.

Dieses Tutorial setzt voraus, dass eine vollständig synchronisierte Bitcoin-Core Wallet und Ord Wallet installiert wurde. Weiterhin gehe ich davon aus, dass jemand, der die Ord Wallet installiert hat, auch weiß, wie er sie bedienen muss. Daher werde ich in diesem Beitrag nicht weiter darauf eingehen. Solltet ihr dennoch Interesse an einer Anleitung dazu haben, lasst es mich in den Kommentaren wissen.

**Vorrausetzungen zusammengefasst:**

- Vollständig synchronisierte Bitcoin-Core Wallet
- [Ord Wallet Installiert](https://github.com/ordinals/ord)
- Einige UTXOs auf der Ord Wallet vorhanden

## 1. Deploy: Wie du deinen eigenen BRC20 Token erstellst

### 1.1 Deploy Textdatei erstellen

Zuerst erstellen wir eine Textdatei. Dabei ist es wichtig, dass der MIME-Typ: "text/plain" und der Zeichensatz "charset=utf-8" ist.

Wie dies funktioniert, variiert je nach Betriebssystem. IDEs und Editoren wie Notepad++ zeigen jedoch in der Regel an, welcher Zeichensatz und welcher MIME-Typ gesetzt ist. In dieser Anleitung erkläre ich den Vorgang für Linux bzw. die Shell. Dies sollte auch unter Windows in einer WSL-Shell funktionieren.

Ich erstelle meine Textdatei mit "iconv" und nenne meinen Token beispielhaft "sil3":

```bash
echo "" | iconv -t UTF-8 > deploy-sil3.txt
```
### 1.2 Token Spezifizieren

Jetzt bestimmen wir, wie unser Token heißen soll und welche Menge davon vorhanden sein wird. Im Grunde spezifizieren wir unseren Token, um ihn später fest und unveränderlich in der Timechain zu verankern.

Bearbeitet nun die Textdatei und fügt den folgenden Inhalt ein. Passt dabei natürlich den Namen "tick", die maximal verfügbare Menge an Token "max" und das Limit "lim" für die maximale Anzahl an Token pro Minting-Vorgang an.

```json
{
  "p": "brc-20",
  "op": "deploy",
  "tick": "sil3",
  "max": "21000000",
  "lim": "1000"
}
```
Hier eine Kurze Erklärung was die Einzellnen Schlüssel bedeuten:

"p": = Protokoll: Hilft anderen Systemen, Brc-20-Ereignisse zu identifizieren und zu verarbeiten
"op": = Operation: Art des Ereignisses (Bereitstellen, Mint, Transfer)
"tick": = Ticker: max. 4-Buchstaben-Kennung des BRC-20
"max": = Max. Versorgung: Stellen Sie die maximale Versorgung des BRC-20 ein
"lim": = Max. Limit pro Mint

### 1.3 Token einschreiben (Inscribe)

Jetzt können wir unseren Token deployen. Dies geschieht mit dem folgenden Befehl und bitte lesst vorab die Erläuterung durch:

```bash
ord wallet inscribe --destination  ZIEL_ADRESSE ~/deploy-sil3.txt --fee-rate 26
```

**Erläuerung:**

--destination:

Dies ist ein optionaler Befehl, den ich euch jedoch empfehlen würde einzusetzen. In unserem Fall gehen wir davon aus, dass wir uns vorab eine Adresse mit dem Befehl `wallet receive generiert haben. Diese Adresse sollten wir immer beim Minten und Transferieren angeben. Der Grund dafür ist, dass die Ord Wallet bei Nichtangabe jede Inscription auf eine neue Adresse schreibt. Das bedeutet, wenn wir z.B. 10 Mal eine Mint-Inscription für unsere Tokens erstellt haben, besitzen wir auch 10 verschiedene Adressen. Möchten wir nun 10.000 Tokens (10 x 1.000) versenden, müssten wir für jede dieser Adressen eine Transfer-Inscription erstellen, da die Tokens der einzelnen Adressen nicht zusammengefasst werden können. Dies ist nur möglich, wenn alle Tokens auf derselben Adresse liegen. So sparen wir letztendlich sowohl Zeit als auch Transaktionsgebühren.

--fee-rate:

> Wichtig: Prüft Vorab auf https://mempool.space/ welche Gebühren aktuell erhoben werden, setzt diese nicht zu niedrig!

![Mempool_TX_Fees {{ w: 590, h: 223 }}](
/uploads/Mempool_TX_Fees_8afcd1a1b2.png?format=webp&quality=100) 

> Notiz: Ihr könnt als Ziel-Adresse natürlich auch jede andere Taproot Adresse angeben. Beachtet aber dabei das nicht alle Wallets wissen wie Sie mit Inscriptions umgehen sollen. Daher nutzt nur Offiziel unterstützte Wallet (Unisat, Xverse, Hiro, Ordinalsafe).

> Optional: Wenn ihr den Befehl vorab testen wollt schreibt einfach ein `--dry-run` hinter `wallet inscribe`.

Nach dem ihr den Befehl abgesendet habt, solltet ihr eine ähnliche Ausgabe erhalten:

```json
{
  "commit": "..",
  "inscription": "...",
  "reveal": "...",
  "fees": 9594
}
```

commit: Ist die TXID welche ihr jetzt mit Mempool verfolgen könnt. Einfach danach suchen.

### 1.4 Prüfen

Ob alles erfolgreich war prüfe ich immer auf OKX da ich finde das dieser den besten Ordinals Explorer bietet. Ihr könnt aber auch jeden anderen nutzen der euch genug Informationen liefert.

Beispiel ORDI Token: [OKX-Explorer](https://www.okx.com/explorer/btc/inscription/brc20/348020) 

## 2. Mint: Token erstellen

Nach dem wir mit "Deploy" unseren Token definiert haben kann nun jetzt jeder User mit dem "Mint" Prozess sich seinen Anteil an Tokens sichern.

### 2.1 Mint Textdatei erstellen

Genau wie beim Deployment erstellen wir uns wieder ein Textdatei.

```bash
echo "" | iconv -t UTF-8 > mint-sil3.txt

```

Der Inhalt schaut nur ein wenig anders aus:

```json
{
  "p": "brc-20",
  "op": "mint",
  "tick": "sil3",
  "amt": "1000"
}
```
Erläuterung:

amt: Gibt den zu prägenden Betrag des BRC-20 an.

> Wichtig: "amt" darf nicht das Limit überschreiten welches wir im Deployment festgelegt haben.

### 2.2 Mint einschreiben (Inscribe)

Der Befehl ist der selbe wie beim Deployment vorgang, wir müssen nur das richtige Textfile angeben. Ich empfehle hier auch wieder immer auf die gleiche Adresse (destination) die Tokens zu Minten.

```bash
ord wallet inscribe --destination  ZIEL_ADRESSE ~/mint-sil3.txt --fee-rate 26
```

Nach dem ihr den Befehl abgesendet habt, solltet ihr eine ähnliche Ausgabe erhalten:

```json
{
  "commit": "..",
  "inscription": "...",
  "reveal": "...",
  "fees": 9594
}
```
Ob alles geklappt hat kann wieder mit dem [OKX-Explorer](https://www.okx.com/explorer/btc/inscription/brc20/348032) überprüft werden.

> Notiz: Natürlich könnt ihr beim Minten auch direkt in eure Unisat oder Xverser Wallet Minten. Dann ist "Punkt 3. Transfer" für euch nicht mehr wichtig.

## 3. Transfer: Tokens versenden

Der Transfer ist etwas umständlich und besteht aus folgenden schritten:

- Einschreiben (Inscribe) "Transfer"
- Senden von "Transfer" Inscription an Zieladresse

### 3.1 Vorbereitung

Wir müssen hier stets eine "--destination" angeben, die ausreichend Token besitzt. Deshalb ist es so wichtig, dass wir beim Minten immer dieselbe Adresse verwenden. Nehmen wir an, dass wir 10-mal 1.000 Tokens auf die gleiche Adresse gemintet haben, können wir nun bis zu 10.000 Tokens direkt transferieren.

Wie beim Deployment und Minten, erstellen wir uns wieder ein Textdatei.

```bash
echo "" | iconv -t UTF-8 > transfer-sil3.txt

```

Dieses Mal fügen wir folgenden Inhalt hinzu und geben bei der zu transferierenden Menge (amt) in unserem Beispiel "5000" Tokens an, die wir versenden möchten:

```json
{
  "p": "brc-20",
  "op": "transfer",
  "tick": "TokenName",
  "amt": "5000"
}
```
### 3.2 Transfer einschreiben

Wie auch schon beim Deployen und Minten ist auch hier die vorgehensweise die selbe. Wir geben bei unserem Befehl die --destination an welche genug Tokens hält (min. soviele wie wir versenden möchten) und achten darauf das wir die eben erstellte transfer-sil3.txt Datei angeben.

```bash
ord wallet inscribe --destination  ZIEL_ADRESSE ~/transfer-sil3.txt --fee-rate 26
```
Nach dem ihr den Befehl abgesendet habt, solltet ihr eine ähnliche Ausgabe erhalten:

```json
{
  "commit": "..",
  "inscription": "...",
  "reveal": "...",
  "fees": 9594
}
```
### 3.3 Prüfen

Sobald die Transaktion bestätigt wurde könnt ihr wieder in eurem [Explorer](https://www.okx.com/explorer/btc/inscription/brc20/348126) eurer Wahl prüfen ob der Token Transfer gültig ist. 

## 4. Versenden von Tokens an eine andere Adresse

Dieser vorgang ist jetzt relativ simpel. Ihr sendet einfach die eben erstellte "Transfer" Inscription an eine andere Ordinals fähige Adresse.

Dies geht mit folgenden Befehl:

```bash
ord wallet send --fee-rate 26 DESTINATION ADRESSE INSCRIPTION_ID
```

**Erläuterung:**

Destination Adresse: Wohin ihr die Tokens verschiecken wollt
INSCRIPTION_ID: Die Inscription ID von der eben erstellten "Transfer" Inscription.

## Fazit

Der Umgang mit dem BRC20-Token kann anfangs überwältigend erscheinen. Trotz umfassender Dokumentationen fehlt es oft an praxisnahen Anleitungen. Deshalb habe ich dieses Tutorial erstellt, um die Token-Erstellung, -Prägung und -Transferierung verständlich darzustellen. Besonders hervorzuheben ist die Bedeutung von einheitlichen Adressen beim Minten. Dies spart nicht nur Zeit, sondern auch Transaktionsgebühren. Mit dieser Anleitung hoffe ich, Einsteigern einen klaren und einfachen Weg im Umgang mit dem BRC20-Token und der Ord Wallet aufzuzeigen.






Praxisnaher Leitfaden zum Erstellen, Prägen und Transferieren von BRC20-Tokens.

future42_Coriolis_effect_4465e033-9a97-4b39-8ab8-3a6f42d05a1d.png

Alles was du wissen musst

Deploy, Mint und Transfer mit der Ord Wallet

bitcoin

brc20

ordinals

Es ist vermutlich ein normaler Werdegang, dass sich Gemeinschaften ihre eigene Sprache und Bezeichnungen aneignen. Grundsätzlich ist das nicht verwerflich. Gerade dann wenn diese noch nach einer Identität suchen.

Es sollte jedoch spätestens dann hinterfragt werden, wenn es möglicherweise Menschen ausschließt oder sogar rechte Narrative bedient. Daher möchte ich am Beispiel der "Bitcoin-Zitadelle" darauf eingehen und erklären, warum ich sie für gefährlich halte.

## Bitcoin-Zitadellen

Das Konzept der "Bitcoin-Zitadellen" ist ein futuristisches Szenario, das in der Bitcoin-Community diskutiert wird. Es basiert auf der Idee, dass, wenn der Wert von Bitcoin weiter steigt, es zu einer neuen Gesellschaftsordnung führen könnte. In dieser leben Menschen, die früh in Bitcoin investiert haben, in befestigten Städten (Zitadellen). Diese Städte würden als Zufluchtsorte dienen, um die Reichtümer und den Lebensstil der Bitcoiner:innen zu schützen.

![Lina Seiche Citadel {{ w: 1000, h: 300 }}](/uploads/lina_seiche_citadel_98a3bd0051.jpg) 
Source: Lina Seiche https://thelittlehodler.com/de/gallery/

Im Jahr 2013 veröffentlichte ein Reddit-Benutzer namens Luka Magnotta einen [Beitrag](https://www.reddit.com/r/Bitcoin/comments/1lfobc/i_am_a_timetraveler_from_the_future_here_to_beg/), in dem er behauptete, ein Zeitreisender aus dem Jahr 2025 zu sein. Er beschrieb eine dystopische Zukunft, in der Bitcoin-Investoren in befestigten Städten, den sogenannten "Bitcoin Zitadellen", leben.

Zusammengefasst beschreibt der Artikel von Magnotta die Zukunft als eine extrem ungleiche Gesellschaft. In dieser ist Bitcoin so wertvoll geworden, dass nur diejenigen, die in Bitcoin investiert haben, überleben.

Es ist wichtig zu erkennen, dass das ursprüngliche Konzept als dystopische Warnung gedacht war, aber von einigen in der Community als utopisches Ideal aufgegriffen wurde. Der Artikel legt nahe, dass, während einige das Konzept buchstäblich nehmen, es für viele eine Metapher für finanzielle Souveränität und Unabhängigkeit von traditionellen Regierungen und Finanzsystemen ist. Es gibt auch Beispiele für tatsächliche Versuche, solche Gemeinschaften zu schaffen, obwohl diese nicht erfolgreich waren (Bitcointopia, MS Satoshi). Auch wenn hier wichtig ist zu erwähnen das dass Scheitern nicht auf Bitcoin zurückzuführen war sondern vielmehr etwas mit den Menschen welche diese Projekte durchführten zutun hatte.

Ein Beispiel (wenn auch nicht direkt bezugnehmend auf Bitcoin) für solche Gemeinschaften aus der Gegenwart sind die sogenannten "Private Cities". Private Cities sind städtische Gebiete, die von privaten Unternehmen statt von Regierungen verwaltet werden. Diese Unternehmen sind dafür verantwortlich, grundlegende Dienstleistungen wie Sicherheit, Infrastruktur und Versorgungseinrichtungen bereitzustellen. Die Idee hinter Private Cities ist es, effizientere und wettbewerbsfähige städtische Umgebungen zu schaffen, indem man die Bürokratie reduziert und mehr unternehmerische Freiheit ermöglicht.

Für viele Bitcoiner:innen klingt dieses Konzept schlüssig und aus einem marktspezifischen Blickwinkel sicherlich auch logisch. Das Problem ist jedoch, dass Private Cities soziale Ungleichheit fördern können, da sie nur für diejenigen zugänglich sind, die entweder das passende Kleingeld besitzen oder mindestens zur Philosophie dieser Stadt/Zitadelle passen.

Einfach ausgedrückt, könnten Bitcoin-Zitadellen möglicherweise Diskriminierung fördern, da nur diejenigen willkommen sind, die vermeintlich dazu passen und die nötigen SATS (kleinste Einheit von Bitcoin) besitzen.

Natürlich sind das nur meine subjektiven Annahmen und vielleicht darf man auch ohne Bitcoins in diese Städte. Aber wenn wir einmal für fünf Minuten das Thema Geld ausblenden und darüber nachdenken, ob wir nicht in einer offenen Welt leben möchten, in der jeder Mensch überall willkommen ist, weil er in erster Linie 'Mensch' ist, dann sind Mauern und unternehmerisch geführte Kommunen womöglich nicht die beste Wahl.

Mir ist natürlich bewusst, dass, wie bereits oben erwähnt, nicht alle dieses Konzept buchstäblich nehmen und es für viele nur eine Metapher für finanzielle Souveränität ist. Leider wird dass meiner Meinung nach in der Community nicht ausreichend hinterfragt, was es tatsächlich bedeutet, in Zitadellen zu leben.

## Warum ich glaube das Bitcoin-Zitadellen eher konträr zur Idee von Bitcoin stehen

Ich war vor einigen Wochen mit einer Freundin auf der [Ostrale](https://ostrale.de/de/Archiv/OSTRALE-O23.html) in Dresden, einer Ausstellung zeitgenössischer Kunst. Dort ist mir vor allem das Kunstwerk von "Matteo Suffritti" aufgefallen, da es sich mit dem Phänomen auseinandersetzt, dass wir in einem Glashaus leben und der Großteil der Welt in Armut vor unseren Toren hockt. Das Kunstwerk definiert einen privilegierten Raum, in Höhe, Tiefe und Breite. Dieser Raum ist fast unpassierbar und nur schwer zu erschließen. Innerhalb dieses Raums geht es allen Menschen gut, aber am Rand stapeln sich die Favelas. Auch wenn der Künstler ein Problem der Gegenwart anspricht, war es für mich ein Ansporn, diesen Artikel hier zu schreiben da ich viele parallelen zu den Bitcoin-Zitadellen befürchte.
![Matteo Suffritti Host Communities 3 {{ w: 1000, h: 300 }}](/uploads/IMG_3673_4168361d5a.jpg) 

#### Damit alle verstehen warum ich glaube das Zitadellen nicht zum Konzept von Bitcoin passen hier eine kurze Auflistung.

**Dezentralisierung**: Bitcoin wurde ursprünglich als dezentralisiertes Zahlungsmittel entworfen, das der Kontrolle einzelner Einheiten entzogen ist und das weltweit verfügbar ist. Die Konzentration von Bitcoin in bestimmten geographischen Standorten oder Gemeinschaften, wie es in einer "Bitcoin-Zitadelle" der Fall wäre, könnte als eine Form der Zentralisierung betrachtet werden.

**Zugänglichkeit und Inklusion**: Eine der Hauptziele von Bitcoin ist es, ein inklusives Finanzsystem zu schaffen, das für alle zugänglich ist, unabhängig von ihrer geographischen Lage oder ihrem wirtschaftlichen Status. Die Idee von Bitcoin-Zitadellen könnte diese Zugänglichkeit einschränken, indem sie Gemeinschaften schafft, die nur für diejenigen zugänglich sind, die bereits Bitcoin besitzen oder die finanziellen Mittel haben, um darin zu investieren.

**Risiko von Ungleichheit**: Bitcoin-Zitadellen könnten das Potenzial haben, soziale und wirtschaftliche Ungleichheiten zu verstärken. Wenn der Zugang zu diesen Gemeinschaften auf diejenigen beschränkt ist, die bereits in Bitcoin investiert haben, könnte dies die Kluft zwischen den "Haves" und den "Have-nots" (arm und reich) vergrößern.

**Entgegenwirken der Dezentralisierung der Macht**: Die Grundidee von Bitcoin ist es, die Macht zu dezentralisieren und sie in die Hände der vielen zu legen, statt sie bei wenigen zu konzentrieren. Bitcoin-Zitadellen könnten jedoch genau das Gegenteil bewirken, indem sie die Macht in den Händen einer kleinen Gruppe von Menschen oder Organisationen konzentrieren, die die Kontrolle über diese Gemeinschaften haben.

## Mangelnde Kritikfähigkeit in bestimmten Teilen der Community

In einer Podcast-Folge des YouTube-Kanals "Blocktrainer", die vor einigen Jahren ausgestrahlt wurde, durfte Titus Gebel über seine Privatstädte in Honduras berichten. Anhand dieses Beispiels möchte ich aufzeigen, dass Narrative in der Community oft festgefahren sind und der Diskurs aus ideologischer Sicht verhindert wird. Was mich an dem Gespräch störte, war die fehlende Kritik und die ausschließliche Debatte darüber, wie Bitcoin dabei helfen kann, diese Projekte voranzutreiben.

Als ich mich kritisch zu dem Gespräch in den Kommentaren äußerte und auf die vermeintlichen Interessen und Verbindungen (Degusa Goldhandel, Peter Thiel) von Titus Gebel hinwies und auf die Arbeit von Andreas Kemper aufmerksam machte, wurde mir vom Blocktrainer entgegengetreten. Er sagte, dass er Andreas Kempers Arbeit kennt und einige davon zwar gut findet, aber weil Andreas Kemper ein bekennender Sozialist ist, dem Ganzen nichts abgewinnen kann. Leider kann ich den Wortlaut nicht mehr vollständig wiedergeben, da diese Podcast-Folge gelöscht wurde und somit auch sämtliche Kommentare. Ich möchte auch gar nicht gänzlich gegen die Idee schießen doch sind die Verbindungen und Interessen dieser Leute vermutlich eher Konträr zu dem was Bitcoin will.

*Generell, ich habe nichts gegen den Blocktrainer! Ich halte einen großen Teil seiner Arbeit zur Aufklärung über Bitcoin, besonders im Blick auf komplexe technische Aspekte, für wichtig. Da er jedoch auch eine große Reichweite hat und vermutlich die erste Anlaufstelle für viele neue Bitcoiner:innen hinsichtlich der Informationsbeschaffung ist, finde ich es wichtig, ihn zu kritisieren.*

Wir könnten jetzt noch über einige weitere Begrifflichkeiten sprechen (Gesundes Geld, Steuern sind Raub, ...) aber ich denke ich belasse es dabei und hoffe das ich zumindest etwas zum nachdenken anregen konnte. Denn manchmal steckt hinter einem vermeintlich Harmlosen Narrativ mehr als man zuerst vermuten mag.

Ich kann das Buch von Andreas Kemper empfehlen "[Privatestädte: Labore für einen neuen Manchesterkapitalismus](https://www.thalia.de/shop/home/artikeldetails/A1062788947)". Mir hat es geholfen die Idee hinter Privatstädten besser einordnen zu können.

Das Konzept der "Bitcoin-Zitadellen" ist ein futuristisches Szenario, das in der Bitcoin-Community diskutiert wird.

bitcoin-citadel.png

Warum ich glaube das Bitcoin-Zitadellen keine gute idee sind

Bitcoins Narrative

*"Seit ich Bitcoin entdeckt habe, lese ich Bücher"* - ein Satz den ich so oder so ähnlich, in den letzten Jahren immer häufiger in meinem Umfeld und auf Twitter lese und der mich zu tieferen Überlegungen anregt.

An diesem Satz ist prinzipiell nichts auszusetzen und natürlich spielt der Kontext eine große Rolle. Man könnte argumentieren, dass das Entdecken neuer Wissensgebiete - sei es noch so spät - stets zu begrüßen ist. Dennoch bereitet mir diese Aussage ein gewisses Unbehagen. Seit 2013 vertiefe ich mich regelmäßig in Themen wie Politik, Ökonomie und natürlich Bitcoin. Und bis heute habe ich keine endgültige Meinung darüber, ob die von der Österreichischen Schule und von Menger propagierte Grenznutzenlehre wirklich die ultimative ökonomische Theorie darstellt, unter deren Prämissen Bitcoin gedeihen kann. Oder ob das nicht doch nur ein feuchter Traum von ein paar ziemlich Libertären Typen ist. Who cares...

Wenn ich mich ausschließlich mit Literatur beschäftige, die unausweichlich die gleichen Narrative verfolgt, wie kann ich dann eine fundierte, umfassende Meinung entwickeln? Meiner Ansicht nach ist dies nur Menschen möglich, die sich bereits im Vorfeld entschieden haben, was sie glauben wollen und was nicht. Denn je mehr ich lese, je mehr Blogbeiträge, Podcasts und Videos ich konsumiere, desto stärker wird mir bewusst: Die Welt ist nicht schwarz und weiß. Um uns ein differenziertes Urteil zu erlauben, müssen wir allen Stimmen Gehör schenken und in Betracht ziehen, ob unsere Überzeugungen hin und wieder hinterfragt und neu bewertet werden müssen.

Die nächsten zwei Artikel, wobei der zweite noch in Arbeit ist, setzen sich kritisch mit der "Bitcoin Community" auseinander - hauptsächlich, aber nicht ausschließlich, richten sie sich an Bitcoiner:innen. Die Vielfalt in dieser Szene wird oft unterschätzt und viele plappern nur nach, was gut klingt. Genau das steht hier zur Debatte.

## Kenne beide Seiten der Medaille

Es wird zunehmend herausfordernd für mich, ständig den Behauptungen von Bitcoiner:innen begegnen zu müssen. Diese vertreten unablässig die Meinung, dass eine frühzeitige finanzielle Bildung der Schlüssel dafür sei, die Notwendigkeit eines stabilen Wertspeichers zu verstehen. Darüber hinaus insistieren sie vehement darauf, dass Bitcoin als einzige geeignete Lösung für dieses Bedürfnis betrachtet werden sollte.

Es wird vorgeschlagen, dass wir die Grundlagen unseres Geld- und Wirtschaftssystems bereits frühzeitig in den Schulen vermitteln sollten. Dies geschieht in der Erwartung, dass Kinder eigenständig zu dem Schluss kommen, Inflation sei schädlich und Deflation - insbesondere in Form von Bitcoin - die Rettung der Menschheit darstellt. Jedoch bin ich der Ansicht, dass die Realität nicht so schwarzweiß ist. Es erfüllt mich immer wieder mit Fragen, wie Bitcoiner:innen sich dieses Bildungsmodell konkret vorstellen. Sollen wir einfach jedes Kind mit dem "[Bitcoin Standard](https://www.thalia.de/shop/home/artikeldetails/A1056553952)" ausstatten und sagen: Lies dies und du wirst die Überlegenheit von Bitcoin erkennen? Oder sollten wir vielleicht zunächst sorgfältig in Erwägung ziehen, ob es nicht sinnvoller wäre, unsere Kinder und alle Menschen, die möglicherweise keine Fachkenntnisse haben, selbst über die Wahl zwischen einer deflationären oder inflationären Welt entscheiden zu lassen?

Es fällt mir schwer, die Selbstzufriedenheit zu akzeptieren, die behauptet, wir könnten einfach alle Menschen aufklären, indem wir sie dazu anhalten, die "richtigen" Bücher zu lesen und den "richtigen" Stimmen Gehör zu schenken. Selbstverständlich bin ich davon überzeugt, dass Bildung essentiell ist. Gleichwohl ist es von ebenso großer Bedeutung, dass Bildung nicht zu einer Einbahnstraße wird. Wir benötigen kritisch und unabhängig denkende Menschen, um den zukünftigen Herausforderungen gewachsen zu sein. Daher ist es unabdingbar, dass wir Menschen ermutigen, beide Seiten der Medaille zu erkunden - und dies betrifft nicht nur Finanzen, sondern auch die allgemeine, soziale und ethische Bildung.

Die Vorstellung, man könne lediglich die richtige "Orange Pill" (eine Anspielung auf die [Matrix](https://en.wikipedia.org/wiki/Red_pill_and_blue_pill) und übrigens auch fast ein eigener [Artikel](https://www.deutschlandfunkkultur.de/matrix-pille-verschwoerungstheorie-100.html) wert) zu sich nehmen, um eine Art finanzielle Erleuchtung zu erlangen, halte ich für mindestens diskussionswürdig. Was wir stattdessen anstreben sollten, ist eine offene, vielfältige Bildungslandschaft, welche den Menschen die Möglichkeit bietet, sich eine fundierte eigene Meinung zu bilden. Und das bedeutet zwangsläufig, sich über das Lesen von dem "Bitcoin Standard" oder anderen themenrelevanten Büchern hinaus zu informieren.

Ich möchte nicht behaupten, dass wir keine finanzielle Bildung benötigen. Doch ich möchte betonen, dass niemand das Monopol auf Weisheit besitzt. Daher schlage ich vor, anstatt voreilige Urteile wie "Inflation ist schlecht, Deflation ist gut" zu fällen, erst einmal eine Vielzahl von Büchern und Quellen heranzuziehen und zu sehen, wo wir schlussendlich landen. Und das bedeutet auch, sich mit konträrer Literatur zu befassen, die sich eingehend mit der anderen Seite der Medaille auseinandersetzt.

Es ist von größter Bedeutung zu betonen, dass niemand fälschlicherweise den Eindruck gewinnen sollte, ich würde die Bedeutung von Deflation nicht anerkennen. Im Zuge meiner Recherchen bin ich zu der Erkenntnis gelangt, dass wir aufgrund technologischer Fortschritte zunehmend in eine deflationäre Welt hineinsteuern. Angesichts dieser Veränderungen ist es durchaus möglich, dass ein deflationäres Zahlungsmittel in einer solchen deflationären Welt sich als die optimale Wahl erweisen könnte.

Ich möchte diesen Artikel mit einem Zitat von [Niels Bohr](https://de.wikipedia.org/wiki/Niels_Bohr) beenden.

Aus dem Englischen:

> There are trivial truths and there are great truths. The opposite of a trivial truth is plainly false. The opposite of a great truth is also true.

Frei übersetzt:

> Es gibt trivialer Weise zwei Arten von Wahrheiten: tiefe Wahrheiten, die von ihrem Gegenteil anerkannt werden, und oberflächliche Wahrheiten, deren Gegenteil unwahr ist.

Dieses Zitat stammt aus "[The Philosophical Writings of Niels Bohr, Volume 1: Atomic Theory and the Description of Nature](https://www.amazon.com/gp/product/091802451X/ref=x_gr_bb_amazon?ie=UTF8&tag=x_gr_bb_amazon-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=091802451X&SubscriptionId=1MGPYB6YW3HWK55XCGG2)". Es drückt für mich die Komplexität der Wahrheit aus und impliziert, dass es oft mehrere Perspektiven oder Interpretationen gibt.

### Literatur empfehlungen

["Der Preis der Zukunft"](https://www.thalia.de/shop/home/artikeldetails/A1061748452) in diesem Buch argumentiert Jeff Booth, dass technologischer Fortschritt zu einer unausweichlichen Deflation führt, was radikale Änderungen in unserer Wirtschaftsstruktur erfordert, um Wohlstand und soziale Stabilität zu sichern.

In ihrem Buch ["Dieses Mal ist alles anders: Acht Jahrhunderte Finanzkrisen"](https://www.thalia.de/shop/home/artikeldetails/A1058898641) analysieren die Wirtschaftswissenschaftler:innen Carmen M. Reinhart und Kenneth S. Rogoff Finanzkrisen über einen Zeitraum von 800 Jahren und argumentieren, dass trotz technologischer oder institutioneller Fortschritte Finanzkrisen ein wiederkehrendes Phänomen sind, das durch exzessive Schuldenausweitung getrieben wird.

In ["Allgemeine Theorie der Beschäftigung, des Zinses und des Geldes"](https://www.duncker-humblot.de/buch/allgemeine-theorie-der-beschaeftigung-des-zinses-und-des-geldes-9783428150489/?page_id=1) argumentiert John Maynard Keynes, dass bei unzureichender Nachfrage Arbeitslosigkeit auftreten kann und dass in solchen Zeiten staatliche Interventionen und Ausgaben notwendig sind, um die volle Beschäftigung und wirtschaftliche Stabilität zu fördern. Ich habe nie Ökonomie Studiert aber ich frage mich ob dieses Buch teil des Studiums ist?

Und zu guter Letzt noch die bei Bitcoiner:innen verhasste MMT (Modern Monetary Theory) und einem Buch von Maurice Höfgen [Mythos Geldknappheit: Modern Monetary Theory oder warum es am Geld nicht scheitern muss](https://www.amazon.de/Mythos-Geldknappheit-Modern-Monetary-scheitern-ebook/dp/B088R6PNZW) - ich finde, man sollte es zumindest einmal gelesen haben, um vielleicht besser argumentieren zu können, auch wenn der Autor so gerne alle Bitcoiner:innen so unangenehm polemisch über einen Kamm schert.

*Title Image Midjourney:*

```bash
 A open book divided into two, with war raging on both sides
```

"Seit ich Bitcoin entdeckt habe, lese ich Bücher" - Eine Aussage dir mir zudenken gibt.

Bildung sollte keine Einbahnstraße sein - Bitcoin - Sil3ntrunning

Bildung_sollte_keine_einbahnstraße_sein.png

Kenne beide Seiten der Medaille

Bildung sollte keine Einbahnstraße sein

## Vorwort

Kriege, Flüchtlingswellen, Populismus: all das hat mich dazu gebracht, zu hinterfragen, warum die Welt so ist, wie wir sie kennen. Eine wichtige - wenn auch nicht die einzige - Antwort auf diese Frage ist unser Geld und wie Regierungen, durch Entwertung und [monetären Kolonialismus](https://bitcoinmagazine.com/culture/bitcoin-a-currency-of-decolonization) die Kontrolle über ganze Länder innehaben. Beispiel Frankreich mit dem [CFA-Franc](https://www.bpb.de/shop/zeitschriften/apuz/geldpolitik-2022/507738/der-cfa-franc/). Ich glaube Bitcoin kann weit mehr sein als nur ein Investment, ein Klimasünder oder das Geld für Kriminelle. Das ist also ein versuch das Interesse bei dir zu wecken und zuzeigen was mit Bitcoin möglich ist.

Ich bin kein Ökonom und es gibt sicherlich viele Menschen, die ein detaillierteres Wissen zu diesen Themen haben. Ich habe darüber nachgedacht, ob ich mir überhaupt eine Meinung dazu bilden kann und darf. Trotzdem habe ich den Mut gefasst und versuche hier, einen kurzen Überblick darüber zu geben, warum Bitcoin für so viele Menschen auf der Welt eine Hilfe sein kann und warum es mich nach über 10 Jahren immer noch nicht los lässt.

Schüttel also deine Vorurteile ab und viel Spaß beim Lesen 😀 

![ {{ w: 1000, h: 300 }} ](/uploads/Bitcoin_Eine_globale_Perspektive_fuer_Finanzielle_Inklusion_c61c729376.png) 

## Bitcoin: Eine Bottom-up-Bewegung

In seinem Artikel ["Bitcoin Is A Trojan Horse For Freedom"](https://bitcoinmagazine.com/culture/bitcoin-is-a-trojan-horse-for-freedom), veröffentlicht im Bitcoin Magazine, entfaltet [Alex Gladstein](https://hrf.org/team/alex-gladstein/) eine tiefgründige Analyse. Er argumentiert, dass Bitcoin weit mehr ist als nur eine "Number-Go-Up"-Technologie, die Gier und Eigeninteresse befeuert. Vielmehr sieht er Bitcoin als eine "Freedom-Go-Up"-Technologie, die eine uneinnehmbare Bastion gegen jegliche Form von Autorität darstellt.

Gladstein zieht eine faszinierende Parallele zur griechischen Mythologie des ["Trojanischen Pferdes"](https://de.wikipedia.org/wiki/Trojanisches_Pferd). Diese hölzerne Skulptur in Pferdegestalt, platziert vor den Toren Trojas, verbarg in ihrem Inneren griechische Krieger:innen. Nachdem die Trojaner:innen das Pferd in ihre Stadt gebracht hatten, nutzten die verborgenen Soldat:innen die Dunkelheit, um die Stadttore von innen zu öffnen und den Weg für das restliche griechische Heer zu ebnen.

Gladstein nutzt diese Metapher, da sie treffend illustriert, warum Bitcoin einerseits unzerstörbar ist und andererseits mit der Zeit die Finanzsysteme von innen heraus verändern wird. Die Gier der westlichen Welt nach mehr Reichtum und Wohlstand hat Bitcoin erst zu dem gemacht, was es heute ist. Bitcoin ist das Trojanische Pferd, das den Eliten von innen die Möglichkeit raubt, sich einen finanziellen Vorteil ([Cantillon-Effekt](https://de.wikipedia.org/wiki/Cantillon-Effekt)) zu verschaffen. Denn im Gegensatz zu konventionellen Geldsystemen, die zentral von Staaten und Banken gesteuert werden, ist es bei Bitcoin nicht möglich, diese Kontrolle zentral auszuüben. Diesen Vorteil nutzen nun Menschen weltweit, um sich von der Abwertung und Fremdbestimmung durch ihre Regierungen zu befreien. Für die Ärmsten dieser Welt kann Bitcoin also eine Lösung sein.

Die Schriften und Arbeiten von Alex Gladstein, [Anita Posch](https://anitaposch.com/) und vielen anderen haben meine Überzeugung bestärkt, dass Bitcoin nicht nur für uns in der westlichen Welt von Bedeutung ist. Tatsächlich stellen wir eine Minderheit im globalen Kontext dar, da die Mehrheit der Menschen - etwa 4 Milliarden - in Ländern mit politischer Unterdrückung, hoher Inflation und Korruption lebt. Für diese Menschen kann Bitcoin eine lebensrettende Leine und ein Ausweg aus finanzieller Unterdrückung sein.

Um dies bildlich zu veranschaulichen, hat die Human Rights Foundation eine Grafik veröffentlicht, die zeigt, dass über 50 % der Weltbevölkerung unter autoritären Regierungen leben, in denen es nicht möglich ist, frei zu sprechen und zu leben.

![Human rights foundation {{ w: 1000, h: 300 }}](/uploads/Authoritarianism_map_151a473477.png) 

*Source: https://hrf.org/about/mission/*

## Wahrnehmung und Realität

In den Medien besteht weitgehend der Konsens, dass Bitcoin nichts weiter ist als eine Spekulationsanlage und ein Pyramidensystem ohne intrinsischen Wert. Aus der Perspektive einer Person aus Mitteleuropa oder Nord Amerika erscheint die Notwendigkeit eines Zensurresistenten und dezentralen Zahlungsmittels oft nicht gegeben. Dies liegt daran, dass wir das Privileg haben, in stabilen Demokratien mit funktionierenden Finanzsystemen und mit zuverlässigen Dienstleistern wie PayPal zu leben.

Ich denke daher, dass unsere Systeme vorerst weiterhin so funktionieren werden, wie sie es derzeit tun. Soziale und wirtschaftliche Probleme werden wir durch unsere etablierten Mittel der Geldschöpfung lösen und versuchen über Gesetze zu lenken. In diesem Kontext wird Bitcoin wohl nur eine untergeordnete Rolle spielen. Aber die Gier der Menschen wird Bitcoin weiter wachsen lassen und es ist zu spät das jemand etwas dagegen unternehmen kann. 

## Bitcoin als Werkzeug der Emanzipation: Das Beispiel Roya Mahboob

Es gibt zahlreiche Beispiele, in denen Bitcoin Menschen geholfen hat, Repressionen zu überwinden und ihre Lebensumstände zu verbessern, oder zumindest ihre Hoffnungen und Möglichkeiten erweitert hat.

Ein inspirierendes Beispiel ist das von [Roya Mahboob](https://de.wikipedia.org/wiki/Roya_Mahboob), einer afghanischen Unternehmerin, die Bitcoin zur Förderung der finanziellen Unabhängigkeit von Frauen in Afghanistan einsetzt. Sie gründete Citadel Software, ein Unternehmen, das hauptsächlich Frauen beschäftigt. Sie begann, ihre Mitarbeiter:innen in Bitcoin zu bezahlen, was es ihnen ermöglichte, ihr Einkommen vor den Männern in ihrem Land zu verbergen. Einige dieser Frauen konnten ihre Bitcoin-Ersparnisse nutzen, um ein neues Leben in anderen Ländern zu beginnen.

Artikel (engl.): https://bitcoinmagazine.com/culture/bitcoin-financial-freedom-in-afghanistan
Übersetzung (dt.): https://bitcoinsozial.de/der-weg-zu-finanzieller-freiheit-in-afghanistan/ 

Ich könnte viele weitere Beispiele bringen, doch glaube ich, sollte ich in dir Interesse geweckt haben wirst du selbstständig deinen Weg finden. Wenn du aber einen kleinen anstoß benötigst liste ich am ende des Artikels noch einige Links zu Podcasts und Büchern auf.

Es liegt jetzt also an dir, herauszufinden, ob Bitcoin einen Mehrwert bieten kann, jenseits von Spekulation und Gier. Und falls du auf eine andere Schlussfolgerung kommst lass es mich gerne wissen. Auch ich habe noch nicht alle Antworten gefunden und bin offen für andere Sichtweisen.

----------
#### Weiterführendes

Mein Artikel basiert zu einem großen Teil auf den Artikeln von Alex Gladstein welche im [Bitcoin Magazine](https://bitcoinmagazine.com/authors/alexgladstein) veröffentlicht wurden.

Wenn du diese Artikel gerne auf Deutsch lesen möchtest kann ich dir das Buch ["Das Trojanische Pferd der Freiheit: Bitcoin als Chance im Kampf um Selbstbestimmung und Menschenrechte"](https://www.amazon.de/gp/product/B0C6FDZZS3/ref=dbs_a_def_rwt_hsch_vapi_tkin_p1_i0) empfehlen.

![Das Trojanische Pferd der Freiheit {{ w: 300, h: 150 }}](/uploads/Das_Trojanische_Pferd_der_Freiheit_dbed2b0ee7.jpg) 

Dann gibt es noch ein Interview mit Anita Posch, sie ist regelmäßig in Afrika unterwegs und hilft Menschen Bitcoin zu verstehen und zu verwenden. Beim Podcast "Bitcoin verstehen" gibt es ein Interview mit ihr.

https://www.youtube.com/watch?v=a5jPDldaaQw

*Midjourney Prompt (Title image):*

```bash
People watch to the horizont, Sun as Bitcoin symbol, art by Hayao Miyazaki, style of Robert McCall and Jean Giraud Moebius and Craig Mullins, highly detailed, dynamic, expressive, clean lines, cinematic, stunning, realistic lighting and shading, vivid, vibrant
```

Mehr als nur Spekulation: Wie Bitcoin weltweit zur finanziellen Inklusion beiträgt

Bitcoin: Eine globale Perspektive für Finanzielle Inklusion

Next.js Server Actions & Tanstack Query

Das Dream-Team für dein Datenmanagement?

06.04.2025

Wie du ein Paket auf JSR.io veröffentlichts

mit Deno 2

13.10.2024

Metallic-Flakes Material in three.js und next.js

Wir wir einen Metallic Flakes Material erstellen

11.09.2024

React Hooks: Der useRef Hook

React Hooks vorgestellt

23.05.2024

Next.js Server Actions

Super Simple

14.04.2024

CORS

Cross-Origin Resource Sharing

22.02.2024

Ein Ritt durch Iterationen

Javascript und seine Schleifen-Typen

31.10.2023

Javascript Worker Threads

Singlethread- vs. Multithread

28.10.2023

Deploy, Mint und Transfer mit der Ord Wallet

Alles was du wissen musst

23.09.2023

Bitcoins Narrative

Warum ich glaube das Bitcoin-Zitadellen keine gute idee sind

14.07.2023

Bildung sollte keine Einbahnstraße sein

Kenne beide Seiten der Medaille

11.07.2023

Bitcoin: Eine globale Perspektive für Finanzielle Inklusion

Wie Bitcoin das leben von so vielen verbessern kann

09.07.2023