WebWissen: Frontend Frameworks – Fluch oder Segen?

Heute erkläre ich euch, was Frontend Frameworks überhaupt sind und was für einen Nutzen diese haben. Ich erläutere euch kurz die Vor- und Nachteile und erkläre euch, wann es Sinn macht ein Frontend Framework einzusetzen und wann nicht.

Was ist das überhaupt, ein „Framework?“?

Framework würde ich am ehesten mit Baukasten übersetzen. Denn es beinhaltet standardisierte Elemente, die mir die Arbeit bei der Umsetzung eines Webprojekts sehr erleichtern können. Dazu zählt meist ein 12-spaltiges Grid (engl. für Raster), einheitlich gestaltete Elemente wie Buttons, Formulare und verschiedene Animationen wie zum Beispiel das Ausklappen der Navigation bei mobilen Geräten. Wenn wir schon beim Thema mobil sind: das Grid hilft uns direkt ohne großes Styling festzulegen, wie die einzelnen Spalten auf verschiedenen Bildschirmgrößen sich verhalten sollen. Hier ein kleines Beispiel anhand des wohl bekanntesten Frontend Frameworks Bootstrap:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-md-6">
      Inhalt für Spalte 1
    </div>

    <div class="col-xs-12 col-md-6">
      Inhalt für Spalte 2
    </div>

  </div>

</div>

Hier seht ihr den grundsätzlichen Aufbau eines Grids. Das äußerste Element ist der container. Danach folgt die row (engl. für Zeile) und danach unsere beiden Spalten mit den Klassen col-xs-12 und col-md-6 Klassen (col = column, engl. für Spalte). Aber was bedeutet denn das genau? Bootstrap legt fest, ab welcher Bildschirmbreite die Spalten ihre Breite ändern sollen. Dazu gibt es vier definierte Größen:

$screen-xs-min:     480px; // Extra small screen / phone
$screen-sm-min:     768px; // Small screen / tablet
$screen-md-min:     992px; // Medium screen / desktop
$screen-lg-min:     1200px; // Large screen / wide desktop

Ab diesen Bildschirmbreiten verändern die Spalten ihre Breite. In unserem Beispiel wären das für Smartphones und Tablets 12 Spalten, was einer Breite von 100% entspricht und ab einer Bildschirmbreite von 992px wären es jeweils 6 Spalten, was einer Breite von 50% entspricht. Falls ihr euch fragt warum überhaupt 12 Spalten? Ganz einfach: 12 ergibt die meisten gleichmäßigen Kombinationen an Spaltenlayouts (2, 3, 4, 6 und 12 Spalten). Das hilft uns enorm unsere Website responsive zu gestalten. Die Bildschirmbreiten so wie viele weitere Variablen des Frameworks sind selbstverständlich änderbar und können nach eigenen Wünschen und Bedürfnissen angepasst werden.

Aber wozu brauche ich das?

Mit diesen vordefinierten CSS-Klassen kann ich einfach und schnell ein gutes Ergebnis für alle Geräte erzielen. Auch das Erstellen einer mobilen Navigation, die sich beim Knopfdruck auf einen Button ausklappt, kann dank vorgefertigtem Gerüst aus HTML, CSS und JavaScript in wenigen Zeilen erstellt werden ohne das Rad neu erfinden zu müssen. Denn das ist der springende Punkt: das Framework versucht einem Arbeit abzunehmen, die man ohnehin machen muss. Deshalb gibt es diese vordefinierten Standards für verschiedene Elemente.

Open Source

Ein weiterer Pluspunkt ist, dass daran ehrenamtlich viele Webdeveloper stetig weiterentwickeln und das Framework somit stets weiter verbessert wird. Die meisten davon sind Open Source Projekte wie Bootstrap auf GitHub wo man die Entwicklung verfolgen und sogar daran mitwirken kann, wenn man das möchte. Es ist somit ein Leichtes, stets die aktuelle Version des Frameworks zu benutzen und davon zu profitieren.

Der Nachteil daran ist allerdings, dass Frameworks mit der Zeit immer umfangreicher und aufgeblähter werden, da wirklich versucht wird, jedes Problem abzudecken. Darunter leidet dann natürlich die Performance, wenn große Datenmengen geladen werden müssen.

Einheitsbrei

Ein weiterer Nachteil ist natürlich, wenn man die Standardeinstellungen des Frameworks benutzt und nicht viel daran ändert und nur darauf aufbaut, sieht am Ende des Tages meine Website zwar gut aus, jedoch wie jede andere auch. Um dem entgegen zu wirken muss man einige Anpassungen vornehmen, welche viel Zeit in Anspruch nehmen können.

Dazu ist der Einsatz von Frameworks besonders bei Einsteigern beliebt. Jedoch muss ich hier dazu sagen, dass leider der Lerneffekt bis zu einem Gewissen Maß ausbleibt, da die Probleme schon vom Framework gelöst wurden und ich damit überhaupt gar nicht erst konfrontiert werde um eigene Lösungsansätze auszuprobieren.

Fazit

Daher mein Fazit: wenn es schnell gehen muss und das Design erst einmal zweitrangig und die Funktionalität erstrangig ist (z.B. bei Dashboards) kann man auf jeden Fall Frontend Frameworks einsetzen. Wenn das Design wichtig ist und man genügend am Framework verändert und nur das verwendet, was man wirklich braucht, kann ich damit auch sehr gut leben. Aber ich bin trotzdem der Meinung, dass nichts mehr Spaß macht als eine Eigenentwicklung.

Du siehst das anders? Schreib uns dazu gerne einen Kommentar.

Headerbild von flickr

Alle Beiträge von Timo

Unsere meistgelesenen Beiträge

Zwei Jahre Chromebook: Ein Erfahrungsbericht

Google Chromebook
|
Gute 25 Jahre PC-Nutzung - von Anfang an mit Windows. Dann raucht im wahrsten Sinne des Wortes mein teures und gar nicht so altes Lenovo-Notebook ab. Und ich bestelle mir einfach ein Chromebook und bin schneller weg aus der Windows-Welt, als ich es für möglich gehalten hätte. Zwei Jahre ist das nun her - und ich habe zwischendurch immer wieder über meine Erfahrungen mit dem Chromebook berichtet.