Verso un mondo di (web) apps

Published 7 years ago · 6 mins read

6 mins read

Quest’estate, su Wired US è uscito il “famigerato” articolo, che è stato poi riportato anche in Italia, intitolato “The Web is dead”. Per riassumere molto, Chris Anderson e Micheal Wolff analizzano un presunto declino dell’uso di Internet a cui siamo abituati, ovvero la ricerca e il browsing tra siti web. Una delle tesi principali di Anderson è che gli utenti Internet si stanno spostando verso un mondo (chiuso o semi-chiuso) fatto di “apps” native che permettono di svolgere i compiti più svariati. Riportiamo qui uno stralcio esemplificativo dell’articolo.

You wake up and check your email on your bedside iPad — that’s one app. During breakfast you browse Facebook, Twitter, and The New York Times — three more apps. On the way to the office, you listen to a podcast on your smartphone. Another app. At work, you scroll through RSS feeds in a reader and have Skype and IM conversations. More apps. At the end of the day, you come home, make dinner while listening to Pandora, play some games on Xbox Live, and watch a movie on Netflix’s streaming service.
You’ve spent the day on the Internet — but not on the Web. And you are not alone.
Chirs Anderson, “The Web is dead”, Wired US, 09/10 issue

La tesi di Anderson afferma sostanzialmente che la gente si muove (e si muoverà sempre di più) in un universo prevalentemente fatto di applicazioni, perché esse forniscono più features, sicurezza, affidabilità, velocità, insomma … funzionano meglio! Questo anche a costo di doverle pagare e di entrare in un mondo meno “libero” (AppStore, Android Market, ecc.), al contrario di quello che accade abitualmente sui siti web.

Il titolo dell’articolo non deve essere ovviamente preso alla lettera, ma fornisce ottimi spunti per discutere sul futuro del web (che non penso affatto sia il cimitero). Si sta veramente spostando verso un paradigma “application-oriented”? Io penso di sì. Penso però anche che questo universo non sarà costituito solo da una miriade di applicazioni native, incompatibili tra di loro e utilizzabili solo su determinati device. Le tecnologie web standard ci permettono di creare applicazioni interattive e COMPATIBILI già oggi. Le nuove tecnologie che vengono introdotte in questo periodo ci permetteranno di spingerci oltre. Vediamo come.

Web applications: siti web intelligenti?

La prima rivoluzione: il Web 2.0

Quando alcuni anni fa la parola Web 2.0 è diventata di moda, nel mondo Internet era in corso un grande cambiamento: alcuni siti web iniziavano a incorporare funzionalità interattive tipiche delle applicazioni desktop. L’uso di AJAX, di librerie Javascript e di tecniche avanzate CSS permetteva di creare vere e proprie Web applications (intese qui come applicazioni sviluppate con tecnologie web standard, HTML/CSS/Javascript), in grado di fornire interattività, effetti grafici avanzati e sopratutto evitare il refresh completo della pagina ad ogni azione dell’utente, risparmiandoci lente interazioni con il server ad ogni click. Il lato “client” del World Wide Web cominciava a diventare meno “stupido”: un po’ di logica applicativa si spostava dal server al browser dell’utente. Alcuni esempi di queste web applications (che hanno lanciato anche l’idea di Cloud Computing) sono Gmail, Google Docs, Photoshop.com, Picasa, solo per citare i più famosi.

Un documento aperto in Google Docs

Un documento aperto in Google Docs

La seconda rivoluzione: HTML5

Logo HTML5Ora siamo alle soglie di una nuova rivoluzione: le applicazioni web 2.0 sono pronte a fare un salto in avanti e diventare (quasi) del tutto simili alle applicazioni native, sia desktop che mobile. Questo principalmente grazie alle novità introdotti da HTML5, la nuova versione del linguaggio di markup web e alla lungimiranza dei principali player del settore, che stanno già investendo in questa direzione. Ci concentreremo ora su tre features introdotte da HTML5 (in realtà le novità sono molte di più), che ritengo particolarmente importanti per questa transizione verso un mondo “application-oriented”:

  1. Accesso all’hardware del device
  2. Esecuzione offline
  3. Local storage

