Css/jss nur laden wenn nötig

[staabm]

Wäre es möglich die ganzen css/js includes nur dann zu laden, wenn auch ein editor in der aktuellen seite enthalten ist?

Aktuell lädt man hier viel zeug und braucht es oft nicht....

Triggered by https://github.com/redaxo/redaxo/issues/1406

[joachimdoerr]

hm dafür bräuchte man ein hook bietet redaxo da was von haus aus?

[staabm]

Einen hook in welcher form..? Was willst du denn erkennen?

Meiner Meinung nach könnte man z.b. Via OUTPUT_FILTER und strpos anhand eines css selector machtings schauen ob die aktuelle seite einen editor enthält.

[staabm]

Alternativ könntest du ein mini javascript per default laden, dass erkennt ob ein editor in der seite enthalten ist und falls ja dann das eigentliche/vollständige js/css lädt

[joachimdoerr]

Es müsste eine registry geben ähnlich wie die EP registry. diese sollte man ein regex oder eine bestimmten css class key liefern können, fällt im backend html dann jeweils ein match wird das registreite css und js geladen. diese registry muss für jedes addon zur verfügung stehen. das in den einzelnen addon durch den outputfilter von hand zu bauen ist doch overhead ohne ende. das ist ja ein globales problem. und kein addon spezifisches.

[staabm]

Was du beschreibst klingt nach einer riesen Kanone für diesen kleinen Spatz ;-)

[skerbis]

Ich weiß nicht ob

// Ermitteln welche Backendseite aufgerufen ist:
if (rex::isBackend() && rex_be_controller::getCurrentPage() == 'addonkey/unterseite') { 

// Hier z.B. Assets einbinden

}

im PJAX Context funktionieren kann

[joachimdoerr]

würde das problem aber global beheben, und man hätte eine resource für alle addons, man muss ja sowieso das js und css via rex_view laden lassen https://github.com/FriendsOfREDAXO/cke5/blob/master/lib/Cke5/Provider/Cke5AssetsProvider.php#L27-L28 Ich schaumal, dass ich für cke5 das problem eigenständig löse, fände eine globale lösung aber durchaus sinnvoll und richtig.

[joachimdoerr]

@skerbis ja eine schwirige sache. man müsste eine erweiterte JS resource bauen die check ob instanzen bei pjax calls vorhanden sind und wenn benötigt entsprechend nachgeladen werden

[staabm]

Ich denke dass ist in 10 zeilen javascript lösbar

[joachimdoerr]

@staabm und dafür muss dann generell ein js geladen werden. in dem nicht zentrale falle dann auch pro addon -> das gibt dann wieder viele aufrufe bei vielen addons führt als eher zum Gegenteil von dem was ja vermeiden werden soll. ich finde auch hier wäre eine globale lösung gut welche auf eine setting zurück greifen könnte, so dass dann für alle addons ein script die arbeit macht

[aeberhard]

Ideal wäre ein EP bei rex_view::addCssFile und bei rex_view::addJsFile bei dem man dann den Content abfragen könnte ob z.B. eine Textarea mit der Klasse vorhanden ist. Frage ist halt in welcher Reihenfolge Redaxo hier arbeitet und ob an dieser Stelle der Content schon vorhanden ist. Würde auch den CodeMirror betreffen, und m.M. nach auch Markitup ... So würde ein "überflüssiges" Check/Nachladescript vermieden werden wenn keine Textarea/Marker vorhanden ist.

[aeberhard]

Falls das nicht möglich ist finde ich die OUTPUT_FILTER Variante aber auch nicht tragisch :)

[staabm]

Meiner Meinung nach sollte man dieses nachladen wenn nötig via javascript lösen, nicht via content inspection im php.

Initial ein minimales js ausliefern (ähnlich einem bootloader) und dann beim 1. init die eigentlich lib nachladen

[skerbis]

es wäre praktisch wenn diese js gesammelt werden würden

[aeberhard]

Ich finde auf jeden Fall eine Lösung am besten die nach Möglichkeit alle Addons nützen können, eine Best Practice sozusagen. Vielleicht sollte Redaxo ein Bootloader-Script generieren bei dem man sich dann einhängen kann z.B. per EP ``

Aber auf jeden Fall sollten die Scripte/CSS nur geladen werden wenn auch benötigt!

[staabm]

In meinen augen ist da relativ wenig gemeinsamkeiten zwischen den addons, daher würde ich da keinen allg. Mechanismus bauen.

[staabm]

Jquery Beispiel Für nen mini bootloader:

<script>
// on rex:ready...
If (cke-areas...)
  $.ajax({
    url: 'http://yoursite.com/script.js',
    dataType: 'script',
    cache: true, // or get new, fresh copy on every page load
    success: function() {
      // Chke-init ...
    }
  });
}
</script>

Ich sehe hier nix, was der core tun sollte

[joachimdoerr]

ich hab das mal hiermit getestet

$.ajax({
    url: '../assets/addons/cke5/vendor/ckeditor5-classic/ckeditor.js',
    dataType: 'script',
    cache: true, // or get new, fresh copy on every page load
    success: function() {
        ClassicEditor.create(document.querySelector('#editor'))
            .then(editor => {
                console.log('success');
            })
            .catch(error => {
                console.error(error);
            });
    }
});

