Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Async navigation with a lightweight ES6 framework

228 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×