AJAX Library API: la globalizzazione nei framework javascript

La globalizzazione entra anche nello sviluppo web con l’aiuto di Google, tramite le AJAX Library API. Questa nuova libreria consente di caricare il proprio framework javascript preferito in semplicità apportando inoltre alcuni vantaggi insostituibili.

ajax library api

Forse non sono stato molto chiaro. Nello sviluppo di siti/applicazioni web, oramai è diventato necessario includere framework come jQuery, jQuery UI, prototype, script.aculo.us, MooTools o dojo e tenerli aggiornati diventa dispendioso. Google, con la sua libreria carica automaticamente la libreria prescelta e la tiene aggiornata all’ultima versione rilasciata.

Per esempio, invece di includere la libreria nella classica maniera:

[code]<script type="text/javascript" src="jquery.js"></script>[/code]

con AJAX Library API per caricare jQuery dovremo scrivere:

[code lang=”javascript”]
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]

In questo modo, dopo che la pagina sarà completata, verrà caricato jQuery in modalità AJAX. Per approfondire l’argomento, vi rimando alla ben fatta documentazione.

Sicuramente mi chiederete dov’è il vantaggio, visto che devo scrivere 4 righe al posto di una sola. I vantaggi sono questi:

  • Il caching è fatto correttamente da Google e noi sviluppatori non ci dobbiamo preoccupare di nulla
  • Il trasferimento viene eseguito usando la compressione Gzip
  • I framework vengono forniti nella loro versione minificata
  • I file sono depositati nei server di Google che ci garantiscono una uniforme distribuzione sul territorio mondiale. In questo modo sono “vicini” ad ogni utente.
  • I server di Google sono veloci.
  • Usando gli stessi indirizzi, se molte applicazioni nella rete utilizzando l’AJAX Library API, probabilmente quando qualcuno caricherà la vostra applicazione, i file saranno già disponibili nella cache del browser!
  • Infine un sottile vantaggio in termini di prestazioni e di sicurezza. Poichè la vostra applicazione richiede un file esterno (con un dominio diverso) non verranno spedite informazioni aggiuntive come i cookie, salvando byte preziosi.

In realtà Google aveva già creato il codice per uniformare il caricamento delle sue librerie come le Google Maps API o le Google Search API. L’estensione ai framework non Google è parsa naturale, gratuita e molto utile per gli sviluppatori.

Lazy loading, caricare le funzioni Javascript quando servono

Stamattina mi sono soffermato a leggere un articolo su Digital Web Magazine che tratta del "Lazy Loading" un sistema intelligente per ottimizzare le performance di caricamento di una pagina web. In sostanza, al posto di caricare tutte le funzioni javascript al caricamento della pagina web, le facciamo caricare al bisogno, tramite AJAX.

lazy load

In informatica, il pattern "Lazy Load" corrisponde all’implementazione del design pattern chiamato Proxy. L’obiettivo è di evitare il caricamento di un oggetto finchè non sia assolutamente indispensabile e solo allora sarà necessario investire risorse per caricarlo. Nel caso del JavaScript, una applicazione web generamente ha bisogno di un set di funzioni che vengono chiamate progressivamente durante l’interazione con l’utente. Applicare il Lazy Load in questo caso significa creare delle funzioni "vuote", senza il loro codice che verrà caricato al momento della loro prima chiamata. Definiamo questa tecnica come Ghost Pattern.

Il Ghost Pattern prevede di fornire un oggetto con tutti i suoi metodi pubblici ma saranno vuoti, senza codice al loro interno con la sola chiamata alla nostra funzione di "lazy load" che si occuperà di caricare il vero oggetto andandolo a sostituire con la funzione fantasma.
Se verrà chiamata nuovamente la stessa funzione, verrà scatenato il vero oggetto, già caricato precedentemente.

Tutto questo solo per darvi un’idea della logica di questo design pattern. Per vedere nel dettaglio il codice potete trovarlo direttamente su questo articolo. Per chi usa JQuery come me, vi segnalo il plugin "Plugin" (strano nome, eh?) che implementa in toto il Lazy Loading, ma questo bisogna caricarlo fin da subito, eheheh…

Ext JS, un framework javascript per GUI

