- App
- WoltLab Suite Core
Hallo zusammen,
ich hatte vor einigen Tagen die Idee aus dem WSC via Pugin eine SinglePageApplication zu bauen. Heute haben LucaDev und ich uns dann dran gesetzt und versucht, dieses Plugin zu schreiben.
Am Ende kam folgendes Resultat raus (JavaScript-Datei, die im Browser eingebunden wird):
var spa = function() {
$('body *[href]').each(function() {
$(this).attr('spa', $(this).attr('href'));
$(this).attr('href', '#');
$(this).click(function(e) {
$( "#pageContainer" ).load( $(this).attr('spa') + " div#pageContainer>*", function() {
spa();
} );
e.preventDefault();
return false;
})
});
};
$(window).load(function() {
spa();
});Zum laden der Seiten reicht das soweit, allerdings gibt es verschiedene Probleme aufgrund der Umsetzung des WSC:
- leere Foren (z.B.) können nicht angezeigt werden, da diese den HTTP Status Code 404 zurückgeben (Unterstützt jQuerys load-Funktion nicht)
- Einige Funktionen sind eingeschränkt *
- Formulare sind nicht mit dem Plugin kompatibel, da diese den Input-Type "submit" in Verbindung mit einer entsprechenden Aktion des Formulars und nicht via einen Link mit dem Attribut href abgesendet werden
Zu 2.: Wir mussten feststellen, dass mit unserer Umsetzung einige Funktionen eingeschränkt sind wie z.B. Dropdowns, die Profilnavigation(Pinnwand, Über Mich, ...) oder auch die Optionen zum Schreiben von Beiträgen (Smileys, Dateianhänge, Einstellungen).
Somit schauten wir nach, weshalb das nicht geht und der Grund ist mit größerer Wahrscheinlichkeit die WSC.Combined.min.js, die im head in die Seite eingebunden wird (Allerdings kann es auch jede andere JavaScript-Datei im body sein).
Der Vorteil einer Single Page Application (SPA) ist es, dass die Seite nicht komplett neu geladen werden muss um den Inhalt dieser zu aktualisieren. Bei unserem Beispiel wird z.B. nicht der head-Bereich neugeladen oder auch die gesamten Scripts am Ende des body nicht, welche die Ladezeit einer Seite ins unermessliche laufen lassen (können). So schafft die SPA dabei Abhilfe und verringert einerseits die Ladezeit der Seite (Da nur der HTML-Teil neugeladen wird und nicht noch alle css- und js-Dateien) und spart somit auch gleichzeitig noch weiter Traffic ein. Das ist allerdings so nicht direkt möglich, da wir das gesamte Dokument anscheinend neu laden müssten um alle verfügbaren Funktionen nutzen zu können.
Leider mussten wir aufgrund verschiedener Tests feststellen, dass wir es mit dem Plugin nicht schaffen können/werden den Core so zu verändern, dass man die Seite später als SPA betrachten kann. Daher war unsere Idee, dass wir das ganze hier vorschlagen auf Hoffnung, dass es hinzugefügt wird.
Uns ist durchaus klar, dass für ein solches Vorhaben das Frontend fast grundlegend verändert werden muss, allerdings für eine umso bessere Performance.
Wir werden dieses Plugin nicht weiter schreiben, da wir nicht das halbe WSC dafür umschreiben wollen, bzw. die Möglichkeiten um dies als Plugin zu realisieren zu sehr begrenzt sind.
Ich habe den Code oben noch dazugepackt, da ihr diesen ggf. nutzen könntet um das Vorhaben zu realisieren, sofern der Vorschlag euch überzeugt hat. Es gibt allerdings bestimmt auch wesentlich bessere Umsetzungsmöglichkeiten. Das ändern der URL könnte man außerdem mit der HTML 5 Histrory-API umsetzen.
Es würde uns freuen, wenn eine solche Funktion hinzugefügt wird.
Mit freundlichen Grüßen
ilou & LucaDev
