dhbw: file-namen auf dash-convention vereinheitlicht (consistent mit hdm), Makefile dhbw_KAPITEL aktualisiert
This commit is contained in:
@@ -0,0 +1,412 @@
|
||||
---
|
||||
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 -->
|
||||
|
||||
|
||||
|
||||
# Web Engineering
|
||||
|
||||
**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
|
||||
|
||||
**Sommersemester 2026** · Sitzung 3 — JS, Frameworks & Build Tools
|
||||
|
||||
[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 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 -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _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)
|
||||
|
||||
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
- 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
|
||||
|
||||
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
```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)
|
||||
|
||||
Reference in New Issue
Block a user