In realtà lavoriamo con il framework PHP di Symfony 2 e Twig come motore di template. Pensiamo che potremmo evitare la duplicazione del codice per il livello View e trarre vantaggio dal miglioramento progressivo (p-jax).Miglioramento progressivo con YUI3 (Y.App) e Symfony2
Stato attuale:
PJAX non gestisce gli aggiornamenti parziali del layout di pagina basato sul percorso. Il nostro obiettivo è implementare un sistema in cui solo alcuni "frammenti" di pagine (nodi HTML) verrebbero aggiornati quando la navigazione viene gestita da Y.App (routing).
A questo proposito abbiamo iniziato ad implementare un POC a: https://github.com/benjamindulau/PocSfYui/ Javascript può essere trovato qui: https://github.com/benjamindulau/PocSfYui/tree/master/src/Acme/PocBundle/Resources/public/js E Y.App configurazione iniziale c'è: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L66
L'idea è che quando abbiamo prima carica la pagina, tutto viene gestito lato server (miglioramento progressivo), il che significa che l'intera pagina e i frammenti di pagina sono resi dal server. Per le prossime richieste, che dovrebbero essere eseguite da Y.App, abbiamo definito un formato JSON (come la risposta percorso/foto) seguenti:
{
"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
}
}
che è fondamentalmente una versione "JSONified" del contenuto vista corrente (itinerario).
Sul lato server, rileviamo che la richiesta proviene da Y.App e invece di rendere il nostro modello Twig, estraiamo "blocchi" da esso e costruiamo questa risposta JSON contenente frammenti di pagina che devono essere aggiornati + modelli di manubri che il cliente ha bisogno di questa pagina specifica.
Sul lato client (Y.App):
- abbiamo definito un PageCompositeView di base che rappresenta l'intero layout di pagina, e poi una Page2colLeftView che ereditano da questo e instanciates i propri sub-viste: SidebarView, MainView , HeaderView, ....
- abbiamo scritto un modulo IO che forgia le nostre richieste PJAX-Like. L'usiamo invece di "LoadContent" (vedi: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L93)
- il primo carico che chiamiamo ShowView e cerchiamo di "ricollegare" i nostri sub-pagine viste ai rispettivi contenitori (vedi: https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/public/js/views/page.js#L27)
- durante la navigazione in pagine, Y.App conosce la struttura delle pagine.
Dire caricate direttamente le "/ foto" percorso nel nostro browser: 1. Il server rende l'intera pagina che contiene un elenco fotografico 2. Il YUI App crea i suoi PageCompositeView e si riconnette ogni sotto-vista della sua container 3. L'app YUI sa che la vista "Vista principale" (che corrisponde al contenuto principale) deve contenere una vista secondaria "PhotoListView" associata a un elenco di modelli "PhotoModelList". Quindi una richiamata sul percorso "/ foto" crea l'istanza "PhotoView" e la ricollega al suo contenitore (reso dal server).
2 e 3 (in particolare 3) vengono eseguiti manualmente.
Il POC funziona effettivamente.
Ma prima di andare avanti ci piacerebbe avere i vostri consigli.
Per prima cosa, cosa ne pensi di questo POC?
Veramente vediamo i pro & con questo approccio.
La nostra principale preoccupazione è di circa il modo in cui modifichiamo Y.App per ottenere ciò che vogliamo: - Una sola vista composita - Sul primo carico, i modelli sono reidratati leggendo il DOM esistente (vale a dire: quando la lista foto è reso dal server) - Più andiamo avanti, più pensiamo che ci manchi qualcosa su Y.App e che abbiamo preso il modo sbagliato ;-)
Ma il lato positivo di tutto questo è che potremmo costruire un sito web completo asincrono senza tanto lavoro.
Il nostro obiettivo principale è quello di mantenere tutto manutenibile fornendo una soluzione generica "quasi completa".
Forse la questione principale che emerge da quel messaggio sarebbe:
"stiamo usando Y.App la strada giusta?" ;-)
Quindi, cosa ne pensi?
Grazie, Cya