---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Web Engineering – DHBW Stuttgart"
footer: "Michael Czechowski – SoSe 2026"
title: JavaScript & Frameworks
---

<style>
:root {
  --color-foreground: #1a1a2e;
  --color-highlight: #d63384;
  --color-dimmed: #4a4a6a;
}
section.invert {
  --color-foreground: #fff;
}
section {
  font-size: 1.4rem;
}
h1 {
  color: #a02060;
}
section.invert h1 {
  color: #fff;
}
h2 {
  color: #1f2937;
}
section.invert h2 {
  color: #f48fb1;
}
pre {
  background: #0f0f23;
  color: #f48fb1;
  border-radius: 8px;
  border-left: 3px solid #d63384;
}
pre code {
  background: transparent;
  color: inherit;
}
code {
  background: #1a1a2e;
  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
a {
  color: var(--color-highlight);
}
</style>

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->

![bg cover opacity:0.2](./assets/background.png)

# Web Engineering

**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik

**Sommersemester 2026** · Sitzung 3 — JS, Frameworks & Build Tools

---

# Ressourcen zum Selbstlernen

- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)


<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->

# JavaScript

---

# ECMAScript

- **Ecma International** — European Computer Manufacturers Association
- Seit **1997** standardisiert als **ECMA-262**
- Implementierungen: **JavaScript** (Netscape, später Mozilla), **JScript** (Microsoft), **ActionScript** (Adobe Flash) etc.
- Aktuelle Version: **ECMAScript 2024 (ES15)**, jährliche Releases

**Browser-Kompatibilität:**
- Faustregel: **ES2017+** läuft in allen modernen Browsern
- Ältere Targets via Transpiler (Babel, esbuild, swc, tsc)
- Kompatibilitätstabelle: [kangax.github.io/compat-table](https://kangax.github.io/compat-table/)

---

# JavaScript Grundlagen

```javascript
// Variablen
let name = "Welt";
const alter = 25;

// Funktionen
function gruss(name) {
  return `Hallo, ${name}!`;
}

// Arrow Functions
const add = (a, b) => a + b;

// Arrays
const arr = [1, 2, 3];
arr.map(x => x * 2); // [2, 4, 6]
```

---

# DOM Manipulation

```javascript
// Element auswählen
const title = document.querySelector('h1');

// Inhalt ändern
title.textContent = 'Neue Überschrift';

// Event Listener
button.addEventListener('click', () => {
  alert('Geklickt!');
});
```

---

# Fetch API

```javascript
fetch('/api/products')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => console.error(err));
```

---

# Async/Await

```javascript
async function loadProducts() {
  try {
    const res = await fetch('/api/products');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('Fehler:', err);
  }
}
```

---

<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #050517 -->

![bg fit](./assets/demos/web-engineering-mandala.png)

---

<!-- _backgroundColor: #050517 -->
<!-- _color: #e2e8f0 -->

# Web Engineering Mandala

Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://nextlevelshit.github.io/web-engineering-mandala/)

3 Schichten:
- **Core Layer** — JS, HTML, CSS (vanilla)
- **Build Layer** — bundlers, runtimes, template engines, pre/post processors
- **Application Layer** — frontend, backend, frameworks, SSR, CSS-utilities

3 Segmente: HTML (blau) · JavaScript (rot) · CSS (grün) · Mittelpunkt: `package.json`

---

# JavaScript Frameworks – Kategorien

| Kategorie | Beispiele |
|-----------|-----------|
| **CSS Frameworks** | Tailwind, Bootstrap, shadcn/ui |
| **Frontend Frameworks** | React, Vue, Svelte, Astro |
| **Rendering / Meta** | Next.js, Nuxt, Gatsby |
| **Build Tools / Bundler** | Webpack, Vite, Parcel, esbuild |
| **Backend Frameworks** | Express, Fastify, NestJS |

---

# Vanilla JS – Counter

```html
<button id="myButton">Clicked 0 times</button>
<script>
  let count = 0;
  const btn = document.getElementById('myButton');
  btn.addEventListener('click', () => {
    count++;
    btn.textContent = `Clicked ${count} times`;
  });
</script>
```

**Pro:** hohe Kompatibilität, simpel
**Contra:** State-Management und Re-Rendering werden schnell komplex

---

# React – Counter (JSX)

![bg right:25% fit](./assets/logos/frameworks/react.svg)

```jsx
import { useState } from "react";

function MyButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}
```

- **Component-Based** Architecture
- **Virtual DOM**, JSX, Hooks
- großes Ökosystem (React Router, Redux, …)

---

# Vue 3 – Composition API

![bg right:25% fit](./assets/logos/frameworks/vue.svg)

```vue
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>
```

- **Reactive Data Binding**
- Single-File Components (`.vue`)
- Vue Router, Pinia (State)

---

# Svelte – Counter

![bg right:25% fit](./assets/logos/frameworks/svelte.svg)

```svelte
<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
```

- **Compiler-Based** – kein Runtime-Framework
- Reactive Assignments (`let`)
- Built-in Animationen

---

# Astro – Content-First

![bg right:25% fit](./assets/logos/frameworks/astro.svg)

```astro
---
const greeting = "Hallo DHBW";
---
<html>
  <body>
    <h1>{greeting}</h1>
    <MyReactButton client:load />
  </body>
</html>
```

- **Islands Architecture** – Komponenten mehrerer Frameworks mischen
- Default: kein JS im Output (nur statisches HTML)
- Hydration on demand (`client:load`, `client:visible`)

---

# Rendering Frameworks

| | Frontend | SSR | SSG | File Routing |
|---|---|---|---|---|
| **Next.js** | React | ja | ja | `/app/page.js` |
| **Nuxt** | Vue | ja | ja | `/pages/*.vue` |
| **Gatsby** | React | nein | ja | GraphQL Data |

---

# Build Tools – Webpack

![bg right:25% fit](./assets/logos/frameworks/webpack.svg)

- Module Bundling (JS, CSS, Images)
- Module Loaders + großes Plugin-Ökosystem
- Code Splitting, HMR
- Konfigurations-lastig (`webpack.config.js`)

→ Standard für viele Legacy-Setups.

---

# Build Tools – Vite

![bg right:25% fit](./assets/logos/frameworks/vite.svg)

```javascript
// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:4567",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "")
      }
    }
  }
});
```

- Rollup unter der Haube, **HMR mit ES Modules**
- Tree-Shaking, Code Splitting, React + Vue out-of-the-box

---

# Build Tools – Parcel

![bg right:25% fit](./assets/logos/frameworks/parcel.png)

```json
{
  "name": "my-project",
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}
```

- **Zero-Config**
- Auto-Resolution, HMR
- TS / CSS-Preprocessors out-of-the-box

---

# Microfrontends

- Mehrere unabhängige Frontend-Apps in einer Page
- Module Federation (Webpack 5)
- **single-spa**: https://single-spa.js.org/
- Anwendungsfall: große Teams, unterschiedliche Tech-Stacks pro Domain

→ Komplexitätskosten: nur bei echtem Skalierungsbedarf.

---

# Demo-Repos

- https://github.com/nextlevelshit/dhbw-client-js (Counter, multi-framework)
- https://github.com/nextlevelshit/node-cache-api (API + Tests)
- https://github.com/nextlevelshit/dhbw-docker (Compose-Stack)