erdfisch Blog

D8 Roundup: JavaScript & CSS (KW 4 2015)

Body: 

"Fast by default"

Seit jeher hat Drupal die Möglichkeit JavaScript und CSS zu aggregieren, also alle mehrere Quelldateien in eine Datei zusammenzufügen um die Anzahl der HTTP-Anfragen, die der Client tätigen muss zu reduzieren. Das ist eine einfache Möglichkeit die Frontend-Performance einer Drupal-Seite erheblich zu steigern. Beim Entwickeln einer Webseite - speziell eines Themes - ist diese Option eher lästig, da Änderungen in der Quelldatei keine direkten Effekt auf der Website haben. Daher war die Option bis hin zu Drupal 7 auch immer standardmäßig deaktiviert. Das hat leider dazu geführt, dass viele Webseiten - auch große, namhafte Drupal-Projekte - vergessen haben vor der Live-Schaltung die Aggregierung anzuschalten. So hat man sich für Drupal 8 entschieden, dass Performance, wenn es um die Standardwerte geht, die Entwicklerfreundlichkeit übertrumpft. Auf ein schnelleres Internet! ;-)

Weniger ist mehr

In ähnlicher Manier hat man evaluiert, welches JavaScript überhaupt beim Client ankommt und ob das überhaupt so notwendig ist. Für vieles, was in Drupal 7 noch mit JavaScript gelöst wurde, kann man sich mittlerweile mit HTML5 und CSS3 helfen. So wurden in Drupal 7 für Draggable Tables noch aufwendig in JavaScript berechnet welche Reihen "gerade" und "ungerade" sind, um ein Zebrastreifen-Styling anzuwenden. In Drupal 8 hat man sich der Zebrastreifen entledigt und färbt stattdessen die jeweils aktive Reihe mit :hover ein. Sieht schick aus und benötigt kein JavaScript. Auch die in Drupal berüchtigten Collapsible Fieldsets bringt HTML5 nun in Form des <details>-Elements mit. Firefox und Internet Explorer benötigen zwar dafür noch ein JavaScript-Fallback, aber gerade auf Mobilgeräten kann man sich das JavaScript schon sparen.

In Drupal 7 fügen einige Module auf jeder Seite JavaScript oder CSS hinzu, obwohl es nur auf bestimmten Seiten benötigt wird. Auch wurden ein paar grundlegende Drupal-JavaScript-APIs sowie jQuery grundsätzlich immer geladen, damit sie Entwicklern zur Hand stehen. Dem wurde nun der Gar aus gemacht. Mitels #attached können Assets schon in Drupal 7 immer nur genau dann hinzugefügt, wenn sie auch benötigt werden. In Drupal 8 ist dies nun die einzige Möglichkeit Assets zu laden: Weder in der .info- (bzw. .info.yml)-Datei können JavaScript- oder CSS-Dateien referenziert werden, um sie immer zu laden, noch drupal_add_js()/drupal_add_css() gibt es noch! Und jede Abhängigkeit von eigenen Skripten - inklusive jQuery - muss explizit angegeben werden. Daher werden Assets jetzt auch nicht mehr direkt sondenr in Form von Libraries geladen. Eine Library ist eine Sammlung von JavaScript- und CSS-Dateien, die zusammen verwendet werden, zusammen mit deren Abhängigkeiten und etwas Meta-Informationen. Tatsächlich bringt Drupal 8 schon einige Skripte mit, die nicht mehr von jQuery abhängen, sodass man sich das Laden dieser Datei besonders im Frontend-Bereich schonmal sparen kann.

"Progressive enhancement"

Während der Entwicklung von Drupal 8 ist man mehrmals an den Punkt gekommen, an dem das Hinzufügen von Frontend-Features dem Bestreben nach guter clientseitiger Performance entgegenwirken. Das Inline-Editing ist ein solches Beispiel. Dabei wird ein komplettes JavaScript-MVC-System instanziiert um den Zustand diverser Felder zu verwalten. Um den initialen Ladevorgang der Seite nicht damit zu belasten, wird dies in einem AJAX-Request gemacht, der abgefeuert wird sobald die Seite geladen ist. Dasselbe Ziel verfolgt eine Initiative, die JavaScript standardmäßig im Footer, also nach dem restlichen Seiteninhalt, laden möchte. Auch hierbei ist der Vorteil, dass die Seite erst einmal schneller lädt, auch wenn dann JavaScript Goodies noch einen Moment brauchen.

Kommentare

Comments