© Finsterbach/Shutterstock.com
Entwickler Magazin
Modulare Webentwicklung

LEGO im Frontend


In allen Programmiersprachen gibt es Diskussionen darüber, wie man seine Applikation möglichst effizient und gut wartbar entwickelt. Die Diskussionsergebnisse fließen in Entwicklungsparadigmen wie MVC (Model View Controller) oder in Benennungsrichtlinien ein. Folgt man solchen Standards, ist es leichter, Code von anderen zu verstehen und zu übernehmen.

Auch in der Frontend-Entwicklung sind solche Standards entstanden. Allerdings werden sie kaum beachtet. Sie haben leider nie die normative Kraft entfaltet, die ihnen zustehen würde, denn schließlich arbeiten viele unterschiedliche Entwicklertypen mit Frontend-Code. Insbesondere diejenigen, die wenig Kenntnisse und noch weniger Motivation für guten Frontend-Code haben, würden von guten und verständlichen Standards profitieren.

Vor der hilfreichen Benennungsrichtlinie steht aber der richtige Blick auf den Frontend-Code. Dabei müssen wir immer bedenken, dass wir mit HTML und CSS Designs umsetzen, also primär eine Verbindung zur Optik haben, nicht aber zur Programmierung.

Eine Seite besteht aus vielen LEGO-Steinen

Eine Webseite setzt sich aus vielen unterschiedlichen Einzelteilen zusammen: Es gibt einen Header, meist einen Footer und einen mehr oder minder stark unterteilten Inhaltsbereich. Im Inhaltsbereich können sich eine Fotogalerie, Teaser, ein großer Fließtext und vieles andere mehr befinden. Alle diese Bestandteile können und sollten für sich selbst betrachtet werden.

Eine Webseite ist dann eine Zusammenstellung aus vielen Einzelteilen. Meist werden sie aus einem CMS gespeist. Die Analogie zu LEGO liegt auf der Hand. Auch bei LEGO werden Objekte aus unterschiedlich großen Einzelteilen zusammengesetzt.

Im Grunde entwickeln wir keine Seiten, sondern „Systeme“. Die Einzelteile dieser Systeme bezeichne ich als „Module“. Mittlerweile wird auch gerne der Begriff „Patterns“ benutzt. Die Module sind prinzipiell unabhängig voneinander, jedes ist ein eigenes kleines Universum. Gängige Module sind beispielsweise:

  • Navigationen

  • Linklisten in Seitenleisten oder im Footer

  • Teaserboxen – mit oder ohne Bild

  • Slider/Karussell

  • in einem Akkordeon organisierte Inhalte

  • in einem Tabinterface organisierte Inhalte

  • eine eingebettete Landkarte

grochtdreis_lego_1.tif_fmt1.jpgAbb. 1: Einzelne Module der Startseite von ZEIT ONLINE markiert

Abbildung 1 repräsentiert eine nicht mehr aktuelle Version von ZEIT.de. Sie zeigt die modulare Zusammensetzung der Seite. Mitte 2017 sieht die aktuelle Version von ZEIT ONLINE (www.zeit.de) aus wie in Abbildung 2.

grochtdreis_lego_2.tif_fmt1.jpgAbb. 2: ZEIT...
Entwickler Magazin
Modulare Webentwicklung

LEGO im Frontend

In allen Programmiersprachen gibt es Diskussionen darüber, wie man seine Applikation möglichst effizient und gut wartbar entwickelt. Die Diskussionsergebnisse fließen in Entwicklungsparadigmen wie MVC (Model View Controller) oder in Benennungsrichtlinien ein. Folgt man solchen Standards, ist es leichter, Code von anderen zu verstehen und zu übernehmen.

Jens Grochtdreis


In allen Programmiersprachen gibt es Diskussionen darüber, wie man seine Applikation möglichst effizient und gut wartbar entwickelt. Die Diskussionsergebnisse fließen in Entwicklungsparadigmen wie MVC (Model View Controller) oder in Benennungsrichtlinien ein. Folgt man solchen Standards, ist es leichter, Code von anderen zu verstehen und zu übernehmen.

Auch in der Frontend-Entwicklung sind solche Standards entstanden. Allerdings werden sie kaum beachtet. Sie haben leider nie die normative Kraft entfaltet, die ihnen zustehen würde, denn schließlich arbeiten viele unterschiedliche Entwicklertypen mit Frontend-Code. Insbesondere diejenigen, die wenig Kenntnisse und noch weniger Motivation für guten Frontend-Code haben, würden von guten und verständlichen Standards profitieren.

Vor der hilfreichen Benennungsrichtlinie steht aber der richtige Blick auf den Frontend-Code. Dabei müssen wir immer bedenken, dass wir mit HTML und CSS Designs umsetzen, also primär eine Verbindung zur Optik haben, nicht aber zur Programmierung.

Eine Seite besteht aus vielen LEGO-Steinen

Eine Webseite setzt sich aus vielen unterschiedlichen Einzelteilen zusammen: Es gibt einen Header, meist einen Footer und einen mehr oder minder stark unterteilten Inhaltsbereich. Im Inhaltsbereich können sich eine Fotogalerie, Teaser, ein großer Fließtext und vieles andere mehr befinden. Alle diese Bestandteile können und sollten für sich selbst betrachtet werden.

Eine Webseite ist dann eine Zusammenstellung aus vielen Einzelteilen. Meist werden sie aus einem CMS gespeist. Die Analogie zu LEGO liegt auf der Hand. Auch bei LEGO werden Objekte aus unterschiedlich großen Einzelteilen zusammengesetzt.

Im Grunde entwickeln wir keine Seiten, sondern „Systeme“. Die Einzelteile dieser Systeme bezeichne ich als „Module“. Mittlerweile wird auch gerne der Begriff „Patterns“ benutzt. Die Module sind prinzipiell unabhängig voneinander, jedes ist ein eigenes kleines Universum. Gängige Module sind beispielsweise:

  • Navigationen

  • Linklisten in Seitenleisten oder im Footer

  • Teaserboxen – mit oder ohne Bild

  • Slider/Karussell

  • in einem Akkordeon organisierte Inhalte

  • in einem Tabinterface organisierte Inhalte

  • eine eingebettete Landkarte

grochtdreis_lego_1.tif_fmt1.jpgAbb. 1: Einzelne Module der Startseite von ZEIT ONLINE markiert

Abbildung 1 repräsentiert eine nicht mehr aktuelle Version von ZEIT.de. Sie zeigt die modulare Zusammensetzung der Seite. Mitte 2017 sieht die aktuelle Version von ZEIT ONLINE (www.zeit.de) aus wie in Abbildung 2.

grochtdreis_lego_2.tif_fmt1.jpgAbb. 2: ZEIT...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang