search

Marvin-Dem / js-playground

0 stars 0 forks source link

Umstellen von Lebenslauf Main Content auf Komponenten #21

Open p-runge opened 5 months ago

p-runge commented 5 months ago

Nun soll auch der Rest des Lebenslaufs entsprechend dynamisch mit Komponenten hinzugefügt werden.

Vorbereitung

Eigentliche Aufgabe

Im Main Bereich wird das Thema "Component Driven Design" nochmal etwas interessanter. Hier haben wir nämlich das erste Mal den Fall, dass gewisse Inhalte mehrfach vorkommen, und wir somit tatsächlich vom CDD profitieren können.

  1. Mache dir Gedanken darüber wie der Inhalt in einzelne Unterkomponenten aufgeteilt werden könnte. Dazu sei gesagt: Bei weitem nicht jedes Element muss auch eine eigene Komponente sein. Schau dir dazu vor allem an: Welche Dinge wiederholen sich?

  2. Prüfe was in den jeweiligen Komponenten an Inhalten statisch (also überall gleich) ist, und was dynamisch ist (also sich bei jedem Vorkommnis ändert).

  3. Hol dir an dieser Stelle einmal Feedback, ob das alles so korrekt ist.

Hier kannst du etwas, was du zuvor schon von Funktionen gelernt hast, anwenden – und zwar "Parameter". Komponenten sind letztendlich ja nichts anderes als Funktionen. Bisher waren unsre Komponenten nur immer statisch – haben also keine Parameter gebraucht. Sobald eine Komponente Inhalte hat, die dynamisch sind, kann man für jeden entsprechenden Inhalt ein Parameter definieren.

Beispiel: Ich habe einen Button, der zwar überall gleich aussehen soll (also gleiche Farbe, gleiche Schriftgröße, etc.), aber unterschiedliche Labels haben soll (Speichern, Abbrechen, Bestätigen, ...). Hier wäre es sinnig eine Komponente draus zu machen, sodass ich nicht jedes Mal sagen muss, wie der Button aussehen soll. Das Label wäre aber dynamisch. Ich könnte also der Komponente / Funktion ein Parameter label: string mitgeben, welches ich in der Komponente verwenden kann, und welches ich von draußen beim Einbinden meiner Button Komponente definieren kann: const button = Button("Speichern");

  1. Baue die einzelnen Komponenten.
  2. Pflege deine dynamischen Inhalte in JavaScript Variablen, und befülle dynamisch deine Komponenten mit den passenden Parametern.
p-runge commented 5 months ago

Schonmal Feedback zum aktuellen Stand: https://github.com/Marvin-Dem/js-playground/tree/0af060fd5ff08c47278e9b06e6538068d685842a

Die Komponente CvContainer ist ein guter Ansatz, da sie häufiger in genau dem Design vorkommt. Deshalb ergibt es Sinn diesen Block von HTML & Co als Komponente zu definieren. Sowohl das Erstellen des Containers als auch das Erzeugen und Anhängen von Subelementen in der gleichen Komponente ist eine saubere Architektur und machst du hier wie im Bilderbuch. Allerdings fügst du aktuell alle Unterelemente direkt in den Container ein, sodass dein Markup letztendlich in etwa so aussieht:

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  // ...
</div>

Diese Struktur ist so allerdings natürlich nicht richtig. Innerhalb deiner Containers sind deine Elemente auch ineinander geschachtelt. Wenn du in deine HTML Datei schaust, kannst du das auch sehen. Da siehst du, dass z.B. die Elemente mit den Inhalten "Ausbildung", ", Abschluss der allgemeinen Hochschulreife" und "2014" allen gemeinsam in einem Wrapper Element stecken. "Kernfächer im Abitur: Englisch und Geschichte" und "Weitere Fächer in der Abiturprüfung: Deutsch und Mathematik (4.Fach)" hingegen sind in einem eigenen Wrapper.

Außerdem verwendest du wieder für alle Elemente einfach div Elemente, was so nicht dem Markup entspricht.

Mein Tip: Hangel dich wirklich Stück für Stück an deinem Markup in der HTML Datei entlang. Gehe es von oben nach unten Zeile für Zeile durch und setze nacheinander folgendes für jedes einzelne Element um:

Wenn du diese Liste strikt Schritt für Schritt, Element für Element durchgehst, erhältst du am Ende 1 zu 1 das gleiche Markup.