JavaScript  »  Articoli  »  JQuery 

Introduzione

Dopo aver introdotto il mese scorso JQuery, uno dei framework Javascript oggi più apprezzati, in questo lungo articolo/tutorial metteremo in pratica le nozioni teoriche apprese realizzando un'applicazione che permetterà di gestire la creazione di progetti e dei relativi task, dando la possibilità all'utente di aggiungere contenuti e di flaggare un determinato task come completato o meno.

Il tutorial vuole in primo luogo presentare da un punto di vista meno scolastico il framework in questione ma anche offrire ai lettori un metodo di sviluppo Javascript abbastanza strutturato che permette di separare in maniera corretta i vari strati dell'applicazione in diversi componenti, garantendo una facilità non solo di progettazione ma anche di modifiche future.

Questo pattern di sviluppo ricalca alcuni pattern spesso usati nella tecnologia server-side, in cui l'organizzazione e l'ordine del codice sono sicuramente fattori vincenti non solo per le applicazioni di grandi dimensioni. Rispetto a quelle di qualche anno fa, nelle applicazioni web moderne sono molti i compiti che vengono delegati dal server al client; questo rende quasi obbligatoria una maggior cura nell'organizzazione del codice anche sulla macchina client. La poca tipizzazione e la dinamicità di Javascript possono infatti essere armi pericolose date in mano allo sviluppatore inesperto che rischia di realizzare applicazioni magari funzionanti, ma notevolmente disordinate e quindi poco manutenibili e scalabili.

Potete sin da ora verificare il funzionamento dell'applicazione che creeremo utilizzando questa demo funzionante. Per scaricare i sorgenti potete invece fare riferimento a questa pagina. Sul forum di HTML.it è anche aperto un thread creato appositamente per discutere dei più svariati aspetti legati al tutorial e all'applicazione.

La struttura dell'applicazione

L'applicazione in realtà può essere scomposta, come tutte le applicazioni client-server, in due sotto-applicazioni. Essendo questo tutorial redatto tenendo conto principalmente della parte client, non ci soffermeremo molto sulla componente server ma sposteremo il focus appunto sull'utilizzo pratico di JQuery.

La prima di queste applicazioni che analizzeremo sarà appunto la parte client.

La comunicazione tra client e server

Le due macro-componenti dell'appliacazione comunicano tramite file XML: il client invia i parametri tramite POST e il server risponde con documenti XML che verranno correttamente interpretati dal client. I file XML sono facilmente leggibili e comprensibili quindi non dedicherò ad essi molto tempo ora: definirò la loro struttura all'interno di ciascun caso d'uso.

Il modello dei dati

I modelli di dati che verranno gestiti sono relativamente semplici. Esistono due oggetti: il progetto e il task. Ciascun progetto ha un nome, un testo con note, una data di inizio e un elenco di task; ciascun task presenta un nome, un testo con note, una data di inizio e una di chiusura (questo permette di capire se il task è completato o ancora attivo) e un livello di priorità (alta o normale). Avere chiara in mente questa modellazione tornerà utile nel corso del tutorial.

Altri articoli

Altre guide

Altre newsletter