1. Accesso all’hardware del device

Uno dei principali vantaggi delle applicazioni “native” è la loro stretta integrazione con il sistema operativo, e quindi con le funzionalità hardware dei dispositivi in cui sono installate. Ad esempio, possono sfruttare le informazioni dei giroscopi degli smartphone di ultima generazione, accedere ai dispositivi di I/O (fotocamera, memoria fisica, ecc.), accedere alle liste dei contatti o usufruire delle funzioni di accelerazione hardware della scheda grafica.

Una delle caratteristiche più interessanti introdotte da HTML5 è la Geolocation API, che permette di accedere in modo molto semplice, tramite Javascript, alle informazioni sulla posizione del dispositivo dell’utente. Il modo in cui queste informazioni sono acquisite dipende dal device: GPS, triangolazione, RFID, WiFi, ecc. . E’ quindi un primo passo per fornire alle applicazioni web un accesso ai sensori dei device in cui sono installati e sfruttarli adeguatamente. Il suo uso è veramente semplice.

Esempio:

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(
      function(position){
         // 'position' contiene le coordinate del dispositivo
         alert( 'Your position is: Latitude: ' + position.coords.latitude
                   + ' Longitude: ' + position.coords.longitude);
      },
      function(msg){
         alert( 'Impossibile rilevare la posizione. '+msg );
      });
}else{
   alert("Geolocalizzazione non supportata. Aggiorna il tuo browser!");
}

Un’altra caratteristica importante, introdotta dalla nuova versione di Internet Explorer 9 (udite udite!) è il supporto per l’accelerazione grafica alle applicazioni eseguite nel browser. Questo per far fronte alle crescenti  potenza di calcolo richiesta dagli effetti grafici implementabili nelle moderne applicazioni web (tag canvas, animazioni Javascript e CSS3, ecc.).

2. Esecuzione offline

La possibilità di eseguire un’applicazione senza disporre di una connessione Internet è fondamentale per garantire una più ampia adozione delle applicazioni web. Google Docs è eccezionale: ma se non siamo connessi ad Internet non possiamo usarlo!

HTML5 per ovviare al problema introduce la funzionalità di cache manifest, molto semplice ma altrettanto potente. Supponiamo di avere una piccola applicazione costituita da due pagine HTML, “index.html” e “about.html”, un file CSS, “style.css” e un file Javascript “navigation.js”. Tutto quello che dobbiamo fare per garantire un accesso offline è aggiungere un file “.manifest” che elenca tutti i file da scaricare necessari per eseguire l’applicazione e linkarlo dalla nostra pagina web. Vediamo concretamente come.

All’interno del file myapp.manifest elenchiamo i file che compongono la nostra applicazione:

CACHE MANIFEST
index.html
about.html
style.css
navigation.js

Nella pagina HTML facciamo riferimento al file .manifest in questo modo:

<!DOCTYPE HTML>
<html manifest="manifest.cache">

Dopo un primo accesso all’applicazione via Internet, che possiamo vedere come una sorta di “installazione“, il nostro browser caricherà dalla cache locale i file contenuti nel manifesto (sincronizzandoli periodicamente con quelli online) e ci permetterà di eseguire l’applicazione anche senza connessione web. Consultate questo articolo per ulteriori informazioni sull’uso dell’offline caching (“Let’s take it offline – Dive Into HTML5”, english).

3. Local Storage

