Corsi on-line

VueJS: progettare interfacce utente con JavaScript

VueJS è un framework basato su JavaScript che mette a disposizione un set di librerie per la realizzazione di interfacce utente da integrare nelle Web application; non si tratta di un’alternativa a soluzioni più note come AngularJS, React o Ember, ma di uno strumento che funziona in modo per molti aspetti diverso, offrendo l’opportunità di realizzare App reattive e modulari con un evidente risparmio in termini di codice digitato.

logoL’approccio differente al development proposto da VueJS viene evidenziato dall’impostazione scelta per la gestione dei dati e la loro visualizzazione, a tal proposito è possibile analizzare il seguente esempio dove viene definito un oggetto:

var object = {
  message: 'Un oggetto con VueJS'
}

e un template nel quale viene richiamato il valore dell’oggetto precedentemente generato (message):

<div id="msg">
  {{ message }}
</div>

Il collegamento tra template e valore dell’oggetto (binding) potrà essere effettuato in questo modo tramite la chiamata del selettore corrispondente all’identificatore utilizzato nel template:

new Vue({
  el: '#msg',
  data: object
})

In sostanza il framework si occuperà autonomamente delle eventuali conversioni dell’oggetto, motivo per il quale se quest’ultimo dovesse subire qualche modifica non sarà necessario intervenire manualmente sulla view del template. Stesso discorso per quanto riguarda la gestione delle dipendenze che risulterà semplificata:

var blah = new Vue({
  data: {
    x: 1
  },
  computed: {
    y: function () {
      return this.x + 1
    }
  }
})

blah.x // -> 1
blah.y // -> 2
blah.x++
blah.y // -> 3

Nel caso specifico y rileverà automaticamente x come dipendenza, non vi sarà quindi la necessità di dichiarare quest’ultima manualmente.

VueJS presenta comunque alcuni costrutti sintattici familiari per coloro che già utilizzando i framework attualmente più popolari, da questo punto di vista è possibile citare il supporto per le componenti riutilizzabili che viene praticamente mutuato da React.

Rilasciato sotto licenza Open Source, il framework dispone di un proprio sistema integrato per il supporto ad animazioni e transizioni e mette a disposizione un proprio package (chiamato vue-router) per il routing e il mapping.

Via VueJS

Post correlati
I più letti del mese
Tematiche