die Performance ist gruselig es braucht Sekunden bis der editor initialisiert wird.

[joachimdoerr]

hiermit war es etwas schneller

var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("src", '../assets/addons/cke5/vendor/ckeditor5-classic/ckeditor.js');
document.getElementsByTagName("head")[0].appendChild(script);

ClassicEditor.create(document.querySelector('#editor'))
   .then(editor => {
       console.log('success');
   })
   .catch(error => {
       console.error(error);
   });

aber dennoch keine akzeptable Performance.

[joachimdoerr]

Ggf. könnte ich die profile in die cke5.js file schreiben, damit müsste dann keine extra profile.js geladen werden, somit wäre es schonmal 3 statt 4 files die CKE5 benötigt.

[staabm]

Kannst du dein versuch als PR abschicken damit man drüber schauen kann?

[staabm]

Ping

[joachimdoerr]

@staabm nach dem test hatte ich das nochmal verworfen den code gibt es schon lange nicht mehr. Gibt es mittlerweile eine Zielführende Lösung? Wer kann hier unterstützen?

[staabm]

weil ich es grad zufällig hier liegen hab... nachladen von javascript geht so: (in einem Browser der Promise kennt... ggf. muss man da polyfills laden für alte browser)

    function loadScript(src) {
        return new Promise(function (resolve, reject) {
            var s;
            s = document.createElement('script');
            s.src = src;
            s.onload = resolve;
            s.onerror = reject;
            document.head.appendChild(s);
        });
    }

    loadScript("pfad-zu-meiner-js-datei.js").then(function() {
      // diese function wird aufgerufen, wenn die js datei fertig geladen ist
    });

[aeberhard]

https://friendsofredaxo.github.io/tricks/snippets/ckeditor_im_frontend

Hier habe ich ein Beispiel CSS+JS im Frontend einzubinden ... nur wenn auch die Klasse cke5-editor vorhanden ist. Habe hier alle im Backend ausgegebenen CSS+JS-Files verwendet.

Also im Backend merke ich hier lokal den CKE durch flackern im Backend. Da er ja bei jeder Seite geladen wird ... egal ob eine Textarea da ist oder nicht.

[skerbis]

@aeberhard was meinst du mit flackern? Bei mir flackert nichts. Das laden bei Bedarf ist zwar nett, verzögert / verhindert aber auch den Aufbau vor allem wenn Editoren „Bei“ Bedarf z.B. per pjax, ajax geladen werden

[aeberhard]

Mit aktiviertem CKE ist ab und zu kurz alles weg ... bevor die Seite angezeigt wird. Flackern ist vielleicht der falsche Ausdruck. Beim Codemirror haben Markus und ich mal richtig viel Arbeit reingesteckt und das hat sich gelohnt. Das Backend wird halt meiner Meinung nach richtig zugemüllt mit CSS/JS der zum Teil nur an einer Stelle benötigt wird. Da macht der Core keine Ausnahme :-) Siehe metainfo, yform + ycom (Issues sind angelegt) Da hilft oft auch schon einfach eine Abfrage CSS+JS nur beim eigenen Addon auszugeben. Gibt auch ein Issue bei der Doku

[joachimdoerr]

@aeberhard hast du denn schon ein funktionierendes Prozedere für das nachladen? Überall da wo CSS und Data Attribut im für den CKE5 im HTML vorkommen müsste es gewährleistet sein, dass JS und css für den CKE geliefert wird. Also müsste man ganz am ende über den DOM laufen und schauen ob da was da ist.

Ich bin jetzt nicht dazugekommen mich darum zu kümmern und wäre froh, wenn sich da jemand beteiligen könnte.

[aeberhard]

Hallo Joachim @joachimdoerr. Beim Codemirror haben wir da auch eine Abfrage auf bestimmte Klassen drin. Und nur dann wird der Codemirror geladen. Das ganze über JavaScript im Backend. Hier wird dann CSS und JavaScript jeweils in einer Datei geladen (über PHP). Kann mich da gerne einmal dran versuchen wenn ich Zeit habe.

[joachimdoerr]

@aeberhard wäre super wenn Du da mal schauen könntest.

[joachimdoerr]

@aeberhard hattest Du nochmal zeit zu schauen? Ich wollte das Addon nochmal etwas weiter bringen und auch diesen Punk nochmal anschauen.

[alxndr-w]

m.E. ist es vollkommen akzeptabel, diese Ressourcen (wie auch bei anderen Addons) einmal zu Beginn zu laden und dann hat sie ohnehin der Browser-Cache.

Eher sähe ich das in REDAXO, zu managen, dass es Ressourcen gibt, die frühzeitig geladen werden müssen und andere, die auf Vorrat preloaded werden können.

Das hätte den Vorteil, dass nicht zu viele Ressourcen bei Login geladen werden müssen, die in der Struktur bspw. noch gar nicht gebraucht würden, aber bei ausreichender Internetverbindung bereits zum Seitenaufbau zur Verfügung stehen, wenn der cke5 gebraucht wird.

Alles andere erhöht nur die Komplexität, wenn das jetzt jedes Addon für sich lösen müsste und ist auch nicht übertragbar. In Zeiten von Glasfaser und HTTP/2 frage ich mich, ob es nicht dringlichere Issues gibt.

[skerbis]

Es ist auch nicht klar wo das AddOn zum Einsatz kommt.