Fundamentals of ES6 as frontend development tool; how to use it to implement custom async tabbed navigation

2. sezioni di pagina async
con ES6 + D8 +

3. la “vera” storia di

6. INGREDIENTI
- Drupal
- Drupal.settings /
drupalSettings
- hook_menu/routing
- hook_theme (7/8)
- Sf YAML parser
- ES6 + webpack +
polyfill
- jQuery

7. PER CUCINARE BENE…

8. PERCHÉ YAML?
Fornisce, insieme ai template, un sistema abbastanza
intuitivo di impaginazione dei contenuti

9. 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)

10. PERCHÉ ES6?
* Rende il comportamento del codice più prevedibile
rispetto alle versioni precedenti (es. scope delle var)
* Moduli
* Promises (per AJAX)

11. ES6: COSA ABBIAMO SFRUTTATO FINORA?
* Syntactic sugar
* Accenno di modularità
* Classi

12. ES6: COSA SFRUTTEREMO IN FUTURO?
* ES7 async
* Generators
* Promises
(insomma, next-gen AJAX…)

13. COMPONENTI DEL SISTEMA
* una rotta unica
* template pagina
* hook_theme
* YAML >>> blocchi
* GOAT-core
* JS per clic su tab

14. ROUTING
Una 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

15. THEMING
Un 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.

16. CLASSI
Un’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.

17. YAML + SETTINGS
Un file YAML di
definizione di sezioni,
regioni, blocchi: viene
elaborato dalla classe
parser.
Una volta elaborata la
configurazione, viene
passata agli script
tramite drupalSettings.

18. -CORE
Una 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.

19. -CORE
Nella 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).

20. 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

21. 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 durante
sviluppo e debug

22. PROBLEMI E ANNOTAZIONI - D8
* Supportare le librerie JS "di terzi" è un po' più
problematico (WIP) >>> attachment
* Obsolescenza delle librerie fornite “stock” da D8

23. GRAZIE!
Marcello Testi
@pinolo
marcello.testi@sparkfabrik.com
Edoardo Dusi
@edodusi
edoardo.dusi@sparkfabrik.com