AJAX - Modularisierung, Einbindung von Resourcen, Performance

[Sympathisant]

Hai allerseits,

ich habe mal ein programmiertechnisches Anliegen.

Und zwar erstelle ich gerade eine Web-Anwendung, die sich aus einzelnen Modulen zusammensetzt. Das heisst, jedes Template entscheidet individuell, welche Module auf der Seite angezeigt werden sollen. Unter "Module" verstehe ich in diesem Kontext separate Darstellungs-Elemente, die sich eigenstaendig die Daten aus der Datenbank laden, eigene CSS- sowie JavaScript-Files besitzen und auch einbinden.

Beispiel: Eine Seite bindet in einem Container die letzten Forenbeitraege ein, in einem anderen die zuletzt aktiven Benutzer, und in einem weiteren die am haeufigsten eingegebenen Suchbegriffe etc. pp.

Damit das ganze vollstaendig modularisiert werden kann, habe ich mich dazu entschieden (wie bereits oben erwaehnt), dass jedes Modul eigene Java-Script-Funktionen und Stylesheets besitzt.
Denn ich moechte ungerne Logik, die eventuell gar nicht genutzt wird, per default in mein Haupttemplate einbinden (das gleiche gilt fuer Styleangaben).

Das heisst, bindet jetzt eine Seite zum Beispiel X Module ein, so habe ich auch X CSS-Includes und X Java-Script-Includes.
Folglich habe ich auf einer Seite zB 12 JS-includes, die an den entsprechenden Stellen im HTML-Code eingebunden werden.

Nun stellt sich mir die Frage hinsichtlich der Performance. So weit ich in Erfahrung bringen konnte, wird stets dazu geraten, zb alle Stylesheets in eine einzige Datei zu packen - um weniger Requests des Clients zu gewaehrleisten.
Aber an dieser Vorgehensweise stoert mich, dass
a) sie sich mit meiner Idee der Modularisierung beisst
b) unbenoetigter Code automatisch eingebunden wird, unabhengig davon, ob er ueberhaupt verwendet wird. Und im Falle von JQuery (je nach dem, welche Plugins ich nutze), kann es da schonmal zu einigen Dutzend KB Overhead fuehren.

Wie gehe ich hier nun am Besten vor? Was sind eure Erfahrungen diesbezueglich.
Eigentlich bin ich mit meinem aktuellen Framework recht zufrieden, es arbeitet so, wie ich es moechte. Lediglich hinsichtlich der Performance/Requests habe ich Bedenken.

Freue mich ueber Tipps oder Anregungen!

Besten Dank im Voraus.

MfG,
Sympatisant

[LX]

Jedes Modul eigenes JS/CSS? Damit hast Du den Nutzen des Browser-Cache und vom C in CSS ad absurdum geführt.

Wenn Du ein Framework wie bspw. jQuery hast, welches die von Dir genutzten Standardfälle gut abbildet, packe es für die Live-Nutzung (mod_compress ist Dein Freund) und erstelle ein zusätzliches JS für alle zusammenhängenden Seiten. Zu viele Einbindungen kosten mehr Performance als ein paar kb Download.

Für das CSS gilt dasselbe - Cascading bedeutet "aufeinander aufbauend", so dass alle Seiten auf dem gleichen CSS basieren können - wenn Du die Klassen und IDs sinnvoll einsetzt.

Gruß, LX

[Sympathisant]

Hai,

OK, schonmal Danke an euch Beide!
Dann waren meine Befuerchtungen mit den Requests doch berechtigt.

Jedoch:
Migriere ich die gesamte JavaScript-Logik der einzelnen Module in eine einzige JS-Datei, so kommt es ja logischerweise zu Fehlern. Denn alles, was im $(document).ready(function() [..] steht, und direkten Bezug auf Elemente eines Moduls hat, scheitert genau dann, wenn das Modul nicht eingebunden wurde. Das kann ich ja nicht umgehen. Oder uebersehe ich da gerade etwas?

Besten Dank.

MfG,
Sympatisant

[Gunther]

Hi,

Jedoch:
Migriere ich die gesamte JavaScript-Logik der einzelnen Module in eine einzige JS-Datei, so kommt es ja logischerweise zu Fehlern. Denn alles, was im $(document).ready(function() [..] steht, und direkten Bezug auf Elemente eines Moduls hat, scheitert genau dann, wenn das Modul nicht eingebunden wurde. Das kann ich ja nicht umgehen. Oder uebersehe ich da gerade etwas?

Du musst halt vorher prüfen, welche Module, bzw. ob das jeweilige Modul geladen wurde oder nicht. Das könntest du z.B. anhand einer Überprüfung ("existiert - existiert nicht") einer Element-ID (z.B.: 'Prefix_ModulName') machen.

Gruß Gunther

[Sympathisant]

Hai Gunther,

Du musst halt vorher prüfen, welche Module, bzw. ob das jeweilige Modul geladen wurde oder nicht. Das könntest du z.B. anhand einer Überprüfung ("existiert - existiert nicht") einer Element-ID (z.B.: 'Prefix_ModulName') machen.

Stimmt ;-)
Werde das mal ausprobieren.
Danke!

MfG,
Sympatisant

[Philipp Zentner]

Hallo.

Deine Vorgehensweise mag zwar für Übersicht sorgen und es klingt sehr schön "alles modularisiert" zu haben.

Allerdings musst du daran denken, wenn du 10 Module lädst, alle eine PHP Seite, eine CSS-Datei und eine JS-Datei besitzen, du 30 Requests an den Server schickst.
Seitenoptimierungstipp Nummer 1: Request-Anzahl reduzieren.

Den Sinn von CSS nutzt du auch nicht. Nutze CSS so das du so wenig Klassen und IDs wie möglich erstellen musst. Ausserdem speichert der Browser die CSS-Datei im Cache, von daher also nicht gerade sinnvoll 10 Stück zu nehmen.

Kommentiere den Code ordentlich und überlege evt. das MVC-Pattern zu nutzen.
Dort hast du auch alles schön getrennt, Datenbank, Logik, Ausgabe.

Grüße,

Phil