Async navigation with a lightweight ES6 framework
24
-
Upload
sparkfabrik -
Category
Technology
-
view
129 -
download
3
Transcript of Async navigation with a lightweight ES6 framework
sezioni di pagina async con ES6 + D8 +
la “vera” storia di
INGREDIENTI- Drupal- Drupal.settings / drupalSettings- hook_menu/routing- hook_theme (7/8)- Sf YAML parser- ES6 + webpack + polyfill- jQuery
PER CUCINARE BENE…
PERCHÉ YAML?
Fornisce, insieme ai template, un sistema abbastanza intuitivo di impaginazione dei contenuti
PERCHÉ ES6?
* Why not? transpiler >>> compatibilità
* Contiene una discreta dose di "syntactic sugar", per oggetti e tipi di dati di uso comune
* È più orientato a organizzare il codice a oggetti in modi "familiari" (classi vs. prototype)
PERCHÉ ES6?
* Rende il comportamento del codice più prevedibile rispetto alle versioni precedenti (es. scope delle var)
* Moduli
* Promises (per AJAX)
ES6: COSA ABBIAMO SFRUTTATO FINORA?
* Syntactic sugar * Accenno di modularità * Classi
ES6: COSA SFRUTTEREMO IN FUTURO?
* ES7 async * Generators * Promises (insomma, next-gen AJAX…)
COMPONENTI DEL SISTEMA
* una rotta unica * template pagina* hook_theme
* YAML >>> blocchi * GOAT-core* JS per clic su tab
ROUTINGUna sola rotta restituisce con JSON i contenuti di ogni blocco.
La rotta accetta un parametro che indica quale blocco recuperare. Per convenzione, il parametro identificativo coincide con il nome dell’elemento di hook_theme
THEMINGUn template per la pagina contenitore di destinazione delle sezioni. Contiene tutti i contenitori di markup che definiscono le sezioni.
Un elemento hook_theme per ogni blocco da implementare, indica quale template usare come contenitore per i blocchi.
CLASSIUn’interfaccia definisce quali metodi devono implementare i singoli blocchi.
Una factory provvede ad associare ogni identificativo di blocco (elemento hook_theme - vd. altra slide) con la relativa classe.
YAML + SETTINGSUn file YAML di definizione di sezioni, regioni, blocchi: viene elaborato dalla classe parser.
Una volta elaborata la configurazione, viene passata agli script tramite drupalSettings.
-COREUna libreria generica che si occupa di mostrare e nascondere i blocchi all’interno delle varie sezioni.
Interagisce con i drupalSettings.
Riceve i dati sulla sezione da mostrare da uno script che gestisce i click sulle tab.
-CORENella versione D7 il codice server-side si occupa anche di caricare dinamicamente le librerie eventualmente richieste dai contenuti caricati via AJAX, per il funzionamento di alcuni widget (es. i filtri esposti AJAX di Views).
Il futuro di* Gestione di URL che portano direttamente a un tab interno
* Gestione della cronologia di navigazione attraverso le tab
* AJAX “moderno” (promises, ES7…)
* Possibilità di configurare la necessità di refresh per sezioni o singoli blocchi
PROBLEMI E ANNOTAZIONI - ES6
* retrocompatibilità >>> transpiler + polyfill
* moduli: decidere se usare librerie fornite da Drupal(es. jQuery come modulo >>> DEPENDENCY)
* transpiler >>> layer aggiuntivo da gestire durantesviluppo e debug
PROBLEMI E ANNOTAZIONI - D8
* Supportare le librerie JS "di terzi" è un po' piùproblematico (WIP) >>> attachment
* Obsolescenza delle librerie fornite “stock” da D8
![[drupalday2017] - Async navigation with a lightweight ES6 framework](https://static.fdocumenti.com/doc/165x107/58d13ca01a28ab455d8b5079/drupalday2017-async-navigation-with-a-lightweight-es6-framework.jpg)
