© 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.

Jens Grochtdreis


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:

NavigationenLinklisten in Seitenleisten oder im FooterTeaserboxen – mit oder ohne BildSlider/Karussellin einem Akkordeon organisierte Inhaltein einem Tabinterface organisierte Inhalteeine eingebettete Landkarte

Abb. 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.

Abb. 2: ZEIT ONLINE Mitte 2017 – einzelne Module markiert

Dave Rupert hat in seinem Screenshot des Microsoft-Designs die gleichartigen Module markiert (Abb. 3). Dabei sollte auffallen, dass das Modul „Linkliste“ durchaus unterschiedlich aussieht. Optische Abweichungen sind also kein Grund, ein neues Modul zu erschaffen. Man sorgt stattdessen dafür, dass ein Standard erstellt wird. ...

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


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:

NavigationenLinklisten in Seitenleisten oder im FooterTeaserboxen – mit oder ohne BildSlider/Karussellin einem Akkordeon organisierte Inhaltein einem Tabinterface organisierte Inhalteeine eingebettete Landkarte

Abb. 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.

Abb. 2: ZEIT ONLINE Mitte 2017 – einzelne Module markiert

Dave Rupert hat in seinem Screenshot des Microsoft-Designs die gleichartigen Module markiert (Abb. 3). Dabei sollte auffallen, dass das Modul „Linkliste“ durchaus unterschiedlich aussieht. Optische Abweichungen sind also kein Grund, ein neues Modul zu erschaffen. Man sorgt stattdessen dafür, dass ein Standard erstellt wird. ...

Neugierig geworden?


   
Loading...

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