JS: MVC con framework Backbone

07 May 2019 | M.A.D.R.

Perché un framework JS ? “Backbone" per creare applicazione web 2.0 con pattern MVC.

Abbiamo già visto come implementare il pattern MVC attraverso php, oggi facciamo un salto in avanti approcciando questa metodologia all’uso di Backbone.js. Prima di iniziare, spiego il motivo di questo framework /libreria in breve:

  • Logica Semplice
  • Riusabilità del codice
  • Controller non sempre necessario
  • Semplifica la vita al server
  • Router abbastanza performante
  • Possibilità di estensione attraverso plugin
  • Sistema di templating a scelta dell’utente
  • Ampiamente configurabile

Visti alcuni punti forti di questo framework, motiviamo l’uso di Backbone nella vita reale: immaginate di voler scrivere il nostro amico sitarello preso in esame con le 3 paginette, ogni qualvolta che premete su un pulsante /link, inviate al server delle direttive che cercherà di interpretare, elaborare e restituire del codice HTML che verrà stampato sul browser, questo è l’approccio classico, facile, veloce e pulito, ma noi voglia creare un sito one-page, ossia senza effettuare il refresh della pagina, ed è qui che backbone ci viene in aiuto.

Iniziamo subito con la definizione di route, ossia una serie di direttive (fatemi passare il termine, angular lo vedremo più avanti) che determinano quale controllore dovremo attivare.

Quindi i nostri classici link saranno rimpiazzati anteponendo a href l'hashtag "#"
e con l’uso di jQuery bloccheremo il comportamento di default del click del bottone/pulsante (per comodità scrivo in line).

$(document).ready(function(){
    var menu=$('.my_nav');
    var app=new App;
    menu.on('click',function(e){
        e.preventDefault();
        app.navigate(this);
   });
});

Per semplicità non ho spiegato come scrivere e come implementare il tutto per stuzzicare la curiosità.

Arrivati a questo punto dovremo in primis documentarci sull’uso di backbone e di un buon sistema di template (preferisco underscore).

Soluzioni complete per ogni esigenza