https://github.com/devalade/decorator-pattern
Interactive Decorator Pattern presentation with Slidev
https://github.com/devalade/decorator-pattern
Last synced: 9 days ago
JSON representation
Interactive Decorator Pattern presentation with Slidev
- Host: GitHub
- URL: https://github.com/devalade/decorator-pattern
- Owner: devalade
- Created: 2026-03-10T19:56:40.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-03-10T20:09:53.000Z (about 1 month ago)
- Last Synced: 2026-03-11T01:44:44.162Z (about 1 month ago)
- Language: Vue
- Homepage: https://decorator-pattern.vercel.app
- Size: 72.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Présentation : Decorator Pattern
Une présentation Slidev de 5 minutes expliquant le Decorator Pattern à travers l'analogie du café ☕
## 🚀 Démarrage rapide
```bash
# Installer les dépendances
pnpm install
# Lancer la présentation
pnpm dev
# Visiter http://localhost:3030
```
## 📋 Contenu de la présentation
1. **Introduction** - Le problème du café avec multiples ingrédients
2. **Analogie Café** - Visualiseur interactif avec calcul de prix
3. **Héritage vs Composition** - Comparaison avec diagrammes Mermaid
4. **Code Exécutable** - Éditeur Monaco avec exécution live
5. **Résumé** - Points clés et applications réelles
## 🎨 Fonctionnalités
- ✅ **Composant Vue personnalisé** : `CoffeeVisualizer.vue` - visualiseur interactif
- ✅ **Animations** : `v-click` pour révéler progressivement
- ✅ **Code Live** : Monaco Editor avec exécution (`{monaco-run}`)
- ✅ **Diagrammes** : Mermaid pour visualiser la structure
- ✅ **Magic Move** : Transitions fluides entre extraits de code
## 📁 Structure
```
.
├── components/
│ ├── Counter.vue # Composant Slidev par défaut
│ └── CoffeeVisualizer.vue # Visualiseur de café interactif
├── slides.md # Présentation principale
├── package.json
└── README.md
```
## 🎯 Public cible
Développeurs JavaScript, PHP et Java - avec ou sans expérience avancée en design patterns.
## 📚 Ressources
- [Refactoring Guru - Decorator Pattern](https://refactoring.guru/design-patterns/decorator)
- [Documentation Slidev](https://sli.dev/)
---
Créé avec [Slidev](https://github.com/slidevjs/slidev)