Wir arbeiten tatsächlich mit dem Symfony 2 PHP Framework und Twig als Template Engine. Wir denken, dass wir die Code-Duplizierung für die View-Ebene vermeiden und von der progressiven Erweiterung (p-jax) profitieren könnten.Progressive Verbesserung mit YUI3 (Y.App) und Symfony2
Aktueller Status:
PJAX behandelt nicht teilweise Aktualisierungen des Seitenlayouts auf der Route basiert. Unser Ziel ist es, ein System zu implementieren, bei dem nur einige Seitenfragmente (HTML-Knoten) aktualisiert werden, wenn die Navigation von Y.App (routing) ausgeführt wird.
In dieser Hinsicht haben wir eine POC bei umzusetzen: kann https://github.com/benjamindulau/PocSfYui/ Javascript hier: https://github.com/benjamindulau/PocSfYui/tree/master/src/Acme/PocBundle/Resources/public/js Und Y.App Anfangskonfiguration gibt: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L66
Die Idee ist, dass, wenn wir die Seite zum ersten Mal laden, alles wird serverseitig behandelt (progressive Erweiterung), was bedeutet, dass die gesamte Seite und die Seitenfragmente vom Server gerendert werden. Für die nächsten Anfragen, die von Y.App durchgeführt werden soll, definiert wir ein JSON-Format wie folgt aus (/ Fotos Pfad Antwort):
{
"title": "MyAwesomeWebsite - Photos", // page <title>,
"fragments": {
"sidebar": "<h2>Sidebar Menu<\/h2><!-- etc.... -->", // ..... maybe an updated menu for active page
"main": "<h2>Photos<\/h2><div id=\"photo-list-container\"><ul id=\"photo-list\"><!-- photo items.... --></ul></div>", // Pre-rendered photo list
},
"templates": {
"photo_item_tpl": "<li data-id=\"{{index}}\"><img src=\"{{url}}\" alt=\"{{title}}\" \/><\/li>" // template used later by Y.App for adding new photos
}
}
, die im Grunde eine „JSONified“ Version der aktuellen Ansicht Inhalt ist (Route).
Auf Server-Seite stellen wir fest, dass die Anfrage von Y.App kam und anstatt unsere Twig-Vorlage zu rendern, extrahieren wir "Blöcke" daraus und konstruieren diese JSON-Antwort, die Seitenfragmente enthält, die aktualisiert werden müssen + Lenkervorlagen Der Client benötigt für diese bestimmte Seite.
Auf Client-Seite (Y.App):
- wir eine Basis PageCompositeView definiert, die die gesamte Seitenlayout darstellt, und dann eine Page2colLeftView, die sich von dieser erben und instanciates einen eigenen Teilansichten: SidebarView, Mainview , HeaderView, ....
- haben wir ein IO-Modul geschrieben, das unsere PJAX-Like-Anfragen formt. Wir verwenden es anstelle von „Loadcontent“ (siehe: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L93)
- beim ersten Laden wir SHOWVIEW- anrufen und versuchen, „Re-connect“ auf unserer Seite Unter Blick auf ihre jeweiligen Behälter (siehe: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/public/js/views/page.js#L27)
- bei der Navigation in Seiten, Y.App weiß über Seiten Struktur.
Sagen wir direkt die „/ Fotos“ Pfad in unserem Browser laden: 1. Der Server macht die ganze Seite mit seinem einer Foto-Liste 2. Der YUI App seine PageCompositeView erstellt und verbindet jede Teilansicht container 3. Die YUI-App weiß, dass die Ansicht "MainView" (die dem Hauptinhalt entspricht) eine "PhotoListView" -Unteransicht enthalten sollte, die an eine "PhotoModelList" -Modellliste gebunden ist. Ein Rückruf für den Pfad "/ photos" erstellt die Instanz "PhotoView" und verbindet sie erneut mit ihrem Container (der vom Server gerendert wird).
2 und 3 (speziell 3) werden manuell durchgeführt.
Der POC funktioniert tatsächlich.
Aber bevor wir weiter gehen, würden wir uns freuen, Ihre Ratschläge zu erhalten.
Als erstes zuerst, was denkst du über dieses POC?
Wir sehen Profis & Nachteile mit diesem Ansatz.
Unser Hauptanliegen ist es, wie wir zwicken Y.App zu erreichen, was wir wollen: - Eine einzelne zusammengesetzte Ansicht - Bei der ersten Last, die Modelle durch das Lesen der vorhandenen DOM rehydratisiert werden (dh: wenn Fotoliste wird vom Server gerendert) - Je mehr wir uns vorwärts bewegen, desto mehr denken wir, dass wir etwas an Y.App vermissen und dass wir es falsch gemacht haben ;-)
Aber die positive Seite über all das ist, dass wir ohne viel Arbeit eine komplette asynchrone Website erstellen könnten.
Unser Hauptziel ist es, alles durch die Bereitstellung einer "fast vollständigen" generischen Lösung aufrecht zu erhalten.
Vielleicht die wichtigste Frage, die von dieser Nachricht auftaucht wäre:
„Sind wir Y.App den richtigen Weg mit?“ ;-)
Also, was denkst du?
Danke, Cya