Eagle.js: generare slideshow con Vue.js

Eagle.js è una libreria/framework JavaScript che permette di produrre intere presentazioni in formato slideshow personalizzabili ed animabili, temi e widget interattivi, basato a sua volta sul framework Vue.js, uno dei tre pilastri dello sviluppo JavaScript moderno insieme ad Angular.js e React.

Eagle.js offre un sistema di componenti modulare, riutilizzabile e customizzabile con cui lo sviluppatore sarà in  grado di produrre svariate tipologie di slideshow professionali. Dalla demo di introduzione possiamo osservare uno dei possibili risultati costruibili attraverso la libreria.

Nella documentazione vengono prodotti template molto semplici, grazie all'implementazione di Pug, un templating engine che permette di generare codice HTML (e JavaScript) partendo appunto da un template, dopo una compilazione interna. E' ovviamente possibile utilizzare anche il plain HTML:

.eg-slideshow
    slide
      h1 My slideshow
      h4 By Zulko
    slide
      h3 Title of this slide
      p  Paragraph 1.
      p  Paragraph 2.
    slide(:steps=3)
      h3 Slide with bullet points
      p(v-if='step >= 2') This will appear first.
      p(v-if='step >= 3') This will appear second.

L'idea che sta alla base di Eagle.js è molto semplice: tutta l'implementazione è basata sui componenti slideshow e slide. Il primo è un mixin che funge da contenitore in cui possono essere incluse molteplici slide, come accade ad esempio nel codice seguente:

<template lang="pug">
    slide(:steps="4")
      p(v-if="step >= 1")
        | {{step}}
      p(v-if="step >= 2")
        | {{step}}
      p(v-if="step >= 3")
        | {{step}}
      p(v-if="step >= 4")
        | {{step}}
</template>
<script>
import { Slideshow } from 'eagle.js'
export default {
  mixins: [Slideshow]
}
</script>

Ovviamente, dato che si tratta di una soluzione basata su Vue.js, per impiegare al meglio Eagle.js ed utilizzare le sue funzionalità più avanzate ed interessanti, come gli slideshow innestati, i widget, i temi, la "modalità presentazione" e le transizioni, è necessario possedere una discreta conoscenza del framework in questione.

Nella pagina ufficiale del progetto ospitata su Git, è possibile reperire una moltitudine di informazioni relative ad Eagle.js, come la documentazione riguardo alle diverse procedure di installazione, l'utilizzo di sistemi di templating più avanzati e delle funzionalità sopra citate, oltre a svariate demo che mostrano la libreria in azione.

Via Eagle.js