Async navigation with a lightweight ES6 framework
0 likes488 views
Fundamentals of ES6 as frontend development tool; how to use it to implement custom async tabbed navigation
Ad
More Related Content
Viewers also liked (10)
Similar to Async navigation with a lightweight ES6 framework (20)
Ad
More from sparkfabrik (20)
Ad
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