ext js 2.0 - un framework javascript per creare interfacce grafiche
Tra i tanti framework Javascript che sono in circolazione oggi vorrei segnalare Ext JS, ora alla versione 2.0. Questo framework è stato appositamente creato con l’idea di dare allo sviluppatore uno strumento agile ed efficace per costruire applicazioni web. Nasce come estensione del più famoso (e pesante) Yahoo! User Interface framework, ma nel corso dei sui 2 anni di vita è riuscito a camminare con le proprie gambe e ora non necessita di nessuna altra libreria di appoggio.

Notevoli sono le sue potenzialità nell’ambito grafico. Tab, scroller, grid, tabelle, finestre sono il suo pane e sinceramente devo dire che il risultato è eccezionale. Inoltre può essere affiancato tranquillamente ad altri framework javascript come jQuery, YUI o Scriptacolous che sono specializzati in altri ambiti.

Molte demo sono state pubblicate per mostrare le potenzialità di Ext JS 2.0. Se vi piace e volete approfondire l’argomento, troverete una documentazione molto ben scritta, con faq, tutorial, API e screencast, ovvero tutto ciò che vi occorre per imparare questo bel framework javascript.

Disegnare grafici direttamente da Javascript

In questi mesi ho approfondito l’uso di jQuery, un framework javascript che ha il vantaggio di essere leggero e intuitivo nell’uso. Inoltre jQuery permette di estendere le proprie funzionalità con l’aggiunta di plugin che sono resi disponibili sul sito ufficiale del progetto.

Oggi vi segnalo Flot, un plugin ci consente di disegnare grafici on the fly, direttamente lato client. I vantaggi principali di Flot sono la facilità d’uso (tutte le opzioni sono facoltative, quindi il plugin è pronto all’uso immediatamente), la bellezza dei risultati e la possibilità di rendere interattivi i grafici. Sebbene Flot sia semplice, è abbastanza avanzato per essere usato come ottimo strumento per applicazioni di data mining e di business intelligence in stile Web 2.0.

Il plugin è compatibile con tutti i principali browser moderni. Il motore che genera il grafico è il tag <canvas>, introdotto da Safari e adesso supportato da quasi tutti i principali browser.  L’unica eccezione è fatta per Internet Explorer che non supporta tale tag. Per ovviare al problema, bisogna ricorrere ad ExCanvas, una libreria che emula in tutto e per tutto il tag <canvas>.

Per cominciare, occorre includere le opportune librerie:

Ora è sufficiente posizionare nel corpo della pagina il placeholder che verrà utilizzato per contenere il grafico e il codice javascript:

 

Flot, jquery plugin

jQuery User Interface: il framework javascript diventa grande

jQuery User Interface jQuery, il popolare framework javascript, si arricchisce di una nuova libreria, la jQuery User Interface. Con questa novità sono disponibili allo sviluppatore nuovi metodi  per la gestione di widget grafici tematizzati che consentono di creare interfacce grafiche di terza generazione, desktop like.

Il cuore della libreria ruota attorno a funzionalità di interazione con il mouse, quali il drag e il drop, il sorting, il selecting e il resizing. Al di sopra di tutto sono stati aggiunti un buon numero di widget riutilizzabili come calendari, finestre di dialogo, slider, tabelle e tab. Cigliegina sulla torta, la jQuery UI mette a disposizione anche un paio di effetti molto simpatici: il magnifier e l’ombreggiatura sugli elementi.

jQuery UI

Imparare JQuery in 15 minuti

jQueryJQuery è una libreria javascript che consente di manipolare in modo veloce e conciso il documento HTML, gestire eventi, creare animazioni e aggiungere interazioni AJAX alla pagina. Lo scopo principale di jQuery è quello di facilitare e velocizzare la scrittura del codice Javascript.

Se dopo questa breve introduzione vi interessa approfondire maggiormente la conoscenza di questa libreria, oggi segnalo untutorial che vi spiega le nozioni base di jQuery. In 15 minuti avrete a disposizione gli strumenti necessari per poter cominciare a scrivere la vostra prima riga di codice. Buon lavoro!

jQuery

Script Ajax: una libreria di widget gratuita

Ajax Rain, una libreria gratuita di widget in Ajax Ajax Rain è una libreria di più di 450 script Ajax. Si tratta per lo più di widget per completare il vostro sito, come progress bar, grafici interattivi, form di upload, tooltip, menu contestuali e molto altro. Gli script sono pubblici e di solito fanno uso dei già noti framework Ajax come QooxDoo, JQuery, YUI.

Come dice lo slogan, "Secret Behind your inspiration", Ajax Rain è un’ottima risorsa da cui prendere spunto e per mettere in moto la nostra fantasia.

Libreria Ajax