ݺߣ

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

Recommended

Async navigation with a lightweight ES6 framework
Async navigation with a lightweight ES6 framework
sparkfabrik
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
DrupalDay
High Performance Web Apps con PHP e Symfony 2
High Performance Web Apps con PHP e Symfony 2
Giorgio Cefaro
Seminario team working - 21-1-2015
Seminario team working - 21-1-2015
Alessandro Loffredo
Logging
Logging
Paolo Predonzani
Netbeans e Xdebug per debugging e profiling di applicazioni PHP
Netbeans e Xdebug per debugging e profiling di applicazioni PHP
Giorgio Cefaro
Introduzione DevOps con Ansible
Introduzione DevOps con Ansible
Matteo Magni
Modern web development with python and Web2py
Modern web development with python and Web2py
Davide Marzioni
Drupal 8 - dal download del core alla pubblicazione in produzione
Drupal 8 - dal download del core alla pubblicazione in produzione
sparkfabrik
Sviluppare applicazioni android
Sviluppare applicazioni android
Paolo Montalto
Sviluppare un plugin WordPress da zero - WordCamp Bologna 2018
Sviluppare un plugin WordPress da zero - WordCamp Bologna 2018
Marco Chiesi
Building Scala with Bazel - Scala Days
Building Scala with Bazel - Scala Days
Natan Silnitsky
Linux Embedded per l'automazione
Linux Embedded per l'automazione
Daniele Costarella
Laravel 7 REST API
Laravel 7 REST API
Beniamino Ferrari
[drupalday2017] - Devel - D8 release party
[drupalday2017] - Devel - D8 release party
DrupalDay
[drupalday2017] - Drupal 4 Stakeholders
[drupalday2017] - Drupal 4 Stakeholders
DrupalDay
[drupalday2017 - KEYNOTE] - Saving the world one Open Source project at a time
[drupalday2017 - KEYNOTE] - Saving the world one Open Source project at a time
DrupalDay
[drupalday2017] - DRUPAL per la PA: il modello della Trasparenza di Sapienza
[drupalday2017] - DRUPAL per la PA: il modello della Trasparenza di Sapienza
DrupalDay
[drupalday 2017] - Accessibilità Web: Finalità, metodologie e strumenti.
[drupalday 2017] - Accessibilità Web: Finalità, metodologie e strumenti.
DrupalDay
[drupalday2017] - Behat per Drupal: test automatici e molto di più
[drupalday2017] - Behat per Drupal: test automatici e molto di più
DrupalDay
[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...
[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...
DrupalDay
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
DrupalDay
[drupalday2017] - Venezia & Drupal. Venezia è Drupal!
[drupalday2017] - Venezia & Drupal. Venezia è Drupal!
DrupalDay
[drupalday2017] - Cosa significa convertire un modulo da D7 a D8
[drupalday2017] - Cosa significa convertire un modulo da D7 a D8
DrupalDay
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
DrupalDay
[drupalday2017] - Quando l’informazione è un servizio
[drupalday2017] - Quando l’informazione è un servizio
DrupalDay
[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
DrupalDay
[drupalday2017] - Cloud e integrazione per la PA: la sfida dell'Open Source t...
[drupalday2017] - Cloud e integrazione per la PA: la sfida dell'Open Source t...
DrupalDay
[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
DrupalDay
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
DrupalDay

More Related Content

What's hot (6)

Drupal 8 - dal download del core alla pubblicazione in produzione
Drupal 8 - dal download del core alla pubblicazione in produzione
sparkfabrik
Sviluppare applicazioni android
Sviluppare applicazioni android
Paolo Montalto
Sviluppare un plugin WordPress da zero - WordCamp Bologna 2018
Sviluppare un plugin WordPress da zero - WordCamp Bologna 2018
Marco Chiesi
Building Scala with Bazel - Scala Days
Building Scala with Bazel - Scala Days
Natan Silnitsky
Linux Embedded per l'automazione
Linux Embedded per l'automazione
Daniele Costarella
Laravel 7 REST API
Laravel 7 REST API
Beniamino Ferrari
Drupal 8 - dal download del core alla pubblicazione in produzione
Drupal 8 - dal download del core alla pubblicazione in produzione
sparkfabrik
Sviluppare applicazioni android
Sviluppare applicazioni android
Paolo Montalto
Sviluppare un plugin WordPress da zero - WordCamp Bologna 2018
Sviluppare un plugin WordPress da zero - WordCamp Bologna 2018
Marco Chiesi
Building Scala with Bazel - Scala Days
Building Scala with Bazel - Scala Days
Natan Silnitsky

Viewers also liked (20)

[drupalday2017] - Devel - D8 release party
[drupalday2017] - Devel - D8 release party
DrupalDay
[drupalday2017] - Drupal 4 Stakeholders
[drupalday2017] - Drupal 4 Stakeholders
DrupalDay
[drupalday2017 - KEYNOTE] - Saving the world one Open Source project at a time
[drupalday2017 - KEYNOTE] - Saving the world one Open Source project at a time
DrupalDay
[drupalday2017] - DRUPAL per la PA: il modello della Trasparenza di Sapienza
[drupalday2017] - DRUPAL per la PA: il modello della Trasparenza di Sapienza
DrupalDay
[drupalday 2017] - Accessibilità Web: Finalità, metodologie e strumenti.
[drupalday 2017] - Accessibilità Web: Finalità, metodologie e strumenti.
DrupalDay
[drupalday2017] - Behat per Drupal: test automatici e molto di più
[drupalday2017] - Behat per Drupal: test automatici e molto di più
DrupalDay
[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...
[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...
DrupalDay
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
DrupalDay
[drupalday2017] - Venezia & Drupal. Venezia è Drupal!
[drupalday2017] - Venezia & Drupal. Venezia è Drupal!
DrupalDay
[drupalday2017] - Cosa significa convertire un modulo da D7 a D8
[drupalday2017] - Cosa significa convertire un modulo da D7 a D8
DrupalDay
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
DrupalDay
[drupalday2017] - Quando l’informazione è un servizio
[drupalday2017] - Quando l’informazione è un servizio
DrupalDay
[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
DrupalDay
[drupalday2017] - Cloud e integrazione per la PA: la sfida dell'Open Source t...
[drupalday2017] - Cloud e integrazione per la PA: la sfida dell'Open Source t...
DrupalDay
[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
DrupalDay
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
DrupalDay
[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5
[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5
DrupalDay
[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces
DrupalDay
Da X a Drupal 8, migra tutto e vivi sereno
Da X a Drupal 8, migra tutto e vivi sereno
DrupalDay
Your Entity, Your Code
Your Entity, Your Code
DrupalDay
[drupalday2017] - Devel - D8 release party
[drupalday2017] - Devel - D8 release party
DrupalDay
[drupalday2017] - Drupal 4 Stakeholders
[drupalday2017] - Drupal 4 Stakeholders
DrupalDay
[drupalday2017 - KEYNOTE] - Saving the world one Open Source project at a time
[drupalday2017 - KEYNOTE] - Saving the world one Open Source project at a time
DrupalDay
[drupalday2017] - DRUPAL per la PA: il modello della Trasparenza di Sapienza
[drupalday2017] - DRUPAL per la PA: il modello della Trasparenza di Sapienza
DrupalDay
[drupalday 2017] - Accessibilità Web: Finalità, metodologie e strumenti.
[drupalday 2017] - Accessibilità Web: Finalità, metodologie e strumenti.
DrupalDay
[drupalday2017] - Behat per Drupal: test automatici e molto di più
[drupalday2017] - Behat per Drupal: test automatici e molto di più
DrupalDay
[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...
[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...
DrupalDay
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
[drupalday2017] - DevOps: strumenti di automazione per Drupal8
DrupalDay
[drupalday2017] - Venezia & Drupal. Venezia è Drupal!
[drupalday2017] - Venezia & Drupal. Venezia è Drupal!
DrupalDay
[drupalday2017] - Cosa significa convertire un modulo da D7 a D8
[drupalday2017] - Cosa significa convertire un modulo da D7 a D8
DrupalDay
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
DrupalDay
[drupalday2017] - Quando l’informazione è un servizio
[drupalday2017] - Quando l’informazione è un servizio
DrupalDay
[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
[drupalday2017] - Contenuti educativi digitali aperti, creare contenuti e dis...
DrupalDay
[drupalday2017] - Cloud e integrazione per la PA: la sfida dell'Open Source t...
[drupalday2017] - Cloud e integrazione per la PA: la sfida dell'Open Source t...
DrupalDay
[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
[drupalday2017] - Drupal come frontend che consuma servizi: HTTP Client Manager
DrupalDay
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
DrupalDay
[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5
[drupalday2017] - Decoupled frontend con Drupal 8 e OpenUI 5
DrupalDay
[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces
DrupalDay
Da X a Drupal 8, migra tutto e vivi sereno
Da X a Drupal 8, migra tutto e vivi sereno
DrupalDay
Your Entity, Your Code
Your Entity, Your Code
DrupalDay
Ad

Similar to [drupalday2017] - Async navigation with a lightweight ES6 framework (20)

Drupal
Drupal
NaLUG
Introduzione a Drupal 7 - 14/03/2013
Introduzione a Drupal 7 - 14/03/2013
Alessandro del Gobbo
Introduzione a Drupal e componenti del core - SIDCamp 2015
Introduzione a Drupal e componenti del core - SIDCamp 2015
Kelyon Srl
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
sparkfabrik
Come Drupal costruisce le tue pagine
Come Drupal costruisce le tue pagine
sparkfabrik
Presentazione Corso - Parte 3
Presentazione Corso - Parte 3
Giorgio Carpoca
DrupalDay 2014: AngularJS + IonicFramework + Drupal Services
DrupalDay 2014: AngularJS + IonicFramework + Drupal Services
Michel Morelli
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DrupalDay
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Giovanni Sacheli
DrupalGap: crea una app Android (ed iOS) con Drupal, Drupalgap ed Apache Cordova
DrupalGap: crea una app Android (ed iOS) con Drupal, Drupalgap ed Apache Cordova
DrupalDay
Introduzione a Drupal - Versione Italiana
Introduzione a Drupal - Versione Italiana
Giovanni Buffa
Acadevmy - PWA & Angular
Acadevmy - PWA & Angular
Francesco Sciuti
Creare PWA con Angular
Creare PWA con Angular
Francesco Sciuti
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
Sinergia Totale
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
DrupalDay
Sencha touch: panoramica e orientamento sul codice
Sencha touch: panoramica e orientamento sul codice
Giuseppe Toto
Web frameworks
Web frameworks
Gianfranco Reppucci
Drupal Day 2011 - MobileD!
Drupal Day 2011 - MobileD!
DrupalDay
Drupal Lessons by nois3lab
Drupal Lessons by nois3lab
nois3lab
Le applicazioni web e i CMS (18/19)
Le applicazioni web e i CMS (18/19)
Giuseppe Vizzari
Introduzione a Drupal e componenti del core - SIDCamp 2015
Introduzione a Drupal e componenti del core - SIDCamp 2015
Kelyon Srl
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
sparkfabrik
Come Drupal costruisce le tue pagine
Come Drupal costruisce le tue pagine
sparkfabrik
DrupalDay 2014: AngularJS + IonicFramework + Drupal Services
DrupalDay 2014: AngularJS + IonicFramework + Drupal Services
Michel Morelli
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DDAY2014 - Costruire una app mobile con Ionic, AngularJS ed ovviamente Drupal
DrupalDay
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Giovanni Sacheli
DrupalGap: crea una app Android (ed iOS) con Drupal, Drupalgap ed Apache Cordova
DrupalGap: crea una app Android (ed iOS) con Drupal, Drupalgap ed Apache Cordova
DrupalDay
Introduzione a Drupal - Versione Italiana
Introduzione a Drupal - Versione Italiana
Giovanni Buffa
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
Sinergia Totale
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
DrupalDay
Sencha touch: panoramica e orientamento sul codice
Sencha touch: panoramica e orientamento sul codice
Giuseppe Toto
Drupal Day 2011 - MobileD!
Drupal Day 2011 - MobileD!
DrupalDay
Drupal Lessons by nois3lab
Drupal Lessons by nois3lab
nois3lab
Le applicazioni web e i CMS (18/19)
Le applicazioni web e i CMS (18/19)
Giuseppe Vizzari
Ad

More from DrupalDay (9)

Once you go cloud you never go down
Once you go cloud you never go down
DrupalDay
Tooling per il tema in Drupal 8
Tooling per il tema in Drupal 8
DrupalDay
Come progettare e realizzare una distribuzione in Drupal 8
Come progettare e realizzare una distribuzione in Drupal 8
DrupalDay
Drupal per la PA
Drupal per la PA
DrupalDay
Mantenere una distribuzione Drupal attraverso test coverage: Paddle case study
Mantenere una distribuzione Drupal attraverso test coverage: Paddle case study
DrupalDay
Invisiblefarm condivide l'esperienza DrupalGIS
Invisiblefarm condivide l'esperienza DrupalGIS
DrupalDay
La semantica per automatizzare una redazione web: l'esperienza di Innolabplus.eu
La semantica per automatizzare una redazione web: l'esperienza di Innolabplus.eu
DrupalDay
"Twig e i belli dentro": panoramica sui nuovi standard di frontend-developmen...
"Twig e i belli dentro": panoramica sui nuovi standard di frontend-developmen...
DrupalDay
Drupal 8: dal download del Core alla pubblicazione in produzione. Cos'è cambi...
Drupal 8: dal download del Core alla pubblicazione in produzione. Cos'è cambi...
DrupalDay
Once you go cloud you never go down
Once you go cloud you never go down
DrupalDay
Tooling per il tema in Drupal 8
Tooling per il tema in Drupal 8
DrupalDay
Come progettare e realizzare una distribuzione in Drupal 8
Come progettare e realizzare una distribuzione in Drupal 8
DrupalDay
Mantenere una distribuzione Drupal attraverso test coverage: Paddle case study
Mantenere una distribuzione Drupal attraverso test coverage: Paddle case study
DrupalDay
Invisiblefarm condivide l'esperienza DrupalGIS
Invisiblefarm condivide l'esperienza DrupalGIS
DrupalDay
La semantica per automatizzare una redazione web: l'esperienza di Innolabplus.eu
La semantica per automatizzare una redazione web: l'esperienza di Innolabplus.eu
DrupalDay
"Twig e i belli dentro": panoramica sui nuovi standard di frontend-developmen...
"Twig e i belli dentro": panoramica sui nuovi standard di frontend-developmen...
DrupalDay
Drupal 8: dal download del Core alla pubblicazione in produzione. Cos'è cambi...
Drupal 8: dal download del Core alla pubblicazione in produzione. Cos'è cambi...
DrupalDay

[drupalday2017] - Async navigation with a lightweight ES6 framework

  • 2. sezioni di pagina async con ES6 + D8 +
  • 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