Introduzione ad AngularJs, il “supereroe” delle librerie javascript

Le tecnologie web si stanno evolvendo in modo così rapido e profondo che se ci fermassimo un attimo a pensare come sviluppavamo solo qualche anno fa ci verrebbe come minimo la pelle d’oca.

Acronimi come DHTML, ActiveX, Actionscript, Applet forse ai più giovani amanti del codice dicono poco, ma in realtà per un periodo sono stati il fiore all’occhiello di molte web application, tuttavia per quanto riguarda la programmazione lato client, se c’è una cosa che non è mai cambiata da questo punto di vista è la presenza di Javascript.

Creato in soli 10 giorni da tale Brendan Eich, allora dipendente di Netscape, questo linguaggio tra mille controversie e critiche è diventato ormai un caposaldo non solo dello sviluppo web, ma spesso anche di applicazioni server side grazie a strumenti come Node.js.

Sebbene la sintassi di Javascript non sia cambiata più di tanto nel corso degli anni, ciò che davvero si è rivoluzionato è il modo con cui il linguaggio viene utilizzato, grazie soprattutto  alle librerie messe a disposizione da comunità di sviluppatori Open Source che sono state realizzate per semplificare lo sviluppo, migliorando affidabilità, testabilità e compatibilità del codice.

Probabilmente tra queste quella che più di tutte ha lasciato il segno è stata JQuery, al punto che qualcuno (purtroppo) usa questo nome come sinonimo del linguaggio stesso. Del resto però, scagli la prima pietra chi scrive ancora document.getElementById()per selezionare un elemento! Jquery ha semplificato enormemente la vita agli sviluppatori, fornendo un coltellino svizzero di strumenti per manipolare il DOM velocemente e per operazioni ormai irrinunciabili come le chiamate Ajax.

Tuttavia la crescente domanda di web application complesse, ha messo in luce la necessità di strumenti ancora più efficaci che consentano di scrivere codice modulare, facilmente testabile, e soprattutto organizzato in livelli di presentazione e controllo ben distinti, per fortuna negli ultimi tempi sono state rilasciate diverse librerie molto valide, AngularJS è tra queste una delle più note ed apprezzate.

Sviluppata in casa Google, AngularJs si definisce come il “supereroe dei framework MVW!” dove proprio l’acronimo MVW è la chiave per capire a cosa serve realmente questo strumento.

La M sta per Model e rappresenta i dati che vogliamo rappresentare in una pagina web, pensiamo ad esempio alla lista dei risultati di una ricerca, piuttosto che a dei valori tabellari reperiti da chissà quale Web Service. Tutti i dati sono racchiusi in una variabile oggetto chiamata $scope.

La V sta per View, e rappresenta il “dove”  e il “come” vogliamo che i dati vengano visualizzati, ad esempio se nel model abbiamo una variabile chiamata quantita, potremmo inserire direttamente nel codice html la stringa {{quantita}} ovunque vogliamo che appaia, applicando eventualmente anche dei filtri per specificare in dettaglio il formato voluto, per esempio {{ quantita | number : 2 }} mosterà il numero con due cifre decimali dopo la virgola. Ma il vero valore aggiunto è che ogni qual volta tale variabile viene modificata, il testo visualizzato si aggiornerà di conseguenza senza che sia necessario fare null’altro. Già questo esempio banale ci fa capire la potenza di uno strumento del genere, ed è solo l’inizio!

La W ha un significato particolare. Nell’ambito dell’ingegneria del software si fa riferimento al pattern Model View Controller che è largamente utilizzato in qualsiasi contesto. Tuttavia nel tempo sono state proposte delle varianti di questo pattern come MVP o MVVM, si tratta sostanzialmente della stessa cosa, solo con delle piccole differenze concettuali, insomma roba davvero da precisini. Per tagliare la testa al toro i simpaticoni di Mountain View hanno coniato l’acronimo Model View Whatever You Want, Ovvero dopo MV metteteci quello che volete ma il concetto rimane lo stesso, e cioè un componente che gestisca il model popolandolo con i dati che servono e che implementi la logica applicativa. Ad esempio tornando alla nostra variabile quantita, se volessimo che alla pressione di un bottone essa venga incrementata di 1, il controller è il posto giusto in cui inserire la funzione che esegue il calcolo. La cosa interessante è che non dovremo preoccuparci minimamente di gestire gli eventi del mouse o di aggiornare il Dom, a questo ci penserà direttamente Angular!

Per avere un’idea più chiara potete dare un’occhiata qui sotto al codice html e javscript che la implementa l’esempio appena descritto.

Oltre a questi concetti di base, AngularJs fornisce un ampio arsenale di strumenti, dalle directive, che permettono di agganciare a qualsiasi elemento del DOM un comportamento personalizzato, alla dependency injection, che consente di suddividere l’applicazione in moduli autonomi e indipendenti richiamabili nel momento in cui si ha realmente necessità.

Padroneggiare questi strumenti richiede comunque un certo sforzo di apprendimento ma che ci verrà ampiamente ripagato in ore di lavoro risparmiate, e comunque male che vada fateci un fischio e cercheremo di darvi una mano!

Stay tuned!

Introduzione ad AngularJs, il “supereroe” delle librerie javascript ultima modifica: 2014-09-05T13:12:25+00:00 da Codelab Studio

3 Comments

  1. Paolo-Reply
    17 marzo 2015 at 10:00

    Fate ironia con chi definisce jQuery un linguaggio di programmazione e poi non sapete la differenza fra libreria e framework… complimenti!

    • admin-Reply
      27 marzo 2015 at 18:25

      Definire jQuery un linguaggio di programmazione è formalmente sbagliato. Parlare di AngularJS come una libreria certamente potrebbe non essere considerato corretto al 100%, ma è un confine molto più sfumato e opinabile.

  2. aleWEB-Reply
    20 marzo 2017 at 21:26

    Usare angularJS, lo considero favorevole solo lato server su nodeJS, a lato client mi pare solo una grande boiata!
    Anche usarlo su base cordova, non é cosa… troppe risorse, troppo spreco di cicli di clock…

Lascia un commento