Sulla Programmazione

Quattro chiacchere sulla programmazione e sulle bit-tecnologie con Fabrizio Cipriani

Il web dinamico secondo AngularJS

AngularJS è un framework per lo sviluppo in linguaggio Javascript di applicazioni web dinamiche, o anche per quelle che vengono chiamate Single Page Applications (SPA).

Creato nel 2009 da Misko Hevery e Adam Abrons, ha progressivamente conquistato l'interesse degli sviluppatori fino a diventare uno dei framework javascript più utilizzati del web.

Abrons dopo un pò lascio il progetto, ma Hevery, che è un dipendente di Google, ha continuato a lavorare alla libreria con i colleghi Igor Minar e Vojta Jina.

AngularJS è conosciuto per essere un framework che segue il pattern MVW. Guardando le iniziali del curioso acronimo, noterete che accanto ai soliti Model e View, c'è una W, la quale sta per "Whatever works for you".

Dovessi decidere da dove cominciare a parlare delle caratteristiche tecniche di AngulatJS, inizierei dalle Directives, forse il concetto che sta alla base dell'intera libreria.

In AngularJS, le Directives possono sono attributi estesi di tag HTML, come la direttiva ng-controller in questo esempio:

1
2
<div ng-controller="LMSController as ctrl">
...

Il concetto può essere esteso fino ad arrivare alla definizione di veri e propri tag HTML personalizzati, chiamati Custom Directives.

Per spiegare meglio il concetto di Custom Directives, provo a fare un esempio mettendo a confronto AngularJS con la conosciutissima JQuery.

Mettiamo che vogliate usare un date-picker. Con JQuery, verrebbe fuori qualcosa del genere:

1
2
3
4
5
<input type="text" />

<script>
    $("input").datePicker() 
</script>

Ma in questo modo, se non si ha sott'occhio il codice javascript, sarà difficile intuire l'uso che l'autore vuole fare del tag <input>. Con AngularJS è definire una direttiva personalizzata e scrivere:

1
<datepicker></datepicker>

In questo caso, chi legge ha immediatamente chiaro che cosa si vuole fare con la riga di codice HTML.

Una esempio pratico

Ecco un altro esempio, questa volta di una applicazione AngularJS completa:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html ng-app="LMS">
    <head>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    </head>
    <body>
        <div ng-controller="LMSController as ctrl"
            <h1> {{ctrl.course.name}} </h1>
            <h2> {{ctrl.course.price}} </h2>
            <p>  {{ctrl.course.description}} </p>
        </div>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

Il contenuto di app.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
(function() {
    var lms = angular.module('LMS', []);

    lms.controller('LMSController', function() {
        this.course = angularJSCourse;
    });

    var angularJSCourse = {
        name: 'AngularJS',
        price: 10,
        description: 'AngularJS Course'
    }
})();

Analizzando il file app.js, si può notare all'inizio la definizione del modulo "LMS" (LMS sta per Learning Management System, ovvero una applicazione per l'apprendimento online). Nel codice HTML la direttiva ng-app aggancia il modulo "LMS" al contenuto del ramo body.

Sempre in app.js, all'interno modulo "LMS" viene poi definito il controller "LMSController". Anche in questo caso, nell'HTML una direttiva ng-controller aggancia il ramo div corrispondente al modulo.

Una volta agganciato (bound) il controller, possiamo visualizzare ed agire sui suoi dati usando nell'HTML le doppie parentesi graffe {{ e }}, come nell'esempio.

Un tutorial completo su AngularJS non è tra gli obiettivi di questo post, ma se siete curiosi, potete andarvi a leggere la breve introduzione di Steve Ralston o seguire il fantastico corso interattivo di Code School

La popolarità

AngularJS ha rapidamente preso piede grazie alla crescente necessità del mondo web di lasciarsi dietro il concetto di documento statico introdotto con l'invenzione di HTML e di spostarsi verso quello più moderno di applicazione internet interattiva.

Oggi AngularJS è incredibilmente popolare e l'interessa che suscita non smette di crescere, come è possibile vedere digitando "AngularJS" in Google Trends:

La controversia

Da qualche settimana, la comunità degli sviluppatori AngularJS è in fermento a causa dei dettagli emersi alla conferenza ng-europe tenutasi a Parigi a fine Ottobre riguardo la versione 2.0 di AngularJS (ora siamo alla 1.3)

Nella sua nuova versione la libreria sarà riscritta da capo e non sarà più compatibile con le versioni precedenti. Malgrado le assicurazioni di Igor Minar, sulla creazione di un percorso di migrazione dalla vecchia versione alla nuova, l'abbandono totale della vecchia struttura ha suscitato molte polemiche.

Per quale motivo questa decisione? Rob Eisenberg ha scritto un magnifico articolo sulle ragioni di AngularJS 2.0, parlandoci di come la nuova versione si proponga di risolvere i cronici problemi di performance di quella attuale e di rendere disponibili gli stupefacenti effetti speciali possibili sfruttando le tecnologie che saranno presenti nei browser di nuova generazione.

Curiosamente, Eisemberg ha fatto parte dello stesso team che sviluppa AngularJS 2.0 fino al 17 novembre scorso, quando ha annunciato pubblicamente di abbandonare il progetto per dei dissapori con la direzione.

Concludendo

Vale la pena di scegliere AngularJS come framework per i propri progetti visto la lingua tenuta dai suoi sviluppatori? Questo è un consiglio che non sono in grado di darvi, così come altri più eminenti del sottoscritto.

Compatibilità o no, la nuova versione impiegherà ancora dai 12 ai 18 mesi prima di uscire, e molte decisioni devono ancora essere prese. Nel frattempo, per chi non ha avuto ancora a che fare con AngularJS, il suggerimento che vi do è quello di dare un'occhiata a questa entusiasmante libreria.

Sia che siate interessati allo sviluppo di moduli Javascript per i vostri progetti professionali, o che siate semplici appassionati di programmazione, non ve ne pentirete :).

Comments