Le applicazioni native permettono di memorizzare in locale i dati utili per l’esecuzione, come ad esempio preferenze, dati di accesso o sullo stato di esecuzione, file contententi lavori salvati, ecc. Questo nel web non è quasi mai stato possibile: l’unico strumento conosciuto erano i cookie. Essi permettono di memorizzare sulla macchina dell’utente brevi file di testo contenenti dati necessari all’applicazione (ad esempio un ID di sessione per l’utente). Questo metodo è molto limitato: diversi vendor hanno infatti prodotto plug-in per i browser che supportassero una memorizzazione locale dei dati più efficace e complessa: Gears di Google, che permette di creare in locale veri e propri database, ne è un esempio. Il team di Google lo ha utilizzato per creare la versione offline di Gmail, che permette di scaricare la posta in locale, leggerla anche senza connessione e memorizzare la posta in attesa di essere inviata, proprio come un comune client di posta. Ora questa possibilità verrà offerta nativamente tramite Javascript dalle Web Storage API di HTML5, attraverso tre elementi: sessionStorage, localStorage e Web SQL Database.

1. sessionStorage

Molto simile al comportamento dei cookie. Permette di memorizzare variabili in formato chiave/valore usando i metodi sessionStorage.getItem(key) sessionStorage.setItem(key,value). Queste variabili “vivono” nella tab del browser, quindi scompariranno una volta che la tab viene chiusa.

Esempio:

sessionStorage.setItem( 'nome' , 'Matteo' );
alert( " Il tuo nome è "+ sessionStorage.getItem( 'nome' ) );
2. localStorage

Il funzionamento è del tutto simile a sessionStorage. La differenza consiste nel fatto che localStorage persiste anche al di fuori della singola sessione in cui viene creata e vi si può accedere tramite Javascript anche dopo che la finestra del browser è stata chiusa (magari dopo giorni). Questa API presenta gli stessi metodi di sessionStorage, ovvero setItem e getItem. Molto utile per memorizzare le preferenze dell’utente.

3. Web SQL database

Session e localStorage sono ottimi metodi per memorizzare dati semplici. Ma cosa succede se ci serve  qualcosa di più complesso? Entra in gioco qui l’API più potente messa a disposizione dalla specifica HTML5, ovvero i database locali. Grazie ad essi è possibile creare dei veri e propri database all’interno del browser dell’utente. Potremmo usarla, ad esempio, in una web app di posta elettronica per memorizzare periodicamente tutte le e-mail ricevute dal nostro utente in una tabella, per permettergli di visualizzarle senza doversi connettere al server di posta. Quella che vi mostrerò molto brevemente è quella che è chiamata Web SQL Database API (“Specifica W3C”, english). Esiste anche un’altra versione in corso di sviluppo che supporta funzionalità simili, detta Indexed Database API (“Specifica W3C”, english), di cui non parlerò. L’API supporta tutte le comuni operazioni SQL, come INSERT, DELETE, UPDATE e CREATE, così come le transazioni e la gestione degli errori.

Esempio. Leggiamo dal DB locale ‘MailDB’ i dati della tabella ‘posta_in_entrata’ e li visualizziamo nella pagina web

