[drupalday2017] - Async navigation with a lightweight ES6 framework
0 likes229 views
Il documento discute l'integrazione delle sezioni di pagina in Drupal utilizzando ES6 e altri strumenti come YAML e Webpack, evidenziando i vantaggi della programmazione orientata agli oggetti e delle promesse per una gestione più fluida dei contenuti. Vengono esplorati sia i benefici attuali delle funzionalità di ES6 sia le potenzialità future, incluse le promesse di ES7 e la gestione delle interazioni utente tramite AJAX. Infine, si accennano i problemi relativi alla compatibilità delle librerie e alla gestione delle dipendenze in Drupal.
![[drupalday2017] - Async navigation with a lightweight ES6 framework](https://image.slidesharecdn.com/edoardodusiemarcellotestigoat-talkdd2017-170306113808-170315152319/85/drupalday2017-Async-navigation-with-a-lightweight-ES6-framework-1-320.jpg)
![[drupalday2017] - Async navigation with a lightweight ES6 framework](https://image.slidesharecdn.com/edoardodusiemarcellotestigoat-talkdd2017-170306113808-170315152319/85/drupalday2017-Async-navigation-with-a-lightweight-ES6-framework-4-320.jpg)
![[drupalday2017] - Async navigation with a lightweight ES6 framework](https://image.slidesharecdn.com/edoardodusiemarcellotestigoat-talkdd2017-170306113808-170315152319/85/drupalday2017-Async-navigation-with-a-lightweight-ES6-framework-5-320.jpg)
![[drupalday2017] - Async navigation with a lightweight ES6 framework](https://image.slidesharecdn.com/edoardodusiemarcellotestigoat-talkdd2017-170306113808-170315152319/85/drupalday2017-Async-navigation-with-a-lightweight-ES6-framework-24-320.jpg)
[drupalday2017] - Async navigation with a lightweight ES6 framework
- 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
- 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