Zum Hauptinhalt springen
TYPO3

Wie wird JavaScript im Backend von TYPO3 verwendet?

Author
Published

JavaScript ist überall. Es ist heute eine der wichtigsten Programmiersprachen und wächst ständig. Einige der früheren Versionen von JavaScript waren voller Bugs, was sich negativ auf den Ruf im IT-Markt auswirkte. Seitdem hat es einen langen Weg zurückgelegt.

 

JavaScript wird für Zwecke verwendet, die weit über die Pixelmanipulation hinausgehen.

 

JavaScript findet man in allen Schichten eines Softwaresystems, die mit einem Browser interagieren, z.B. Backend-Aufgaben, Webserver und Datenverarbeitung. Javascript interagiert auch mit HTML und CSS (beide Markup-Sprachen) und kann daher auch zum Hinzufügen von dynamischen, interaktiven Inhalten zu Webseiten verwendet werden.

 

Mit JavaScript lassen sich beliebige dynamische Funktionen und interaktive Features erstellen - sei es in einer Website, einem Videospiel oder in einer hochkomplexen und leistungsfähigen Software wie TYPO3 CMS.

Im Laufe der Jahre haben wir viel Erfahrung mit den vielen JavaScript-Frameworks gesammelt, und TYPO3 CMS hat mit dieser leistungsstarken Programmiersprache einen langen Weg zurückgelegt. Vanilla JS, jQuery script.aculo.us, Prototyp, Ext JS..... wir haben sie alle verwendet - und zwar nicht nacheinander, sondern auf einmal: von zufälligen Snippets im Kern von TYPO3 über eine Vielzahl von Frameworks bis hin zu AMD-Modulen, die im Backend von TYPO3 implementiert sind.

Werfen wir einen Blick in die Vergangenheit und dann weiter in die Zukunft.

TYPO3 & JavaScript: ein Blick in die Vergangenheit

JavaScript ist überall in TYPO3 zu finden. Abgesehen von den gelegentlichen Code-Snippets, die Sie alle kennen (und hassen), hat sich im Laufe der Zeit einiges an technischen Schulden im Code angesammelt.  Zu ihrer Zeit waren sie vielleicht große Teile der Software. Doch ihre Haltbarkeit war längst abgelaufen, und um es ganz deutlich zu sagen: Diese technische Schuld war eine Nervensäge. 

Die letzten Reste von script.aculo.us und Prototype wurden bei der Entwicklung von TYPO3 v7 endlich entfernt, was schon eine enorme Erleichterung war. Und der nächste Schritt war, ExtJS zu entfernen. Das war im Zuge der Entwicklung von TYPO3 v8 so gut wie abgeschlossen, und ist mit dem Ersetzen des Seitenbaums mittlerweile vollständig abgeschlossen.

TYPO3 heute: RequireJS

Große Anwendungen erfordern oft eine Reihe von JavaScript-Dateien, und die Handhabung kann schwierig und langsam werden. Modulbasierter Code wird verwendet, um große Anwendungen in kleinere Blöcke von überschaubarem Code zu zerlegen, die nur dann geladen werden, wenn sie benötigt werden.

Asynchrone Moduldefinition (AMD) ist ein Mechanismus zur Definition von Modulen und deren Abhängigkeiten. Es erlaubt Entwicklern, Code in kleinere Dateien zu kapseln, die auf Wunsch asynchron geladen werden.

RequireJS - ein JavaScript-Datei- und Modul-Loader - wird zur Verwaltung dieser Abhängigkeiten in JavaScript-Projekten verwendet. Es erlaubt Ihnen, Code-Bausteine zu definieren, die erst dann ausgeführt werden, wenn ihre Abhängigkeiten bestehen.

TYPO3 v7 - und höher - unterstützt AMD-Module mit RequireJS.

Das AMD-Format enthält eine Reihe von Verbesserungen, um Entwickler beim Schreiben von JavaScript zu unterstützen:

  • es verwaltet Abhängigkeiten selbstständig - es gibt keine Bedarf für eine bestimmte js-Datei.

  • es gibt weniger Chancen, die Datei irgendwo in Ihrem System aus den Augen zu verlieren.

  • AMD-Module werden nur bei Bedarf geladen, das bedeutet weniger Traffic und mehr Performance für Ihre Website.

Es ist einfach, RequireJS in Ihrer eigenen Erweiterung zu verwenden.

 

Um RequireJS überhaupt nutzen zu können, müssen einige Voraussetzungen erfüllt sein:

 

  • Jeder AMD muss einen Namensraum und einen Modulnamen haben.

  • Der Namensraum ist TYPO3/CMS/<EXTKEY>, wobei <EXTKEY> der Extension Key ist und in UpperCamelCase deklariert ist, z.B. ext:foo_bar = FooBar.Dieser Namensraum wird automatisch auf das Verzeichnis Resources/Public/JavaScript der Erweiterung abgebildet.

  • Man sollte nur ein Modul pro Datei schreiben (alles andere ist schlechte Praxis) und der Dateiname ist der Modulname + .js.

  • Beispiel: TYPO3/CMS/FooBar/MyMagicModule befindet sich in EXT:foo_bar/Resources/Public/JavaScript/MyMagicModule.js. 

Schauen Sie sich genauer unsere RequireJS Dokumentation an, um zu sehen, wie einfach es ist, ein eigenes Modul zu erstellen.

Verwenden Sie Legacy JavaScript mit RequireJS

 

Manchmal müssen Sie alten Code in einer AMD-getriebenen Umgebung wiederverwenden. Glücklicherweise können Sie die RequireJS-Konfiguration erweitern.

 

GeneralUtility::makeInstance(PageRenderer::class)
    ->addRequireJsConfiguration([
        'paths' => [
            'custom-lib' => '/typo3conf/ext/my_ext/foo.lib.js',
        ],
        'shim' => [
            'custom-lib' => ['jquery'],
        ],
    ]);

 

Hier definieren Sie Ihre eigene Lib in Ihrer Erweiterung als AMD-Modul'custom-lib', sowie die Abhängigkeit für jQuery. Jetzt wird jedes Modul, das Ihre'custom lib' benötigt, sich auch um das Laden von jQuery kümmern.

 

Antworten auf häufig gestellte technische Fragen

 

Auf unserem TYPO3 YouTube-Kanal finden Sie Antworten auf weitere häufig gestellte technische Fragen, Anleitungsclips und allerlei hilfreiche Videos. Kommt und schließt euch uns an. Wenn Sie dies nützlich finden, teilen Sie bitte den Link in Ihrem Netzwerk.

 

 

Danke fürs Lesen! Wenn Ihnen dieser oder einer meiner früheren Beiträge auf dieser Website gefallen hat, hinterlassen Sie einen Kommentar oder teilen Sie diesen Beitrag mit einem Freund!