//Apertura Database
var db = openDatabase( "MailDB" , "1.0" );
//Esecuzione query SQL racchiusa da una transazione
db.transaction(
 function( tx ){
   tx.executeSql( "SELECT * FROM posta_in_entrata" , [],
     function( tx, result ){
       // Funzione eseguita se l'istruzione SQL va a buon fine
      for( var i=0;i<result.rows.length;i++){
          $('#mails').append('<li><strong>'+results.rows.item(i).mailFrom +
                           '</strong>' + results.rows.item(i).mailText + '</li>' );
     },
     function( tx , error ){
       //Gestione errori
       alert("Errore nella lettura delle e-mail.");
   });
});

Per concludere

Dopo questa carrellata di alcune delle novità introdotte da HTML5 cerchiamo di dare una visione d’insieme di questa vera e propria rivoluzione. Rispetto alle applicazioni Web 2.0 di cui abbiamo parlato all’inizio, HTML5 ci permette di rendere il browser ancora più intelligente e indipendente: ci permette di spostare ancora più logica applicativa sul lato “client”, limitando quindi allo stretto necessario le interazioni richieste con il server. Queste applicazioni si collegheranno solo saltuariamente al server centrale, per sincronizzare i dati locali o per richieste particolari non eseguibili offline (es. l’acquisto di un prodotto nell’ e-store). Ad esempio, il client di posta realizzato come Web App potrebbe scaricare periodicamente (in background) le mail nuove dal server centrale e collegarsi ad esso per inviare i messaggi composti dall’utente in locale, magari mentre era scollegato dalla rete.

La struttura di una Web Application

La struttura tipica di una Web Application: Html, Css e Javascript sono su lato client e interagiscono saltuariamente con il server remoto

Ovviamente tutto questo non è ancora del tutto attuale: il supporto nei vari browser a queste tecnologie è sorprendentemente buono (sopratutto in ambito mobile), ma non ancora completo. Trovate in questo sito una serie di tabelle che illustrano la compatibilità delle tecnologie HTML5 (“When can I use” , english) con i browser più diffusi.

La strada sembra comunque segnata: alcuni dei maggiori player del settore Internet stanno sviluppando progetti per il supporto estensivo delle Web Apps con un paradigma simile all’AppStore reso famoso da Apple: applicazioni concentrate in uno o pochi luoghi di acquisto, facili da trovare, alcune gratuite, alcune a pagamento, corredate da reviews e installabili a piacere sul proprio device. Vediamo i 3 più interessanti:

  • Chrome Web store: ancora in fase di sviluppo (lancio previsto per fine 2010). [Update: Chrome web store è ora aperto al pubblico]  Si tratta del market per Web applications proposto da Google ed integrato con il browser Chrome. Grazie ad estensioni proprietarie del browser, queste applicazioni (sviluppate con tecnologie HTML5) potranno essere installate e accedute in modo molto simile alle applicazioni native del nostro dispositivo.

    Google apps launcher

    Google Chrome apps launcher

  • Mozilla Open Web App Ecosystem: proposto da Mozilla nell’ottobre 2010. E’ un framework che supporta la pubblicazione “libera” di Web Apps sviluppate con tecnologie web standard e installabili sul proprio computer grazie ad un “descrittore” scritto in linguaggio JSON. Lo sviluppatore è poi libero di distribuirla indipendentemente (es. sul proprio sito) oppure attraverso i vari Web store che verranno aperti, contenenti diverse applicazioni, con prezzi, voti, commenti, ecc. ecc. Il framework supporta anche applicazioni a pagamento. Qui si trova una serie di demo interessanti sviluppate da Mozilla.

    Mozilla App Store

    Una demo dell'App Store proposto da Mozilla

  • Apple Web apps store: probabilmente non molti lo sanno, ma Apple fornisce anche un AppStore per applicazioni mobile sviluppate con tecnologie Web. L’ “installazione” avviene semplicemente usando la funzione “Aggiungi a schermata Home” quando ci si trova sulla pagina web dell’applicazione. L’ottimo supporto ad HTML5 di Safari Mobile permette di sviluppare applicazioni molto interessanti usando tecnologie web.

Altre risorse

  • Dive into HTML5: eccezionale risorsa per capire e imparare ad usare al meglio le novità principali introdotte da HTML5
  • The Web is Dead: l’articolo integrale uscito il 17 agosto 2010 su Wired US che parla della “morte” del web come noi lo conosciamo. Scritto da Chris Anderson e Michael Wolff
  • HTML5 complete draft: gigantesco elenco di tutte le features in corso di sviluppo rigurdanti HTML5. Qui troverete veramente tutto: dalle API che vi ho illustrato ai nuovi tag semantici, dai nuovi campi per le form alle specifiche per il drag-n-drop nativo e la gestione degli upload dei file. E molto altro ancora.