Code Formatter
Einem Computer ist es egal, ob der Code hübsch aussieht, solange er korrekt ist und keine Fehler erzeugt. Code-Formatter sind dafür da den Code richtig zu formatieren, sodass auch in einem Team einfacher gemeinsam daran gearbeitet werden kann. Würde man beispielsweise alle Überschriften in einem Text weglassen oder den Text mit vielen Lücken zwischen den Wörtern anzeigen, wären die Zusammenhänge schwerer erkennbar und vorallem alles mühsam zu lesen.
Aus diesem Grund gibt es Code Formatter. Sie helfen dabei Code so verständlich wie möglich darzustellen. Das hilft dabei Fehler zu vermeiden, Probleme schneller zu beheben und die Arbeit untereinander zu vereinfachen. Damit man nicht selbst auf die richtige Formatierung während dem programmieren achten muss, gibt es schon fertige Tools die zu der jeweiligen IDE hinzugefügt werden können. Diese achten dann darauf, dass die Einrückungen, Kleinschreibung und Namenskonventionen, Weißraum, Stil und Rechtschreibung von Variabeln & der Stil und die Verwendung von Kommentaren innerhalb richtig angewendet und dargestellt werden.
Ein Besipiel hierfür ist Prettier.io. Es gibt aber auch Styleguides, die einem die verschiedenen Konventionen aufzeigen, sodass gemeinsames arbeiten am Code einfacher und vereinheitlicht ist: Mozilla.org
Ebenfalls gibt es noch IntelliSense. Die ist ein von Microsoft angebotenes Hilfsmittel zur automatischen Vervollständigung bei der Bearbeitung von Quellcode. IntelliSense gibt zusätzliche Informationen und Auswahlmöglichkeiten, die es einem erleichtern Quellcode zu schreiben, besonders wenn eine große Menge selbst geschrieben wird. Diese automatische Vervollständigung wird auch Code Hinting, Code Completion genannt.
Komponenten-Bibliotheken
Eine Komponenten-Bibliothek oder auch Pattern Library oder Styleguide genannt, ist eine zentralisierte Sammlung wiederverwendbarer Komponenten und kann in größeren Systemlandschaften teamübergreifend eingesetzt werden.
Ein Beispiel für eine solche Komponente ist bspw. dieser Abschnitt einer Todo-App:
inovex.de/blog
- Vorteile von Komponenten-Bibliotheken
-
- Jede Komponente erfüllt ihren speziellen Zweck
- Komponenten können ineinander geschachtelt und über ihre API verknüpft werden. Auf diese Art lassen sich komplexe Anwendungsfälle abbilden
- Das Isolieren von Komponenten ermöglicht eine hohe Testbarkeit mit minimalem Aufwand bei gleichzeitig hoher Wiederverwendbarkeit.
- Enge Verbindung von Design und Entwicklung
- UI/UX Vorgaben sind direkt umgesetzt
- barrierefreier Inhalt kann direkt umgesetzt werden, wenn dieser in einer Komponente schon berücksichtigt wurde. Dies kann mit aXe getestet werden.
Mehr zu dem Thema, und wann sich ein Aufbau einer Komponenten-Bibliothek für ein Projekt lohnt oder nicht, findet ihr in diesem Blog-Beitrag: Komponentenbibliotheken für die Web-Entwicklung
Libraries
Es gibt viele verschiedene JavaScript-Libraries für viele verschiedene
Nutzungskontexte. Sie enthalten verschiedene Funktionen, Methoden oder
Objekte, um praktische Aufgaben auf einer Website oder JS-basierten
Anwendung auszuführen. Diese Bibliotheken kann man sich wie viele
verschiedene Bücher vorstellen in einer großen Bibliothek vorstellen.
Durch die verschiedenen Bücher bekommst du viele neue Perspektiven
oder Ideen die du für deine eigenen Projekte im Leben nutzt.
Ein gutes Beispiel hierfür ist eine Diashow. Anstatt diese von Grund
auf neu zu bauen, kannst du auf eine fertige Library von einem anderen
Entwickler zurückgreifen, der sich schon die Mühe gemacht hat diese zu
entwickeln. Das spart viel Zeit!
Beachte:
"Wenn man Componenten mit einer Library wiederverwendet, muss man auch immer beachten, dass man sich damit Sicherheitslücken in sein Projekt reinholt. Wenn jemand eine Diashow-Library hackt, kann er ggf. auch deine App hacken, wenn du diese nutzt. Deshalb sollte man immer sehr darauf achten, dass es "renommierte" Libararies sind, die man einsetzt und dass keine Sicherheitslücken bekannt sind."
(Zitat: Daniel)
Hier ist eine Liste mit UI-WebComponent Libraries: UI-Libraries
Hier findest du eine Liste an vielen verschiedenen Libraries die du für dein Projekt nutzen kannst: Generelle Libraries & Frameworks
Was ist der Unterschied zu einem Framework?
Auf dieser Seite findest du auch viele verschiedene Frameworks. Diese wirken erstmal ähnlich zu Libraries haben aber einen entscheidenden Unterschied. Frameworks sind sozusagen eine Struktur/Grundgerüst mit vorgefertigten verschiedenen Materialien, mit dem du dir dein Projekt selbst einfach und schnell aufbauen kannst.
Hier geht's zu den Frameworks