Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Async navigation with a lightweight ES6 framework

234 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Async navigation with a lightweight ES6 framework

  1. 1. sezioni di pagina async con ES6 + D8 +
  2. 2. la “vera” storia di
  3. 3. INGREDIENTI - Drupal - Drupal.settings / drupalSettings - hook_menu/routing - hook_theme (7/8) - Sf YAML parser - ES6 + webpack + polyfill - jQuery
  4. 4. PER CUCINARE BENE…
  5. 5. PERCHÉ YAML? Fornisce, insieme ai template, un sistema abbastanza intuitivo di impaginazione dei contenuti
  6. 6. 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)
  7. 7. PERCHÉ ES6? * Rende il comportamento del codice più prevedibile rispetto alle versioni precedenti (es. scope delle var) * Moduli * Promises (per AJAX)
  8. 8. ES6: COSA ABBIAMO SFRUTTATO FINORA? * Syntactic sugar * Accenno di modularità * Classi
  9. 9. ES6: COSA SFRUTTEREMO IN FUTURO? * ES7 async * Generators * Promises (insomma, next-gen AJAX…)
  10. 10. COMPONENTI DEL SISTEMA * una rotta unica * template pagina * hook_theme * YAML >>> blocchi * GOAT-core * JS per clic su tab
  11. 11. 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
  12. 12. 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.
  13. 13. 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.
  14. 14. 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.
  15. 15. -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.
  16. 16. -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).
  17. 17. 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
  18. 18. 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
  19. 19. PROBLEMI E ANNOTAZIONI - D8 * Supportare le librerie JS "di terzi" è un po' più problematico (WIP) >>> attachment * Obsolescenza delle librerie fornite “stock” da D8
  20. 20. GRAZIE! Marcello Testi @pinolo marcello.testi@sparkfabrik.com Edoardo Dusi @edodusi edoardo.dusi@sparkfabrik.com

×