Zum Hauptinhalt springen

App-Architektur

Erweiterbarkeit​

Teaching-Dev ist so konzipiert, dass es leicht erweiterbar ist. Die Architektur ermöglicht es, neue Funktionen hinzuzufügen, ohne die bestehende Funktionalität zu beeinträchtigen. Dies wird durch die Verwendung zum Einen von Webpack Aliases und zum anderen durch die Verwendung von Yarn Workspaces erreicht.

Die grundsätzliche Ordnerstruktur von Teaching-Dev ist wie folgt aufgebaut:

teaching-dev/
├── packages/
│   ├── tdev/
│   │   ├── remark-pdf/
│   │   │    ├── package.json
│   │   │    └── index.ts
│   │   ├── remark-pdf/
│   ├── <user-scoped components>
|   ...
├── src/
│   ├── api/
│   ├── components/
│   ├── hooks/
│   ├── pages/
│   ├── plugins/
│   ├── stores/
│   └── static/
└── website/
    └── static/

Webpack Aliases​

Mit Webpack Aliases können Ordner angegeben werden, in welchen die zu importierenden Module gesucht werden:

{
    "@tdev-components/*": ["website/components/*", "src/components/*"],
    "@tdev-hooks/*": ["website/hooks/*", "src/hooks/*"],
    "@tdev-models/*": ["website/models/*", "src/models/*"],
    "@tdev-stores/*": ["website/stores/*", "src/stores/*"],
    "@tdev-plugins/*": ["website/plugins/*", "src/plugins/*"],
    "@tdev-api/*": ["website/api/*", "src/api/*"],
    "@tdev/*": ["website/*", "src/*", "packages/tdev/*"],
    "@tdev-original/*": ["src/*", "packages/tdev/*"],
    "@site/*": ["./*"]
}

Teaching-Dev implementiert so eine Art "Fallback"-Mechanismus, der es ermöglicht, dass Komponenten, Hooks, Stores und Plugins in mehreren Ordnern gesucht werden. Zuerst wird im website-Ordner gesucht, dann im src-Ordner und zuletzt in den packages.

Dadurch kann die Website-Entwicklung von der Entwicklung der Kernfunktionen getrennt werden. Solange keine Änderungen im src-Ordner und- oder im packages-Ordner vorgenommen werden, kann die Website unabhängig von der Kernentwicklung weiterentwickelt werden und stets die neuste Version von Teaching-Dev verwenden.

Yarn Workspaces​

Mit Yarn Workspaces ist es möglich, Bibliotheken für eigene Erweiterungen zu verwenden, ohne diese im package.json von Teaching-Dev zu definieren. Dies ermöglicht

  • einfaches Synchronisieren mit Teaching-Dev
  • einfaches übernehmen von Funktionen, die eine andere Teaching-Dev-Instanz entwickelt hat
  • einfache Entwicklung von Teaching-Dev Erweiterungen, indem die Abhängigkeiten in der package.json des jeweiligen Pakets definiert werden können.

Eigene Tools hinzufügen​

Im Unterricht entstehen teils auf die Schnelle eigene Visualisierungen, Tools oder Erweiterungen, die jenach Anwendung auch eigene Abhängigkeiten (Bibliotheken) benötigen. Damit solche Tools ohne viel Aufwand selber geschrieben und aber auch von anderen Lehrpersonen einfach übernommen weren können, können solche Tools als Package angelegt werden.

packages/
├── tdev/
|   ├── /* nicht verändern, diese Packages werden von tdev bereitgestellt */
├── hfr
│   ├── huffman-tree
│   │    ├── package.json
│   │    ├── index.tsx
│   │    └── styles.module.scss
│   ...
├── brr
│   ├── netpbm-editor
│   │    ├── package.json
│   │    ├── index.tsx
│   │    └── styles.module.scss
│   ...

Die Namen (und das Scoping) der Pakete ist grundsätzlich frei wählbar. TDev verwendet die Konvention, dass die Pakete mit dem Kürzel der Lehrperson beginnen, die das Paket erstellt hat. So kann das Paket einfach von anderen Lehrpersonen übernommen werden, ohne dass es zu Namenskonflikten kommt.

packages/hfr/huffman-tree/package.json
{
    "name": "@hfr/huffman-tree",
    "version": "0.1.0",
    "main": "index.tsx",
    "types": "index.d.ts",
    "private": true,
    "dependencies": {
        "d3": "^7.9.0"
    },
    "devDependencies": {
        "vitest": "*",
        "@docusaurus/module-type-aliases": "*",
        "@docusaurus/core": "*"
    },
    "peerDependencies": {
        "@tdev/core": "*"
    }
}

Dann kann die Visualisierung direkt verwendet werden:

import HuffmanTree from '@hfr/huffman-tree';

<HuffmanTree />
Hinweis

TDev stellt grundsätzlich keine eigenen Visualisierungstools zur Verfügung, stellt aber die Infrastruktur bereit, um eigene Tools zu erstellen. Diese können dann von anderen Lehrpersonen übernommen und weiterentwickelt werden.

Debug​

Im Projekt ist 👉 @docusaurus/plugin-rsdoctor als dev dependency installiert. Dieses Plugin hilft bei der Analyse von Performance-Problemen und kann beim Aufsuchen von kritischen (langsamen) Code-Teilen helfen.

RSDOCTOR=true yarn run build
CC 4.0