Studio e Sperimentazione di Dart e Realizzazione di un ... · The goal of the Dash e ort is...

Universita degli Studi di Parma

FACOLTA DI SCIENZE MATEMATICHE FISICHE E NATURALI

Corso di Laurea in Informatica

Tesi di Laurea Triennale

Studio e Sperimentazione di Dart e Realizzazione diun’Applicazione di Configurazione

Candidato:

Martina IasoniRelatore:

Chiar.mo Prof. Federico Bergenti

Anno Accademico 2012–2013

al Grande Odino

Indice

Prefazione iii

1 Dart 11.1 Dart: Obiettivi e Strategie . . . . . . . . . . . . . . . . . . . . 21.2 Dart: Cosa c’e di Nuovo? . . . . . . . . . . . . . . . . . . . . 3

1.2.1 Approcciarsi a Dart . . . . . . . . . . . . . . . . . . . 41.2.2 Applicazioni End-to-End . . . . . . . . . . . . . . . . 41.2.3 Principali librerie . . . . . . . . . . . . . . . . . . . . . 51.2.4 Isolate . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.3 Strumenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.3.1 Dart Package Manager . . . . . . . . . . . . . . . . . . 81.3.2 SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.3.3 Dart Editor . . . . . . . . . . . . . . . . . . . . . . . . 9

1.4 Prestazioni . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131.5 Integrazione tra Dart e Altri Ambienti . . . . . . . . . . . . . 15

1.5.1 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . 151.5.2 HTTP Request . . . . . . . . . . . . . . . . . . . . . . 17

2 Push degli Eventi 212.1 Concetti di Base . . . . . . . . . . . . . . . . . . . . . . . . . 212.2 Comet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.2.1 HTTP Streaming . . . . . . . . . . . . . . . . . . . . . 232.2.2 Polling e Long Polling . . . . . . . . . . . . . . . . . . 232.2.3 BOSH . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.3 HTML5 WebSocket . . . . . . . . . . . . . . . . . . . . . . . . 252.3.1 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . 262.3.2 WebSocket API . . . . . . . . . . . . . . . . . . . . . . 282.3.3 WebSocket Protocol . . . . . . . . . . . . . . . . . . . 29

2.4 WebSocket e Dart . . . . . . . . . . . . . . . . . . . . . . . . 292.5 Altri Metodi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.6 Comet vs. WebSocket . . . . . . . . . . . . . . . . . . . . . . 32

INDICE ii

3 Realizzazione di una Applicazione Dart con GUI 353.1 Funzionamento dell’Applicazione . . . . . . . . . . . . . . . . 363.2 Realizzazione con Dart . . . . . . . . . . . . . . . . . . . . . . 38

Bibliografia 53

Prefazione

Ogni anno nascono decine di nuovi linguaggi di programmazione, e per piudella meta di questi linguaggi non si sente neanche parlare, per la parterimanente invece ci si prova a documentare, e dopo il secondo articolo deni-gratorio si lascia perdere. Ogni linguaggio dovrebbe essere adeguatamentepubblicizzato e preso in considerazione, invece chi ha il potere di bocciare opromuovere un nuovo linguaggio la maggior parte delle volte ha paura e loblocca sul nascere. La stessa cosa successe a Java, nel 1992 venne propostosotto il nome di Oak un linguaggio di programmazione orientato agli og-getti, indipendente dalla piattaforma, robusto e sicuro. Il team di sviluppoprese inizialmente una serie di decisioni sbagliate e si ritrovo a dover iniziarenuovamente la caratterizzazione del linguaggio cambiando di volta in vol-ta i proprio obiettivi, questo porto nel 1995 alla presentazione di un nuovolinguaggio di programmazione, completamente slegato da ogni sistema ope-rativo o microprocessore, Java. Lo stesso Java che si insegna nelle scuole eche e alla base della maggior parte delle moderne applicazioni. Per questoquando viene annunciato un nuovo linguaggio di programmazione, soprat-tutto se e stato creato da un colosso come Google, gli si dovrebbe dare unapossibilita. Magari l’obiettivo iniziale di Dart e un po’ troppo pretenzioso,ma non e detto che non riesca a raggiungerlo o che non trovi diversi campi diutilizzo. Quindi per ora lasciamo perdere le critiche e gli elogi, per giudicarebisogna studiare e provare. In seguito si potra prendere una decisione, e none detto che questa sia definitiva. Questa e un possibilita per avvicinarsi aDart.

Capitolo 1

Dart

Dart e il nuovo linguaggio di programmazione presentato da Google nell’ot-tobre 2011 alla GOTO Conference[8] in Danimarca. Google considera Dartil futuro del web, e un linguaggio orientato agli oggetti, supporta le inter-facce grafiche, ha scope statico, classi astratte ed e ad ereditarieta singola.Un programmatore che si avvicina per la prima volta a questo linguaggio sitrovera a suo agio grazie alla presenza di numerose librerie e alla somiglianzasintattica con Java e C++. Come si evince da una e-mail[5] trapelata dagliuffici di Google, datata novembre 2010, Dart nasce per sostituire JavaScript:

The goal of the Dash effort is ultimately to replace JavaScript asthe lingua franca of web development on the open web platform.

Nella e-mail viene spiegato il motivo che ha spinto Google a intraprende-re un progetto cosı rischioso come l’introduzione sul mercato di un nuovolinguaggio, cioe ovviare ai problemi di gestione e manutenzione di grandi ap-plicazioni Web derivati dalla grande quantita di codice JavaScript necessarioper piccole applicazioni e alla difficolta di approcciarsi al linguaggio per laprima volta, dovuta alla disorganizzazione del codice e alla difficolta di riu-tilizzo dello stesso. Ovviamente siccome Dart e un progetto ad alto rischioGoogle continuera a sviluppare parallelamente un progetto meno rischioso,chiamato Harmony [10], di rimodernamento e sviluppo di JavaScript in mo-do da non rimanere fuori dal mercato in caso di fallimento di Dart. A piu diun anno dal suo lancio Dart e in continua evoluzione, sono nati decine di fo-rum e comunita di discussione sul linguaggio, alla fine del 2012 e addiritturaentrato a far parte della Top 50 della classifica di linguaggi di Tiobe[2], vi erimasto per poco tempo ma e ancora presente nella Top 100 insieme ad unaltro linguaggio di Google, Go. Per ora l’unico grande sostenitore di Dart eZynga[26], una piattaforma di giochi online, entusiasta dell’introduzione deitipi statici nel linguaggio, per il resto Dart e stato accolto con entusiasmoda programmatori inesperti o alle prime armi con in Web, mentre invece e

1.1 Dart: Obiettivi e Strategie 2

Figura 1.1: Il logo ufficiale di Dart

stato trattato con diffidenza dai conoscitori di JavaScript che, come si puocapire dai numerosi articoli apparsi in rete, non sentivano la necessita di uncambiamento. Infatti sono in molti a sostenere che JavaScript non potramai essere sostituito, perche ormai e troppo diffuso e la quasi totalita deidispositivi in circolazione lo supporta. Un altro motivo che spinge molti acredere che Dart non sopravvivera a lungo e il rifiuto delle case proprietariedi Internet Explorer, Firefox, Opera e Safari di integrare la virtual machinedi Dart nei loro browser. Fortunatamente l’editor di Dart e stato affiancatoda un compilatore dart2js che traduce Dart in JavaScript, in modo da po-tere utilizzare applicazioni scritte in Dart su tutti i browser in circolazione.Negli ultimi tempi la traduzione da Dart a JavaScript e stata ottimizzatatanto che il codice JavaScript generato da questa e migliore del codice mediorealizzato da un programmatore umano. Nonostante le diffidenze e il man-cato appoggio di grandi software house Lars Bak, uno dei creatori di Dart,e convinto che nel giro di 5 anni il linguaggio si affermera.

1.1 Dart: Obiettivi e Strategie

Dart nasce per risolvere i problemi derivati da un massiccio utilizzo diJavaScript, secondo i creatori di Dart questi problemi sono:

• Piccoli script a volte diventano delle grandi applicazioni senza unastruttura, questo rende molto difficile sia il debug che la manutenzionedel codice. Inoltre queste grandi applicazioni non possono essere sud-

1.2 Dart: Cosa c’e di Nuovo? 3

divise e questo significa che team diversi non possono lavorare indipen-dentemente sul codice, rendendo molto onerosa (in tempo) qualsiasimodifica.

• Nei linguaggi di scripting come JavaScript i collegamenti tra le varieparti di codice sono scritte nei commenti piuttosto che nella strutturadel linguaggio, questo rende difficile per chiunque diverso dall’autorecapire e modificare un particolare pezzo di codice.

• Prima dell’introduzione di Dart si doveva scegliere tra un linguaggiostatico o un linguaggio dinamico, dove quello statico richiedeva de-gli strumenti molto pesanti e uno stile per il codice molto rigido evincolato.

• Per ora quasi nessuno e riuscito a creare un sistema valido che com-prendesse sia il lato client che il lato server, solo GWT (Google WebToolkit)[9] e Node.js[15].

• Usare molti linguaggi comporta dei cambi di contesto molto frequentiche rendono piu complesso il processo di codifica.

Il team di sviluppo di Dart per evitare e risolvere i problemi appena elencatisi propone di creare e mantenere un linguaggio con le seguenti caratteristiche:

• Dovra essere strutturato ma estremamente flessibile.

• Dovra essere familiare e intuitivo oltre che di facile apprendimento.

• Yutti i costrutti di Dart dovranno garantire alte prestazioni e unostartup molto veloce.

• Dart dovra essere compatibile con tutti i dispositivi con accesso alWeb, come telefoni, tablet, server e computer.

• Fornira tutti gli strumenti necessari per ottenere alte prestazioni contutti i browser principali.

Dart quindi nasce per risolvere vari problemi e utilizzera un mix di costruttigia noti e di novita, tutto con piccole modifiche e adattamenti.

1.2 Dart: Cosa c’e di Nuovo?

I punti di forza di Dart oltre alla facilita di apprendimento, alla possibilitadi essere tradotto in JavaScript e all’adattabilita e comodita di utilizzo dellinguaggio sia per applicazioni semplici che per applicazioni piu complessesono descritti nel seguito.


1.2.1 Approcciarsi a Dart

Dart e stato progettato per essere di facile apprendimento e per incominciaread utilizzarlo velocemente bisogna tenere a mente che:

• Tutto cio che si mette in una variabile e un oggetto, tutti gli oggettisono istanze di una classe ed ereditano dalla Object class.

• Dart supporta gli oggetti di tipo dinamico, infatti quando dichiaria-mo una variabile non e necessario specificarne il tipo, con il costruttovar si puo dichiarare una variabile di tipo generico. Questo e utilequando si crea una variabile e non siamo certi di che tipo di dato leverra assegnato, una volta capito e buona norma specificare il tipo perla leggibilita futura del codice e per aiutare il compilatore a trovareeventuali errori.

• Supporta le funzioni top-level, come main(), e, ovviamente, tutte lefunzioni legate ad una classe od oggetto; la stessa cosa vale per levariabili.

• Un cambiamento importante rispetto alla classica sintassi di Java el’abolizione delle parole chiave public, protected e private. Per spe-cificare che un identificatore e privato basta che il suo nome inizi conil simbolo underscore (_). Ogni applicazione e una libreria anche senon usa il comando apposito.

• Dire che e un linguaggio a scope lessicale o statico significa che dipen-de dalla struttura del programma e puo essere stabilito a tempo dicompilazione. Lo scope statico consiste nel fatto che quando si usa unnome dentro a un blocco di programma l’associazione valida per quelnome e quella all’interno dello stesso blocco, solo in caso non si trovinodelle corrispondenze si considereranno quelle nel blocco esterno. Dartpermette di dare lo stesso nome a due variabili solo se queste si trovanoin blocchi di scope differenti, e in ogni caso genera un warning per ilprogrammatore.

• Ci sono due modi per compilare Dart, Production mode e Checkedmode. Il primo ha come obiettivo la velocita e ignora le istruzioniassert e i tipi statici, mentre il secondo viene utilizzato in fase discrittura del codice per rilevare errori a runtime.

1.2.2 Applicazioni End-to-End

Un grande cambiamento rispetto a JavaScript, che puo essere usato solodal lato client, e che Dart puo essere utilizzato per creare applicazioni sialato client che lato server. La libreria da utilizzare per le applicazioni lato


server e dart:io che contiene API per la gestione del file system, di streamdi dati, socket, processi, thread e connessioni HTTP, mentre la libreria dautilizzare per le applicazioni lato client e dart:html che permette di gestiree modificare il DOM (Document Object Model), di fare delle richieste HTTPe di modificare i fogli di stile.

1.2.3 Principali librerie

Ogni utente ha la possibilita di creare le proprie librerie, ma fin dal princi-pio ne sono state messe parecchie a disposizione del programmatore: core,HTML, I/O ,URI, UTF, Crypto e Math. Per libreria si intendono uno opiu file Dart collegati tra loro, una libreria puo contenere numerosi file sor-gente, classi e funzioni. Se contiene la funzione main() puo essere usataanche come applicazione a se stante. Il comando per definire una libreria elibrary nome_libreria e va posto prima del codice.

dart:core

La core library viene importata automaticamente da ogni programma Darte fornisce tutte le funzionalita di base necessarie per rendere un linguaggiodi programmazione utilizzabile. In questa libreria vengono definiti i tipi e lefunzioni per lavorare con i numeri, le stringhe, le collezioni di oggetti (List,Set e Map) e le date. Le funzioni contenute in questa libreria servono percreare, manipolare e combinare tra loro questi oggetti; sono funzioni chepermettono di trasformare, ad esempio, una stringa in un intero e viceversa,funzioni di ricerca e confronto. Nell’aprile 2013 la libreria core ha raggiuntolo stato stable, questo significa che non subira piu modifiche fino al rilasciodi Dart 1.0.

dart:html

Questa libreria deve essere sempre importata quando si realizza un’appli-cazione lato client, infatti serve per modificare il DOM (Document ObjectModel) e quindi modificare direttamente gli oggetti della pagina HTML. Imetodi fondamentali per questa libreria sono:

Element elem1 = query(’#id’);

Element elem2 = query(’.a-class’);

List<Element> elems1 = queryAll(’div’);

che servono rispettivamente per trovare un elemento con un certo id, trovareun elemento di una determinata classe CSS(Cascading Style Sheets) e pertrovare tutti gli elementi specificando il tag (oltre al tag si possono specificareuno o piu attributi). Una volta trovato l’elemento si potranno modificare diattributi dello stesso, oppure si potranno aggiungere o eliminare i suoi nodi


figli.Inoltre la gestione degli eventi viene effettuata proprio attraverso le duefunzioni sopracitate, ad esempio:

query("#sample_text_id").onClick.listen(reverseText);

con questa istruzione quando verra cliccato l’elemento sample_text_id verrarichiamata la funzione reverseText.Sempre in questa libreria sono definite le funzioni necessarie per effettuarerichieste al server, ma ne parleremo piu avanti nella sezione 1.4.2.

dart:io

Questa libreria puo essere importata solo nelle applicazioni lato server; con-tiene API per la gestione del file system, di stream di dati, socket, proces-si, thread e connessioni HTTP. In generale dart:io serve per implementa-re delle applicazioni asincrone, a causa delle frequenti interruzioni tipichedelle applicazioni sincrone. Implementa, comunque, alcuni metodi sincroniriconoscibili dal suffisso Sync.

dart:math

Puo essere importata in una qualsiasi applicazione e contiene le definizionidelle principali funzioni e costanti matematiche come cos e sin. Per renderepiu chiaro quali funzioni o variabili sono state ereditate dalla libreria siconsiglia di importare la libreria assegnandogli un nome e premettendo adogni sua variabile quel nome in modo da non creare ambiguita con altrevariabili, ecco un esempio:

import ’dart:math’ as math;

...

var radians = 30 * (math.PI / 180);

var sinOf30degrees = math.sin(radians);

dart:isolate

Le funzionalita di questa libreria verranno specificate nella sezione dedicataagli Isolate.

dart:json

JSON (JavaScript Object Notation) e un formato di testo che permette dirappresentare oggetti e collezioni attraverso delle stringhe. I principali uti-lizzi di JSON sono la comunicazione tra applicazioni scritte in linguaggi


diversi (infatti ormai quasi tutti i linguaggi di programmazione principaliimplementano una libreria per JSON) e per l’importazione di oggetti da fileJSON.Le funzioni presenti nella libreria permettono la codifica e la decodifica distringhe o oggetti di Dart in stringhe JSON, attraverso i metodi parse() estringify().

dart:uri

Questa libreria permette di codificare e decodificare le stringhe degli URI(Uniform Resource Identifier) gestendo i caratteri speciali e traducendoli ilcaratteri idonei ad un URI. I metodi implementati permettono di tradurrestringhe in URI utilizzabili, di scomporli nelle varie parti da cui sono for-mati (ad esempio, si riesce a separare il dominio dal percorso) e, date lecomponenti, di costruirne di nuovi.

dart:utf

La libreria UTF contiene i metodi per tradurre sequenze di byte codificaticon UTF-8, UTF-16 o UTF-32 in stringhe comprensibili da Dart.

dart:crypto

La libreria Crypto viene utilizzata per la crittografia, contiene dei metodiper generare codici di autenticazione, messaggi criptati e hash dei dati.

1.2.4 Isolate

Ormai tutti i moderni Web browser e le applicazioni per dispositivi mobiligirano su CPU multi core, per trarre vantaggio da questi processori separatidi solito gli sviluppatori ricorrono a processi con memoria condivisa che alungo andare possono complicare il codice e renderlo meno efficiente. Lanovita introdotta da Dart sono gli Isolate, strutture caratterizzate da unapropria memoria grazie alla quale lo stato del processo non e accessibile dal-l’esterno. Inoltre sempre grazie a questa memoria dedicata tutte le variabiliproprie dell’isolate sono invisibili e inaccessibili dall’esterno, l’unico modoche permette a due isolate di comunicare e scambiarsi informazioni e attra-verso dei messaggi.I messaggi in questione possono contenere solo determinati tipi di dato cioevalori primitivi come stringhe, numeri, booleani, un’istanza di SendPort op-pure liste o mappe di valori primitivi, solo in alcuni casi possono contenereanche un oggetto di un qualsiasi tipo. Le variabili contenute nei messaggisono delle copie, quindi le modifiche effettuate su di esse non avranno riscon-tro sulle variabili originali finche non verra inviato un messaggio di risposta

1.3 Strumenti 8

con i dati modificati. Tutto il codice di Dart gira in isolate, infatti anchela funzione main() e contenuta nell’isolate principale (root isolate) e quindi,come tutti gli isolate, ha una porta di ricezione (ReceivePort) per i messaggiin arrivo dagli altri isolate. Non esiste una regola generale che dice quandocreare un isolate, vengono pero creati per ogni script separato (contenenteun main()) contenuto in una pagina Web ed e consigliabile utilizzarli quan-do si richiama una funzione con un tempo di elaborazione molto lungo. Diseguito un esempio di codice:

import ’dart:isolate’;

echo() {

port.receive((msg, reply) {

reply.send(’I received: $msg’);

});

}

main() {

var sendPort = spawnFunction(echo);

sendPort.call(’Hello from main’).then((reply) {

print(reply); // I received: Hello from main

});

}

In questo esempio viene passato il punto di accesso all’isolate alla funzionespawnFunction(), e sara il metodo call() a creare la porta per l’invio e laricezione dei messaggi.

1.3 Strumenti

Come Java anche Dart per essere usato ha bisono di alcuni strumenti, co-me la sua Virtual Machine, il compilatore da Dart a JavaScript, l’analiz-zatore sintattico necessario per il debug e il Package Manager. Tutti que-sti oggetti sono disponibili per il download sul sito ufficiale del linguaggio(www.dartlang.org) in due forme:

• Dart Editor, fornisce una piattaforma per lo sviluppo e include tuttoil necessario per programmare ed eseguire il debug delle applicazioni;

• Per coloro che non volessero usufruire dell’editor, possono essere sca-ricate singolarmente le componenti necessarie per far girare il codice.

1.3.1 Dart Package Manager

Un Dart Package non e altro che un’insieme di librerie, fogli di stile, immagi-ni e documentazione che possono essere integrati nella propria applicazione.

1.3 Strumenti 9

Il concetto di package nasce a causa della possibilita di importare librerienei file che definiscono altre librerie, un package contiene la libreria che sivuole utilizzare piu tutte le librerie che servono per utilizzarla.Il Dart Package Manager (chiamato anche pub) serve ad agevolare la condi-visione e il riutilizzo di codice scritto in Dart impacchettando applicazioni elibrerie in modo da essere condivise agevolmente con altre persone. I packagedi Dart si possono trovare ovunque sul Web ma il posto piu sicuro dove re-perirli e sul sito ufficiale pub.dartlang.org, dove bastera copiare il nome delpacchetto desiderato e aggiornare (creare) il file pubspec.yaml nella nostraapplicazione e infine installarlo con il comando pub install.

Il codice nel file pubspec.yaml avra questa forma:

name: my_app

dependencies:

web_ui: any

nell’applicazione my_app verra importato il pacchetto web_ui in una qualsiasiversione.

1.3.2 SDK

La SDK (Software Development Kit) e un pacchetto per lo sviluppo di appil-cazioni e contiene gli strumenti essenziali per lo sviluppo e documentazionedi un software. La SDK di Dart viene scaricato insieme all’editor oppurepuo essere scaricato anche separatamente e contiene:

• La Virtual Machine di Dart;

• dart2js, il compilatore da Dart a Javascript;

• dartanalyzer, trova errori e warning;

• dartdoc, genera la documentazione per il codice scritto;

• pub, Dart Package Manager.

1.3.3 Dart Editor

L’editor di Dart e uno strumento open-source per applicazioni Dart. Sappia-mo gia che Dart ha l’obiettivo di risultare familiare e di facile apprendimen-to per chi migra da altri linguaggi e per i programmatori meno esperti, perquesto motivo ha basato l’editor su Eclipse, visto almeno una volta da tutticoloro che si sono avvicinati a Java e molto intuitivo per quanto riguardal’utilizzo. L’editor di Dart viene fornito nelle tre versioni per Windows (daVista in poi), per Linux e per Mac e viene aggiornato automaticamente circa

1.3 Strumenti 10

una volta alla settimana.Non ha bisogno di un’installazione vera e propria, infatti basta estrarre i filecontenuti nello zip scaricato ed e subito pronto per l’utilizzo.Da questa immagine si puo notare la somiglianza strutturale con Eclipse: Il

Figura 1.2: Il Dart Editor

file zip scaricato oltre all’editor contiene l’SDK e Dartium.

Per coloro che non vogliono rinunciare all’ambiente di sviluppo a cui sonoabituati o che semplicemente vogliono integrare Dart nelle loro applicazioni,vengono messi a disposizione dei plugin per altri editor e IDE come Eclipse,Intellij IDEA, Sublime e VIM.

Plug-in per Eclipse

Tra tutti i plugin il team di sviluppo di Dart pone un accento su quello perEclipse. Vista la grande somiglianza dell’editor di Dart con Eclipse le mo-tivazioni che possono spingere un programmatore a installare questo pluginpossono essere il desiderio di creare un’applicazione che utilizza entrambiJava e Dart oppure piu semplicemente il non volere perdere le impostazionipersonalizzate a cui e abituato. Analizziamo il caso in cui si voglia creareun’applicazione con Java sul server e con Dart sul client. I passi da seguiresono:

• Procurarsi o avere una versione di eclipse dove installare il plugin diDart;

• Installare Dartium nella cartella di Eclipse

1.3 Strumenti 11

• Creare un progetto Dart, a questo punto il codice Dart potra essereeseguito in Eclipse e la struttura del progetto sara quella classica diDart:

Da questo punto inizia il procedimento per poter usare Java come lin-guaggio per la parte server dell’applicazione

• Installare il plugin Maven e trasformare l’applicazione Dart in un’ap-plicazione Dart e Maven, la struttura del progetto sara questa:

• Ora che il progetto e sia Java che Dart, bisogna convertirlo in unprogetto Dinamico per il Web in modo da poterlo poi aggiungere aTomcat, a questo punto la struttura sara:

1.3 Strumenti 12

• Ora si deve associare il progetto al server

• Il progetto per adesso riconosce i file Java ma non i file Dart, quindisi devono aggiungere al Web Deployment Assembly

A questo punto il progetto Dart-Java girera su Tomcat e file Dart potrannoessere serviti da file Java. Esistono, comunque, altri metodi per associareDart a Java continuando ad utilizzare l’editor di Dart separato da Eclipse.

Dart VM e dart2js

La Dart VM e dart2js sono il cuore del linguaggio, infatti Dart puo girare soloin un browser che implementano la sua virtual machine, in caso contrariodovra essere compilato in JavaScript.Per ora l’unico browser che implementa la Dart VM e Dartium, una specialeversione di Chromium, che viene fornito nel momento in cui si scarica l’editorche vi eseguira l’applicazione per default. Ovviamente si puo scegliere di fargirare direttamente l’applicazione su un browser differente e in quel casoentra in gioco dart2js, che traduce il codice Dart in codice ECMAScript5compatibile con JavaScript. Il codice tradotto funziona su tutte le ultimeversioni dei principali browser. A causa del bisogno di compilare codice Dartin JavaScript, Google ha dovuto non solo non abbandonare lo sviluppo diV8 (motore di JavaScript) ma addirittura incrementare gli sforzi per unasua evoluzione in parallelo ad una evoluzione sistematica e sostanziale didart2js in modo da incrementare la prestazioni di Dart compilato.

1.4 Prestazioni 13

Figura 1.3: Diagramma di compilazione di Dart

1.4 Prestazioni

Come e gia stato detto l’obiettivo di Dart e sostituire JavaScript, se noncompletamente almeno per le applicazioni piu grandi che con JavaScript ri-sultano molto complesse. Convincere chi si avvicina per la prima volta alweb non e difficile, basta un bella grafica con una presentazione accattivante,il problema e convincere un veterano di JavaScript ad imparare un nuovolinguaggio nato per semplificare le cose quando per lui le cose sono gia sem-plici, come fare? Google ha pensato di puntare sulle prestazioni.Gia nel 2008 un team capitanato da Lars Bak presento V8 il motore diJavaScript per Google Chrome che ne incremento le prestazioni facendolgliacquisire una larga fetta di mercato tra gli altri browser. Bak, non a caso, ea capo del gruppo di sviluppatori della Dart VM, con lo scopo di superare irisultati che aveva gia ottenuto con V8 e ci e riuscito, le prestazioni di Dartsono sorprendenti.Per confrontare le prestazioni dovremo utilizzare dei benchmark, cioe uninsieme di test software per valutare le prestazioni da vari punti di vistatecnici. I test pubblicati da Google sono stati effettuati su tre benchmarkdifferenti (tutti basati sulla tecnologia di Octane[16]):

• DeltaBlue, l’attenzione e focalizzata sul polimorfismo e sulla pro-grammazione ad oggetti;

1.4 Prestazioni 14

• Richards, focalizzato sugli accessi e le chiamate di funzioni e metodi;

• Tracer, il test eseguito con questo metodo non e imparziale, infattiTracer focalizza l’attenzione sull’emulazione delle classi da parte diJavaScript, ma Dart implementa le classi nativamente, quindi verraconfrontato con un JavaScript potenziato che gira il 50% piu veloce diquello originale.

1.5 Integrazione tra Dart e Altri Ambienti 15

Si nota come in tutti i test Dart sia migliore di V8 e come nel test conDeltaBlue addirittura il codice compilato con dart2js sia piu veloce, questosignifica che produce codice JavaScript migliore rispetto alla media del codicescritto a mano. Tutti i grafici si riferiscono al primo semestre del 2013 esono stati effettuati con una macchina con queste caratteristiche: processoreIntel(R) Core(TM) i5-2400 CPU @ 3.10GHz con Ubuntu 12.04 LTS x64come sistema operativo.

1.5 Integrazione tra Dart e Altri Ambienti

Se la globalizzazione rende sempre piu necessario per le persone conosce nuo-ve lingue, culture e usanze, la stessa cosa accade per il linguaggi di program-mazione. Un linguaggio di programmazione deve conoscere il modo o averegli strumenti per interagire con applicazioni o parti di applicazioni scrittein altri linguaggi. Agli utenti di Dart capitera molto spesso di dover crearesolo la parte client di un’applicazione da collegare ad un server in un altrolinguaggio, quindi la conoscenza delle librerie che permettono tale comuni-cazione diventera indispensabile per chiunque voglia creare un’applicazioneversatile e dinamica.

1.5.1 JSON

Il formato principale usato per lo scambio di dati nelle applicazioni client-server e JSON (JavaScript Object Notation). Dart e stato fornito di unalibreria che lo rende in grado di tradurre dati da e in JSON, quindi si puoaffermare che Dart e in grado di comunicare abbastanza agevolmente conaltri linguaggi.JSON e un liguaggio indipendente da qualsiasi altro linguaggio, ma utilizzadelle convenzioni utilizzate dalla maggior parte dei linguaggi di programma-zione, questo lo rende ideale come standard per lo scambio di dati. Supporta


fondamentalmente due strutture per i dati: gli oggetti e gli array, entrambigenerati da particolari insiemi di dati primitivi.

Ecco come vengono rappresentati i dati in JSON:

• un oggetto e una serie non ordinata di coppie nome-valore;

• un array e una raccolta ordinata di valori;

• un valore puo essere un qualsiasi tipo di dato;

• una stringa e una raccolta di zero o piu caratteri Unicode;


• un numero e come negli altri linguaggi.

I metodi presenti nella libreria dart:json servono principalmente a tradurrele stringhe che descrivono gli oggetti, quando si scrive una stringa JSONbisogna prestare attenzione ad usare i doppi apici (”).

1.5.2 HTTP Request

Ogni pagina caricata dal Web ha generato una HTTP GET request da partedel Web browser nei confronti del server che ha risposto con una HTTPresponse contenente la pagina desiderata o un messaggio di errore. Questasemplice constatazione ci da un’idea di cosa puo servire per effettuare unarichiesta al server con Dart: un URI (Uniform Resource Identifier) o piuspecificatamente un URL (Uniform Resource Locator), il tipo della richiesta


che potra essere GET o POST e infine le funzioni definite in apposite librerieper eseguire tali richieste.Le funzioni per effettuare le richieste HTTP sono implementate nelle libreriedart:html e dart:io, i metodi di richiesta piu usati sono:

• GET e usato per ottenere il contenuto della risorsa indicata come URI;

• POST e usato per inviare informazioni al server.

Il parametro URI puo rappresentare l’indirizzo di un file JSON da cui im-portare oggetti di varia natura. Gli step da seguire per eseguire una risorsasono:

• Creare un oggetto HttpRequest

• Aprire la connessione con l’URL, specificando uno dei due metodi GETo POST

• Specificare come verra gestita la risposta del server

• Inviare la richiesta

Segue un esempio di come richiedere dei dati al server:

HttpRequest request = new HttpRequest();

String url= "http://www.undominioacaso.org/qualcosa";

request.open(’GET’, url, async : false);

request.onLoad.listen((e) => OnLoadSuccess(request));

request.send();

Purtroppo questo frammento di codice non funzionera, infatti tutti ibrowser hanno delle forti restrizioni di sicurezza, in particolare ogni risorsarichiesta da un’applicazione Web dovra provenire dalla stessa origine, quindila risorsa richiesta dovra avere lo stesso protocollo, lo stesso host e dovrapassare dalla stessa porta dell’applicazione. Questo implica che l’applicazio-ne non potra eseguire quasi nessuna richiesta attraverso il Web, rendendoquesti metodi quasi inutilizzabili. Fortunatamente esistono parecchi metodiper aggirare questa restrizione, tra cui i CORS[3], uno standard che cominciaad essere supportato dai server, e JSONP[12].

CORS

I CORS (Cross-Origin Resource Sharing) servono per gestire le Cross-siteHTTP request , cioe richieste HTTP di risorse appartenenti a domini di-versi da quello di origine. Purtroppo e una situazione che si presenta moltofrequentemente nel Web, infatti la maggior parte delle pagine effettua dellerichieste per fogli di stile, immagini, script e molto altro ad altri domini.


Ovviamente tutte queste richieste vengono bloccate dai sistemi di sicurezzache salvaguardano la regola che tutte le richieste devono essere fatte per ri-sorse appartenenti al dominio di origine. Una soluzione consigliata anche dalWeb Application Working Group e da W3C, sono i CORS, e un meccanismoche permette ai server di supportare ed abilitare il trasferimento di dati traorigini diverse.Ma cosa accade realmente quando si utilizzano i CORS? I cambiamenti av-vengono sul lato server dell’applicazione, infatti deve essere il dominio a cuiappartiene la risorsa a dichiarare attraverso dei nuovi header l’insieme diorigini che hanno il permesso di effettuare delle richieste. Oltre a potere fil-trare l’origine delle richieste il server contenente la risorsa puo imporre dellecondizioni aggiuntive, cioe puo permettere le richieste solo se utilizzano certimetodi, oppure richiedere delle credenziali che dovranno essere inviate insie-me alla richiesta.I CORS non hanno avuto uno sviluppo molto rapido, pero a maggio 2013sono supportati da tutti i browser per desktop e dispositivi mobili, a parteOpera Mini.

JSONP

JSONP e l’acronimo di JSON with Padding, e un metodo che permette diaggirare le restrizioni dovute alla same-domain-policy permettendo cosı diaccedere a risorse remote indipendentemente dall’origine. JSONP si basasul fatto che si possono collegare degli script esterni con un qualsiasi tag<script> interno alla pagina di origine. Questo metodo funziona percheinvece che richiedere direttamente i dati JSON, la richiesta viene incorporataad una funzione callback di JavaScript. Quando la pagina carica lo script dalserver esterno lo esegue e passa i dati clandestini alla funzione di callback,in questo modo i dati saranno stati ricevuti correttamente.Questo metodo e molto oneroso, infatti nel momento in cui i CORS sarannolargamente supportati, sara preferibile abbandonare JSONP.

Capitolo 2

Push degli Eventi

Le moderne applicazioni Web sono progettate per essere sempre piu dina-miche, quindi devono essere costantemente aggiornate nel caso occorra unqualche evento che interessa.Normalmente quando un browser visita una pagina Web viene inviata unarichiesta HTTP dal client al server che ospita la pagina, dopodiche il servervaluta la richiesta e manda una risposta al client contenente la pagina de-siderata o un messaggio di errore. In molti casi le informazioni inviate dalserver sono dati che variano nel tempo, questo costringe gli utenti a aggior-nare la pagina ogni volta che hanno bisogno di dati puntuali e ovviamentequesta opzione non e accettabile. Fino al 2011 (anno di standardizzazionedelle tecnologia WebSocket) si doveva ricorre a delle tecniche, conosciutecon il nome di Comet, per permettere al server di mantenere aperta la co-municazione (ritardando il completamento della risposta) e di inviare cosıaggiornamenti al client non appena questi sono disponibili. Il push basatosulle tecnologie Comet di solito viene realizzato in JavaScript e utilizza dellestrategie di connessione come il Long Polling o lo Streaming.

2.1 Concetti di Base

Per poter parlare di Push degli eventi, browser e richieste HTTP bisognaavere ben chiaro l’ambiente in cui si lavora e i concetti alla base di tuttequeste tecnologie.In Internet le informazioni vengono trasportate grazie a degli appositi pro-tocolli di connessione TCP/IP, che definiscono il metodo per condividere leinformazioni tra computer, con la certezza del loro arrivo. TCP/IP alle-ga al messaggio delle informazioni aggiuntive come origine, destinazione echecksum (un valore utilizzato per verificare che tutte le informazioni sia-no state ricevute correttamente). La diffusione della rete e dovuta pero

2.2 Comet 22

al protocollo HTTP che fornisce un livello di astrazione e impacchetta leconnessioni TCP/IP insieme alle informazioni relative alla richiesta, HTTPfornisce un’interfaccia di richiesta e risposta per pagine Web e immagini.L’evoluzione nello sviluppo delle applicazioni Web nei primi anni 2000 portaall’introduzione di AJAX(Asynchronous JavaScript and XML), un metodomolto utile per recuperare i dati da un server. AJAX e un’interfaccia attra-verso la quale JavaScript puo creare una richiesta HTTP e gestire la rispostain modo asincrono, grazie a questa tecnologia gli utenti non sono piu obbli-gati a ricaricare la pagina per visualizzare i dati aggiornati. HTTP e rimasoinvariato fin dal 1999, supportando la trasmissione di dati tramite connes-sioni create appositamente per i singoli messaggi e distrutte subito dopo.Con lo sviluppo delle applicazioni Web e cresciuta la necessita di comuni-cazioni in tempo reale, queste comunicazioni usate nelle chat e nei giochionline si basano su un abuso del protocollo HTTP attraverso polling AJAXe connessioni persistenti Comet. Questi metodi possono raggiungere il loroscopo (emulare una connessione real-time), ma peccano di inefficienza e com-plessita. E in questo ambiente che viene introdotta la specifica WebSocket,basata su TCP, che permette dei collegamenti bidirezionali persistenti edefficienti tra browser e server web. La tecnologia Pull e la classica comuni-cazione tra client e server, dove il client inizia la comunicazione eseguendouna richiesta e il server la chiude inviando la risposta. Questo concetto egia stato introdotto, ma e importante sottolinearlo perche tutti i sistemiper eseguire il Push degli eventi posso essere emulati da frequenti Pull. Unesempio di questo fenomeno e la notifica delle e-mail, dove sembra che ilserver avvisi il client quando arrivano nuovi messaggi, in realta e il clientche periodicamente esegue una richiesta al server.

2.2 Comet

Comet e l’insieme delle tecnologie che attuano la strategia di rimandare laterminazione della risposta in modo da tenere aperta la connessione con ilserver che puo cosı inviare messaggi non appena questi sono disponibili. IlPush degli eventi descrive uno stile di comunicazione per i sistemi basati sulWeb dove e il server che inizializza la comunicazione con il client. Solita-mente viene sottoscritto un accordo tra client e server dove il client si iscrivea determinati aggiornamenti che il server e autorizzato ad inviare automa-ticamente. La forma piu pura di Push degli eventi e il broadcast, dove i dativengono inviati a chiunque abbia accesso ad un particolare canale di comu-nicazione o frequenza. Esistono vari metodi per attuare questa politica, trai piu importanti ci sono HTTP streaming e Long Polling.

2.2 Comet 23

2.2.1 HTTP Streaming

L’HTTP server push o HTTP streaming e una tecnica che permette ad unWeb server di inviare dati ad un Web client. Con lo streaming il browserinvia una richiesta completa al server, questo invia la risposta senza maicompletarla, in modo da mantenere aperto il canale di comunicazione. Larisposta viene aggiornata ogni volta che un messaggio e pronto per essereinviato. I problemi derivanti da questa tecnica sono che il browser rimanesempre in uno stato di caricamento anche se i dati che compongono la paginasono stati tutti ricevuti, inoltre il server non ha nessun tipo di controllo sultempo di time-out del browser, questo rende necessario ricaricare la paginaogni volta che questo tempo scade.L’HTTP Streaming si puo schematizzare in questo modo:

Figura 2.1: Rappresentazione schematica di HTTP Streaming

2.2.2 Polling e Long Polling

Il Polling e una tecnica in cui il client invia delle richieste al server ad in-tervalli regolari per verificare se ci sono aggiornamenti disponibili, il serverrisponde immediatamente con dei dati o con un messaggio vuoto. Il pollinge stato il primo tentativo per simulare uno scambio di dati tra server e clientin tempo reale ma purtroppo si rivela efficiente solo quando si conosce l’in-tervallo di tempo esatto in cui i dati vengono aggiornati e nei sistemi realil’aggiornamento non ha cadenza regolare, quindi in un periodo con pochiaggiornamenti verrebbero aperte e chiuse troppe connessioni inutili.Il Long Polling e una variazione del Polling tradizionale e permette di emu-

2.2 Comet 24

lare il meccanismo di push anche quando questo non sarebbe realmenteeffettuabile. Come nel polling normale il browser continua a mandare dellerichieste al server, la differenza tra i due metodi e che mentre il server con ilpolling normale risponde immediatamente con una risposta vuota, nel LongPolling trattiene la risposta finche non avra dati da inviare al client o nonraggiungera un tempo limite. Va sottolineato il fatto che in periodi con unelevato numero di messaggi il long polling non ha performance migliori delpolling tradizionale, anzi in certi casi potrebbe rilevelarsi la scelta peggioretra le due.Schematicamente la differenza tra i due metodi e questa:

Figura 2.2: Differanza tra Polling e Long Polling

2.2.3 BOSH

BOSH (Bidirectional-streams Over Synchronous HTTP) e un protocollo ditrasporto che emula uno stream bidirezionale tra client e server usando unaserie di richieste HTTP sincrone senza dover ricorrere al polling. Per le ap-plicazioni che richiedono un tipo di comunicazione sia Push che Pull, BOSHdimostra essere molto piu efficiente e reattivo della maggior parte dei proto-colli di trasporto HTTP e delle tecniche AJAX. E’ uno standard per i servizidi messaggistica istantanea ma non e legato a questo tipo di tecnologie, in-fatti puo essere usato per molti atri tipi di traffico.

Tutti questi metodi simulano una comunicazione in tempo reale tra ser-ver e client, purtroppo in questa comunicazione sono coinvolti gli header

2.3 HTML5 WebSocket 25

delle richieste e delle risposte che contengono molti dati aggiuntivi inutilie che introducono una certa latenza nella comunicazione. Inoltre i sistemibidirezionali richiedono piu di un solo canale di ricezione tra server e client,hanno bisogno di un altro canale per l’invio delle risposte. La gestione di duecanali di comunicazione comporta un sovraccarico nell’utilizzo delle risorsee un notevole aumento della complessita.Infine, si puo dire che le soluzioni Comet sono in grado di simulare una co-municazione bidirezionale in tempo reale, ma a discapito dei costi, maggiorelatenza, traffico di rete non necessario ed effetti negativi sulle prestazionidella CPU.

2.3 HTML5 WebSocket

Definiti nella sezione Connettivita delle specifiche di HTML5, i WebSocketHTML5[23] rappresentano un’evoluzione della comunicazione sul Web per-mettendo di utilizzare un canale di comunicazione bidirezionale full-duplexche opera attraverso un unico socket. I WebSocket HTML5 forniscono unostandard per creare applicazioni real-time, inoltre fornisce un socket creatoappositamente per il browser, eliminando cosı molti problemi delle tecnicheComet. I WebSocket riducono la latenza delle informazioni perche una voltache la connessione WebSocket e stabilita il server puo mandare messaggi alclient non appena questi diventano disponibili. Ad esempio, diversamentedal polling, i WebSocket inviano una sola richiesta e successivamente sia ilclient che il server non dovranno aspettare ad inviare messaggi e ne potrannomandare anche molti di seguito.Per stabilire una connessione WebSocket il client e il server si devono ag-giornare dal protocollo HTTP al protocollo WebSocket durante l’handshakeiniziale, in questo modo:

GET /text HTTP/1.1

Upgrade: WebSocket

Connection: Upgrade

Host: www.websocket.org

...

HTTP/1.1 101 WebSocket Protocol Handshake

Upgrade: WebSocket

Connection: Upgrade

Una volta stabilita la connessione i pacchetti dati dei WebSocket posso-no essere inviati dal client al server e viceversa in una comunicazione full-duplex, i dati inviati possono essere sia di tipo testuale, sia ti tipo binario.I WebSocket supportano diversi tipi di client.Le ragioni per usare i WebSocket sono molte:


• I WebSocket rendono la comunicazione in tempo reale molto piu effi-ciente risparmiando in traffico di dati, utilizzo di CPU e in latenza.

• Rendono la comunicazione tra client e server molto piu semplice. Man-tenere aperta una connessione con i metodi di Push e molto difficile elaborioso, inoltre usare i metodi HTTP per casi limite aumenta drasti-camente la complessita del codice, invece i WebSocket sono stati creatiappositamente per questi scopi e sono stati progettati per semplificaretutto questo processo.

• I WebSocket non sono altro che un protocollo di rete che permette dicostruire altri protocolli su di se, questo permette di creare applicazionipiu flessibili.

2.3.1 HTML5

HTML5 e un’evoluzione di HTML regolamentata da una serie di specifi-che gestite da W3C (World Wide Web Consortium) e da un gruppo di la-voro WHATWG (WEb Hypertext Application Technology Working Group).HTML5 e in continua evoluzione e si prevede che le specifiche saranno com-pletate nel 2014.HTML5 introduce delle innovazioni per soddisfare tutte le esigenze di inte-razione e multimedialita richieste dalla maggioranza delle applicazioni Web,per esempio per permettere all’applicazione di salvare delle informazioni suldispositivo, poter accedere all’applicazione anche in assenza di connessioneoppure per creare una cronologia di navigazione. In HTML5 convergono di-verse tecnologie, oltre all’originale HTML, per rendere piu facile e intuitivolo sviluppo per il Web. Gli standard definiti da W3C e coinvolti con HTML5sono:

• Semantica, offre una scelta di tag molto piu ampia, chiara e dedicata,ad esempio per i media sono stati introdotti i tag <audio> e <video>.Grazie all’utilizzo di RDF (Resource Description Framework) e di mi-crodati e microformati e stato possibile creare una chiave di interpre-tazione semantica in modo da rendere il Web maggiormente fruibileda utenti e programmi.

• Accesso ai dispositivi, le applicazioni Web posso accedere al dispositivorilevandone l’inclinazione o accedendo a fotocamere e microfoni, unesempio e l’invio di fotografie con Whatsapp[25] oppure l’applicazione’bolla’ che rileva l’inclinazione del dispositivo.

• Offline e gestione dei dati, permette alle applicazioni Web di avviarsipiu velocemente e di funzionare anche in assenza di connettivita graziea delle API per la gestione dei file e della memoria.


• Multimedia, grazie alla gestione di audio e video nativa, la riproduzionedi contenuti multimediali puo essere gestita senza dover ricorrere a deiplugin.

• Connettivita, Server Event e WebSocket permettono una connettivitapiu efficiente rendendo possibile la creazione di applicazioni real time,come chat e giochi.

• Prestazioni e integrazione, grazie all’impiego di XMLHttpRequest2 eWeb Worker e possibile creare applicazioni con prestazioni elevate econtenuti dinamici molto veloci.

• 3D, grafica ed effetti, grazie a SVG, canvas, WebGL e CSS3 si possonorealizzare effetti grafici d’impatto.

Fondamentalmente quando si parla di HTML5 si intende l’unione del markupdi HTML per la definizione dei contenuti, di JavaScript per la gestione delleinterazioni e dei comportamenti, di CSS3 per lo stile e della multimedialita,cioe la possibilita di gestire contenuti audio e video direttamente in loco.Per quanto riguarda il push degli eventi l’aspetto da approfondire e quellodella connettivita.

Figura 2.3: Componenti di HTML5

Connettivita di HTML5

L’area della connettivita di HTML5 include delle tecnologie come WebSocket,Server Event e Cross-Document Messaging. Queste API sono incluse nellespecifiche di HTML5 per aiutare a semplificare alcune aree in cui le limi-tazioni del browser impedivano agli sviluppatori di creare applicazioni Web


con un certo comportamento e dove il processo di sviluppo di applicazioniera diventato troppo complesso.Nel momento in cui le applicazioni cominciarono ad unire contenuti e ap-plicazioni da altri siti Web divenne necessario ai vari componenti poter co-municare tra di loro. Per raggiungere questo obiettivo venne introdottoCross-Document Messaging che permette una comunicazione sicura tra ri-sorse di origine diversa, questa tecnica definisce la postMessage API comemodalita standard di invio e ricezione di messaggi. Alle applicazioni cherichiedono di comunicare da origini diverse, il Cross-Drocument Messagingfornisce un modo per permettere a messaggi asincroni di essere passati travari contesti JavaScript.Le specifiche del Cross-Document Massaging inoltre chiarificano e ridefini-scono la sicurezza dei domini introducendo il concetto di origine, definitoda un sistema, un host e una porta. Cross-Document Messaging supera lalimitazioni di origine permettendo ai messaggi di essere scambiati tra originidiverse. Quando si manda un messaggio il mittente deve specificare l’originedel destinatario e quando si riceve un messaggio l’origine del mittente deveessere inclusa come parte del messaggio. L’origine del messaggio e fornitadal browser e non puo essere modificata. Da parte sua il destinatario delmessaggio puo decidere quali messaggi accettare e quali ignorare, una tec-nica comune e quella di redigere una lista di origini affidabili e accettaremessaggi solo da quelle.Cross-Document Messaging e un esempio di come HTML5, grazie a delleAPI funzionali, semplifichi la comunicazione tra applicazioni Web. In ognicaso il suo potere e limitato alla comunicazione tra finestre, tabelle e iFrame.Non abbatte le difficolta presenti nei protocolli di comunicazione e questoporta all’introduzione dei WebSocket.

2.3.2 WebSocket API

La WebSocket API e un’interfaccia che permette alle applicazioni di usa-re il protocollo WebSocket, usando questa API si puo controllare il canaledi comunicazione full-duplex attraverso il quale l’applicazione invia e rice-ve messaggi. L’interfaccia dei WebSocket e molto diretta e facile da usare.Per connettersi ad un host remoto bisogna semplicemente creare una nuo-va istanza di un oggetto WebSocket e dotarlo di un URL rappresentante ilpunto finale della connessione. La connessione WebSocket e stabilita evol-vendo il protocollo HTTP nel protocollo WebSocket durante l’handshakeinziale tra il client e il server. Una volta stabilita la connessione WebSocket,i messaggi possono essere mandati avanti e indietro tra i metodi definitidall’interfaccia. Per gestire ogni fase della connessione nel codice dell’appli-cazione si utilizzano dei gestori degli eventi asincroni. L’API WebSocket ecompletamente guidata dagli eventi, una volta che la connessione e stabilitanon c’e piu bisogno di interrogare il server per una versione aggiornata dei

2.4 WebSocket e Dart 29

dati, piuttosto si puo dire che il client senta le notifiche e i cambiamenti.L’interfaccia WebSocket specifica i metodi disponibili per il client e comequesto comunica con la rete. Per iniziare ad usare i Websocket prima ditutto bisogna creare una connessione WebSocket chimando in contruttoreche restituira un oggetto WebSocket, dopodiche si ascolteranno gli eventi sutale oggetto. Gli eventi possono essere: l’aperture della connessione, l’arrivodi un messaggio, la chiusura della connessione e il verificarsi di un erro-re, gli unici modi per interagire con l’oggetto WebSocket sono mandare unmessaggio o chiudere la connessione.

2.3.3 WebSocket Protocol

I WebSocket mantengono molte delle cose positive di HTTP per le appli-cazioni Web, come le URL, la sicurezza dell’HTTP e lo scambio di datiattraverso messaggi, introduce pero nuove architetture di rete e nuovi sche-mi di comunicazione. Come TCP i WebSocket sono asincroni e possonoessere usati come livello di trasporto per i protocolli di livelli superiori. IWebSocket sono una buona base per tutti i protocolli di messaggistica e eper tutti quelli che servono per l’iteroperabilita dei server Web.I server possono mandare dati ai client in modo non sincrono, ma solo quan-do c’e una connessione WebSocket aperta, questa connessione viene stabilita,come sempre, dal client verso il server. Un Websocket server puo sempreagire da WebSocket client, tuttavia se il client e un browser non potra co-munque accettare una connessione che non ha iniziato. Grazie al WebSocketprotocolli asincroni che prima non erano facilmente utilizzabili dalle applica-zioni Web, ora possono essere usati molto agevolmente. TCP trasmette solostream di byte, cosı i confini del messaggio devono essere rappresentati daun protocollo di livello piu alto, i dati TCP possono essere distribuiti in piupacchetti IP o combinati in un un minor numero di pacchetti a discrezionedel sistema operativo. L’unica garanzia del TCP e che i byte arriverannoa destinazione ordinati. A differenza di TCP, WebSocket trasmette una se-quenza di messaggi discreti, costituiti da piu byte che arriveranno in ordinecome con HTTP. Siccome la limitazione dei messaggi avviene nel protocolloWebSocket si possono mandare e riceve messaggi separati senza incorrere inerori di frammentazione.

2.4 WebSocket e Dart

Dart e un linguaggio di programmazione nuovo e supporta le nuove tecno-logie e quindi anche il protocollo WebSocket. La librerie che implementanofunzioni per gestire la nuova tecnologia sono dart:html e dart:io. Per ini-ziare ad usare un WebSocket bisogna seguire alcuni semplici passi, prima

2.4 WebSocket e Dart 30

di tutto bisogna creare un oggetto WebSocket passando l’indirizzo verso ilquale si vuole stabilire una connessione come parametro, in questo modo:

var webSocket = new WebSocket(’ws://127.0.0.1:1337/ws’);

Dopo aver creato l’oggetto, per inviare dei dati bisogna usare la funzionesend()

sendMessage(String data) {

if (webSocket.readyState == WebSocket.OPEN) {

webSocket.send(data);

} else {

throw ’WebSocket not connected, message $data not sent’;

}

}

per ricevere i dati invece bisogna impostare un listener per i messaggi chericeve un oggetto di tipo MessageEvent il cui campo data contiene i datiinviati

webSocket.onMessage.listen((MessageEvent e) {

receivedMessage(e.data);

});

Gli eventi riguardantii WebSocket che si possono gestire sono l’apertura, lachiusura, gli errori e i messaggi.

connectToWebSocket([int retrySeconds = 2]) {

bool reconnectScheduled = false;

webSocket = new WebSocket(url);

scheduleReconnect() {

print(’web socket closed, retrying in $retrySeconds seconds’);

if (!reconnectScheduled) {

new Timer(new Duration(seconds:retrySeconds),

() => connectToWebSocket(retrySeconds*2));

}

reconnectScheduled = true;

}

webSocket.onOpen.listen((e) {

print(’Connected’);

});

2.5 Altri Metodi 31

webSocket.onClose.listen((e) => scheduleReconnect());

webSocket.onError.listen((e) => scheduleReconnect());

webSocket.onMessage.listen((MessageEvent e) {

_receivedEncodedMessage(e.data);

});

}

nell’esempio riportato viene creato un WebSocket, quando viene creata laconnessione stampa a terminale la parola Connected, se invece la connes-sione viene chiusa o si verifica un errore viene richiamata una funzione cheristabilisce la connessione.

2.5 Altri Metodi

Esistono altre tecnologie da usare insieme o in alternativa ai WebSocket:

Server-Sent Event

I WebSocket sono una buona scelta quando l’architettura richiede una comu-nicazione bidirezionale full duplex, tuttavia se l’applicazione richiede prin-cipalmente un servizio di broadcast o di push di informazioni e non richie-de l’interattivita (ad esempio news feed o previsioni meteo), allora usareEventSource API fornita da Server-Sent Event e una buona opzione. Server-Sent Event migliora alcune tecniche Comet, infatti e possibile usarlo comesintassi per l’HTTP di polling, long polling e streaming.Le connessioni sia dei WebSocket che di Server-Sent Event cominciano conuna richiesta HTTP, pero le loro performance e le loro capacita sono diverse.Ad esempio Server-Sent Events non puo mandare dati dal client al server esupporta solo messaggi di tipo testuale.

SPDY

SPDY [18] e un protocollo di rete creato da Google e supportato da un nu-mero sempre crescente di browser, tra cui Google Chrome, Opera e MozillaFirefox. L’obiettivo principale di SPDY e quello di aumentare le prestazionidelle pagine Web e quindi delle richieste HTTP, comprimendo gli header eunendo tutti i canali di comunicazione in uno unico. Mentre i WebSocketsono focalizzati sull’ottimizzazione della comunicazione tra la parte front-end dell’applicazione e il server, SPDY ottimizza la consegna del contenutodell’applicazione e le pagine statiche. SPDY e una forma evoluta di HTTP(stessa architettura e semantica), di cui ne risolve alcuni problemi intrinseci.

2.6 Comet vs. WebSocket 32

SPDY e WebSocket si puo dire che siano complementari, infatti una connes-sione basata su SPDY puo evolversi in una connessione di tipo WebSocket,usando appunto i WebSocket sopra SPDY, mantenendo gli aspetti miglioridi entrambe le tecnologie.

Web Real-Time Communication

Web Real-Time Communication (WebRTC) e un altro metodo per aumen-tare le capacita di comunicazione dei browser moderni. E una tecnologiapeer-to-peer per il Web, in cui i browser possono comunicare direttamen-te senza incanalare tutti i dati attraverso il server e include delle API chepermettono ai browser di comunicare tra di loro in tempo reale. Anchequesta tecnologia puo essere usata insieme ai WebSocket, soprattutto sel’applicazione interessata usa degli streaming di dati.

2.6 Comet vs. WebSocket

E gia stato detto che i WebSocket offrono prestazioni migliori rispetto aisistemi Comet, attraverso alcuni test si puo quantificare questo migliora-mento.Sono state comparate le prestazioni ottenute con il polling e quelle ottenutecon WebSocket. L’applicazione utilizzata per il confronto e un’applicazionemolto semplice e funziona cosı: una pagina Web invia una richiesta real-timeper uno stock di dati, lo fa eseguendo il polling con una Servlet Java ospi-tata su un Web server. I risultati del confronto sono impressionanti, infattiutilizzando la tecnica di polling, alla fine di tutto, il conteggio totale degliheader HTTP inviati per le richieste e le risposte ammonta a 871 byte senzaincludere nessun dato, mentre i dati per uno stock tipico si aggirano intornoai 20 byte. La stessa applicazione utilizzata con WebSocket produce sola-mente 2 byte di traffico inutile. Eseguendo un calcolo veloce e supponendouna situazione dove si ricevono 1000 messaggi, una in cui se ne ricevono10000 e una terza in cui i messaggi ricevuti sono 100000, la figura seguenterappresenta la quantita di dati inutili inviati e ricevuti nei tre casi e con idue metodi:


Anche per quanto riguarda la latenza le differenze sono notevoli, infattisupponendo che il tempo di viaggio di un messaggio dal server al browsersia di 50 millisecondi il polling introduce della latenza, perche il server puomandare la risposta al client solo quando la richiesta e stata trasmessa com-pletamente, quindi per inviare la risposta si dovra aspettare 50 millisecondiin piu per eseguire la richiesta. La figura seguente schematizza la differenzadi latenza tra i due metodi:

WebSocket rappresentano un enorme passo avanti per la realizzazionedi applicazioni real-time, riducono drasticamente la latenza delle informa-zioni e il traffico di dati inutili rappresentato dagli header, senza contare la


semplificazione di procedure e codice per realizzare il tipo di comunicazionerichiesta.

Capitolo 3

Realizzazione di una

Applicazione Dart con GUI

Il lavoro di tesi e stato svolto in FRAMeTech S.R.L. dove mi e stata affida-ta un’applicazione realizzata con GWT e mi e stato indicato l’obiettivo diricreare tale applicazione con Dart. L’applicazione assegnatami e un confi-guratore di porte che permette di creare una porta su misura con i relativiaccessori e di calcolarne un preventivo.Inizialmente e stato deciso di realizzare prima di tutto la parte grafica inmodo da capire, e usare in modo massiccio, le librerie base di Dart e poi dicollegare l’applicazione in Dart al server. Purtroppo il collegamento non estato effettuato per via dei numerosi cambiamenti da apportare all’applica-zione originale.Il lavoro svolto puo essere suddiviso in alcuni step:

• E stata creata con HTML e CSS la versione statica dell’applicazione;

• Sono stati eseguiti dei test sulla gestione degli eventi;

• E stato creato creato un file JSON che funge da database per l’appli-cazione, purtroppo la libreria per gestire i database in Dart era ancorain piena fase di sviluppo e troppo instabile;

• Una volta creato il ’database’ e stato possibile eliminare gran parte delcodice html in modo da crearlo dinamicamente all’avvio dell’applica-zione con Dart;

• Dopodiche e stato creato l’oggetto DoorType con i dati della configura-zione iniziale.

3.1 Funzionamento dell’Applicazione 36

3.1 Funzionamento dell’Applicazione

Al caricamento l’applicazione presenta una configurazione iniziale di default.Questa configurazione rispetta tutti i vincoli richiesti ma non e limitata nellescelte come invece succedera in seguito per le configurazioni successive. Ivincoli da rispettare sono che ad ogni collezione viene associato un certonumero di decorativi. Ogni decorativo puo avere fino a 7 tipi di pannello.Tutte le porte possono essere a battente o scorrevoli, in alcuni casi anche alibro. I tipi di stipiti e coprifili dipendono dal decorativo scelto, cosı come gliaccessori dipendono prevalentemente dal tipo di porta, e dal tipo di pannello.

La pagina iniziale presenta:

• In alto a destra e visualizzato il prezzo che cambiera in modo automa-tico a ogni scelta effettuata;

• A sinistra viene visualizzata (in grande) la configurazione corrente;

• Nella parte destra della pagina e presente una tabulatura dove vengonoeffettuate le scelte per la configurazione della porta;

• In fondo viene visualizzata una galleria di immagini per configurazioniiniziali.

Quando si seleziona una collezione dal menu a tendina al centro della paginaquesto viene disabilitato e il menu a tendina dei decorativi contiene solo le

3.1 Funzionamento dell’Applicazione 37

possibilita associabili alla collezione scelta, la stessa cosa succede nel riqua-dro in basso dove saranno visualizzate solo le porte di una certa collezione,altri cambiamenti analoghi avverranno nelle successive schede centrali. Vie-ne effettuata invece una selezione piu rigida quando si sceglie una porta dalriquadro in basso, in questo caso collezione, decorativi e tipo di porta sonogia aggiornati, le uniche altre scelte che rimangono da fare sono le dimen-sioni e gli accessori.La tabulatura nella parte centrale della pagina si puo concettualmente di-videre in tre parti, le prime tre schede (Generale, Decorativo e Tipo Porta)permettono di creare effettivamente la porta giocando con i gli aspetti fon-damentali del prodotto, le due schede successive (Stipiti & Coprifili e Acces-sori) dove il cambiamento avviene solamente nell’aggiornamento del prezzo,infine le ultime due sezioni (Riepilogo e Configurazioni) dove vengono vi-sualizzati tutti dati della configurazione attuale e dove vengono salvate leconfigurazioni precedenti. Di seguito le immagini dei particolari delle primetre schede (le altre non sono di particolare interesse grafico).Generale

Decorativo

3.2 Realizzazione con Dart 38

Tipo Porta

Da queste si inizia a creare la propria configurazione, scegliendo la migliorecombinazione tra le caratteristiche a disposizione.

3.2 Realizzazione con Dart

L’applicazione realizzata con Dart e costituita da due file Dart, un foglio distile, una pagina HTML, le immagini e tutte le librerie e i pacchetti utilizza-ti. Prima di iniziare a implementare questa applicazionesono state effettuateparecchie prove esterne per capire quale strada sarebbe stata la migliore daintraprendere, i maggiori problemi incontrati erano tutti dovuti al malfun-zionamento di un pacchetto ancora in fase di sviluppo (per i tab) oppure,davanti alla scelta se collegare o meno l’applicazione Dart all’applicazioneoriginale, sono sorti problemi anche ad inviare e ricevere dati da server ester-ni.Prima di entrare nei dettagli del codice e nella realizzazione grafica dell’ap-plicazione bisogna introdurre la libreria DoorType che servira a creare tuttele configurazioni di porte, per aggiornare la configurazione corrente con lescelte effettuate (e visualizzarle nella scheda di riepilogo) e per calcolare ilprezzo finale della configurazione. La libreria contiene una classe con questicampi rappresentano tutti gli aspetti fondamentali della configurazione:

library DoorType;

import ’dart:html’;

class Doortype {

String COLLEZIONE;

String COD_DECORATIVO;

String DECORATIVO;

String COD_TIPO_PORTA;


String TIPO_PORTA;

String COD_STRUTTURA_PANNELLO;

String STRUTTURA_PANNELLO;

String ALTEZZA;

String ALTEZZA_MAX;

String STIPITE;

String COD_STIPITE;

String FERRAMENTA;

String DIMENSIONE_STIPITE;

String COD_DIMENSIONE_STIPITE;

String COPRIFILO;

String DES_COPRIFILO;

String COD_COPRIFILO;

String NUM_COPRIFILO;

String IMBOTTE;

num SPESSORE_MURO_MIN;

num SPESSORE_MURO_MAX;

num LUCE_MIN;

num LUCE_MAX;

.....

}

Nella classe e presente un costruttore che assegna valori di default etutti i metodi per aggiornare gli attributi. Alcuni attributi sono collegatitra loro, quindi bastera modificarne uno per aggiornare automaticamenteanche l’altro, come succede nel caso di SPESSORE\_MURO\_MAX che aggiornaautomaticamente LUCE\_MAX:

setSPESSORE_MURO_MAX(num c){

SPESSORE_MURO_MAX= c;

LUCE_MAX=c-5;

}

Verra dichiarata una variabile globale porta di tipo DoorType, che rappre-sentera la configurazione corrente da aggiornare.La pagina HTML contiene solo lo scheletro della struttura della pagina, verracompletata all’avvio dell’applicazione. All’avvio vengono fatte due richiesteal server per dei file JSON, il primo contiene tutte le configurazioni inizialidi tutte le porte e serve per gestire tutte le visualizzazioni delle immagini,mente l’altro serve per gestire i due menu a tendina e contiene le relazionitra decorativi e collezioni. La gestione della prima richiesta e fondamentaleper creare la pagina, infatti dentro alla funzione di gestione vengono creati


tutti gli elementi del DOM che formano realmente la pagina. Questa e larichiesta:

HttpRequest requestporte= new HttpRequest();

var url= "porte.json";

requestporte.open(’GET’, url, async : false);

requestporte.setRequestHeader(’Content-type’,’application/json’);

requestporte.onLoad.listen((e) => OnLoadSuccess(requestporte));

requestporte.send();

il file porte.json richiesto e stato scritto a mano ma, essendo JSON unlinguaggio indipendente da tutti gli altri, si otterrebbe lo stesso risultatoanche se fosse stato creato da una servlet traducendo i dati estratti da undatabase. Il contenuto del file non e altro che un array di oggetti, dove ognioggetto ha questa forma:

{"COLLEZIONE":"CLASSICHE",

"COD\_DECORATIVO":"D01",

"DECORATIVO":"BIANCO",

"COD\_TIPO\_PORTA":"A1",

"TIPO\_PORTA":"BATTENTE",

"COD\_STRUTTURA\_PANNELLO":"P1",

"STRUTTURA\_PANNELLO":"CIECO LISCIO"}

dove le stringhe prima dei due punti sono i campi fissi e le stringhe doposono i valori. Si nota come i nomi dei campi siano gli stessi dell’oggettoDoorType, questo sottoinsieme di campi rappresenta la configurazione base,a cui si dovranno aggiungere gli accessori e i vari supplementi.La funzione OnLoadSuccess() che gestisce la risposta del server e fondamen-tale e funziona cosı: prima di tutto reimposta la configurazione e cancellatutti gli eventuali nodi figli dei tag su cui agira (questo perche viene usataanche per eseguire il reset delle configurazioni)

porta.resetDoor();

var select=query(’#image_container’);

var scr=query(’#scroll’);

var imd=query(’#imagedec’);

var prt=query(’#porte’);

select.children.clear();

scr.children.clear();

imd.children.clear();

prt.children.clear();


il metodo resetDoor() e stato definito nella libreria DoorType, nel rimanenteestratto di codice vengono usati dei metodi definiti in dart:html. Il metodoquery() trova l’alemento del DOM e l’istruzione ...children.clear() pren-de in considerazione i nodi figli dell’elemento selezionato e li cancella.Poi viene inserita l’immagine grande a sinistra corrispondente alla confi-gurazione corrente, i dati per recuperare l’immagine li prendo dall’oggettoporta:

String strporta = porta.COD_DECORATIVO + porta.COD_TIPO_PORTA

+ porta.COD_STRUTTURA_PANNELLO+".jpg";

var elem = new Element.html(’<img id="grande"

src="immagini/large/${strporta}" >’);

query(’#image_container’).nodes.add(elem);

per creare strporta viene eseguita una semplice concatenazione di stringheresa possibile dalla libreria dart:core, il secondo comando crea un elementoimg del DOM per aggiungere l’immagine alla pagina con il comando add. Aquesto punto si entra nel vivo dell’algoritmo, dove viene presa la rispostadel server (il file json) e lo utilizzo per popolare la pagina

var doors = json.parse(request.response);

assert (doors is List);

for (int i=0; i< doors.length; i++){

var door = doors[i];

assert(door is Map);

...

...

}

in questa prima parte viene tradotta la risposta JSON in un oggetto diDart, in questo caso e una lista e ogni oggetto nella lista e di tipo Map.Dopodiche per ogni oggetto door dovremo decidere come, cosa, dove e seaggiungere qualcosa nella pagina. Ad esempio nella sezione di immagini inbasso devo visualizzare tutti gli oggetti, ma ogni volta che cambia il valo-re di TIPO PORTA devo aggiungere un immagine con scritto il tipo dellaporta, nella seconda sezione dell’applicazione invece devo aggiungere tuttele immagini dei decorativi senza ripetizioni, quindi prima di aggiungere unelemento al DOM devo controllare che sia diverso dall’elemento aggiuntoprecedentemente, nella terza sezione il problema e analogo, devo far com-parire le immagini delle porte con un certo decorativo e un certo tipo diporta, ovviamente senza ripetizioni. Per eseguire queste selezioni (siccomenon ho a disposizione un vero database) devo scorrere l’array e agire in baseai valori dei singoli campi dell’oggetto.

if (i>0){


query(’#decoro’).disabled= false;

query(’#collez’).text=porta.COLLEZIONE;

query(’#decor’).text=porta.DECORATIVO;

query(’#tipopor’).text=porta.TIPO_PORTA;

query(’#pann’).text=porta.STRUTTURA_PANNELLO;

query(’#stip’).text=porta.STIPITE+" "+porta.COD_STIPITE;

query(’#imbo’).text=porta.IMBOTTE;

query(’#ferram’).text=porta.FERRAMENTA;

query(’#luce’).text=porta.LUCE_MIN.toString()+"x"

+porta.LUCE_MAX.toString();

query(’#maxing’).text=porta.SPESSORE_MURO_MIN.toString()+"x"

+porta.SPESSORE_MURO_MAX.toString();

Come si puo vedere i comandi utilizzati appartengono tutti alla libreriedart:html e dart:core, le prime due righe di codice abilitano i menu a ten-dina nella prima scheda, aggiornano l’oggetto porta. Ecco come appaionole prime tre schede dopo le chiamate alle funzioni di gestione delle rispostedel server (cioe all’avvio dell’applicazione):Generale


Decorativo

Tipo Porta

Gia analizzando anche solo questa funzione si capisce la grande importanzadel comando query della libreria dart:html.Dopo aver eseguito le due funzioni di gestione delle risposte del server l’appli-cazione e graficamente completa, pero manca ancora la gestione degli even-ti, ogni volta che un’immagine o un tasto viene premuto, nel main dovraapparire il collegamento dell’evento ad una funzione di gestione.

var imp=document.query("#porte");

imp.onClick.listen((e) => changeImageDoor(e, requestporte));

Nel frammento di codice qui sopra, quando viene premuto qualcosa (qualsiasicosa) nella scheda Tipo Porta viene richiamata la funzione changeImageDoor()


che distinguera se e stato cliccato uno spazio vuoto o un’immagine e in talcaso provvedera a visualizzare solo le immagini pertinenti alla scelta fatta,anche in questo caso graficamente cambieranno l’immagine grande, la galle-ria di immagini in basso e le prime tre schede, le altre schede subiranno deicambiamenti di contenuto ma sono per lo piu statiche. Di seguito le partipiu significative della funzione richiamata.

void changeImageDoor(MouseEvent event, HttpRequest request) {

Element clicked=event.target;

String img= clicked.id;

if (img != "" && img != "porte"){

...

...

String sub= img.substring(0,3);

String sub2= img.substring(3,5);

String sub3= img.substring(5,7);

if (sub3== "P9"){

sub3="P99";

}

In questo frammento di codice viene omessa la cancellazione dei nodi figli(come avviene nell’altra funzione) e viene eseguito il controllo che sia stataselezionata un’immagine controllando l’identificativo dell’elemento selezio-nato; il nome di ogni immagine contiene i codici di decorativo, tipo di portae tipo di pannello, siccome le immagini sono identificate dal proprio nomescomponendo l’identificativo si ottengono tutte le informazioni necessarieper eseguire una selezione e ripopolare nuovamente l’applicazione seguendocerti vincoli.Dopo aver effettuato questo controllo analogamente a quanto avviene nel-la funzione precedente viene processato il file passato dal server, vengonoanalizzati tutti gli oggetti al suo interno e vengono scelti solo quelli cherispettano certi vincoli.

...

if (door["COD_DECORATIVO"]== sub && door["COD_TIPO_PORTA"]==sub2

&& door["COD_STRUTTURA_PANNELLO"]==sub3){

String imgdec = door["COD_DECORATIVO"]+".jpg";

String imgdes = door["DECORATIVO"];

String imgtip = door["TIPO_PORTA"];

porta.setCOD_DECORATIVO(sub);


porta.setCOD_TIPO_PORTA(sub2);

porta.setCOD_STRUTTURA_PANNELLO(sub3);

porta.setDECORATIVO(door["DECORATIVO"]);

porta.setCOLLEZIONE(door["COLLEZIONE"]);

...

}

In questo frammento di funzione l’oggetto porta viene aggiornato con i va-lori dedotti dal nome dell’immagine e successivamente verra aggiornata lagrafica dell’applicazione, nella galleria di immagini appariranno solo portecon un determinato decorativo, mentre sia nella seconda scheda che nel-la terza apparira solo un’immagine, nella seconda il decorativo della portaselezionata e nella terza proprio l’immagine cliccata.



...

TableElement table=new Element.html(’<table ...><tr id="imgport${i}">

</tr><tr id="portdesc${i}" bgcolor="#8a8a8a">

</tr><tr id="portipo${i}" ...></tr></table>’);

var elemd=new Element.html

(’<img id="${img}" src="immagini/small/${img}"...>’);

var dec= new Element$.html(’<div align="center" ...>${imgdes}</div>’);

var tip= new Element.html(’<div align="center" ...>${imgtip}</div>’);

query(’#porte’).nodes.add(table);

query(’#imgport${i}’).nodes.add(elemd);

query(’#portdesc${i}’).nodes.add(dec);

query(’#portipo${i}’).nodes.add(tip);

String tipos = door["TIPO_PORTA"].toLowerCase()+"_ph.png";

var tipo=new Element.html(’<img src="immagini/system/${tipos}"...>’);

query(’#scroll’).nodes.add(tipo);

...

}

Questo frammento di codice visualizza l’immagine selezionata nella terzascheda, aggiungendo, come e successo in precedenza, degli elementi al DOM.La funzione continua a popolare il resto della pagina:




...

if (door["COLLEZIONE"]=="COMPOST"){

TableElement table=new Element.html(’<table ...><tr id="imgtab${i}">

</tr><tr id="imgdesc${i}" ...>

</tr></table>’);

var elemd = new Element.html

(’<img id="${sub}" src="immagini/small/CompLogo.jpg" ...>’);

var desc= new Element.html(’<div align="center" ...>${imgdes}</div>’);

query(’#imagedec’).nodes.add(table);

query(’#imgtab${i}’).nodes.add(elemd);

query(’#imgdesc${i}’).nodes.add(desc);

}

else{

TableElement table=new Element.html(’<table ...><tr id="imgtab${i}">

</tr><tr id="imgdesc${i}"...></tr></table>’);

var elemd = new Element.html

(’<img id="${sub}" src="immagini/small/${imgdec}"...> ’);

var desc= new Element.html(’<div ...>${imgdes}</div>’);

query(’#imagedec’).nodes.add(table);

query(’#imgtab${i}’).nodes.add(elemd);

query(’#imgdesc${i}’).nodes.add(desc);

}

}

In questa parte della funzione viene popolata la seconda scheda con la solaimmagine del decorativo corrispondente alla scelta fatta. Il problema checausa la condizione interna e che alcune configurazioni non hanno un’imma-gine per il decorativo e per evitare un errore o la mancanza totale dell’im-magine si usa un immagine di default.L’ultima parte della funzione provvede a modificare la galleria di immaginia fondo pagina:



...

String tipos = door["TIPO_PORTA"].toLowerCase()+"_ph.png";

var tipo=new Element.html(’<img src="immagini/system/${tipos}"...>’);

query(’#scroll’).nodes.add(tipo);

...

}


if (door["COD_DECORATIVO"]== sub && door["COD_TIPO_PORTA"]==sub2){

var elem2=new Element.html

(’<img id="${sub + sub2 +door["COD_STRUTTURA_PANNELLO"]}.jpg"

src="immagini/small/${sub + sub2

+door["COD_STRUTTURA_PANNELLO"]}.jpg" ...>’);

query(’#scroll’).nodes.add(elem2);

}

In questa ultima parte quando l’oggetto door corrisponde all’immagine se-lezionata, nella galleria a fondo pagina viene visualizzata un’immagine conscritto il il tipo della porta, dopodiche per ogni oggetto door con il decorativoe il tipo di porta esatti verra aggiunta un’immagine a fianco. Graficamenteil risultato e questo:

Questo e cio che accade selezionando un elemento nella terza scheda, fun-zioni simili verranno utilizzate quando si clicca su un elemento della galleriadi immagini in fondo alla pagina oppure su un’immagine (o su un puntoqualsiasi) della seconda scheda. Ovviamente eseguiranno operazioni simili,ma con vincoli diversi. Nonostante queste funzioni siano paragonabili tra diloro (in tutte viene scansionato il file porte.json e vengono fatte delle sceltesulle immagini da visualizzare), la presenza di vincoli non rende possibile ilriutilizzo della funzione.Non e stato citato il metodo di aggiornamento della prima scheda, infattiquando un’immagine viene selezionata, i menu a tendina devono mostrarecome selezione i valori corrispondenti ai vincoli. Questo aggiornamento vie-ne effettuato non troppo efficientemente richiamando la funzione di gestionedella risposta al file decorativo.json. La funzione e questa:

void OnLoadSuccessdec(HttpRequest request){


In questa parte della funzione si riempie il menu a tendina delle collezioni eattraverso un controllo seleziona come visibile quella relativa alla configura-zione corrente. Nella seconda parte della funzione esegue la stessa operazio-ne con il menu dei decorativi, con un’ulteriore vincolo, cioe che i decorativisiano associabili al tipo di collezione selezionato nel primo menu:

for (int i=0; i< decors.length; i++){

var decor = decors[i];

assert(decor is Map);

...

String val = decor["DECORATIVO"].toLowerCase();

String str = decor["DECORATIVO"];

if (str == porta.DECORATIVO){

var dec = new Element.html

(’<option value="${val}" selected>${str}</option>’);

query(’#decoro’).nodes.add(dec);

if(k != decor["COLLEZIONE"]){

k=’’;}

}

else{

var dec = new Element.html

(’<option value="${val}">${str}</option>’);

query(’#decoro’).nodes.add(dec);

if(k != decor["COLLEZIONE"]){

k=’’;}

}

}

}

Le scelte fatte nelle schede Stipiti & Coprifili e Accessori non avranno ef-fetti grafici, modificheranno solamente i campi dell’oggetto di configurazionee quindi la scheda di riepilogo, le funzioni di gestione quindi sono formateprincipalmente da assegnamenti.

Conclusioni

In questo lavoro di tesi e stato analizzato il linguaggio Dart, prima di puttoe stata presa in considerazione la struttura, le capacita e la prestazioni delnuovo linguaggio, successivamente sono state studiate alcune tecnologie perla comunicazione real-time e infine e stato illustrata un’applicazione scrittain Dart. A mio parere Google ha centrato il bersaglio, nell’implementarel’applicazione i problemi piu grandi sono derivati da HTML e CSS, Dart everamente intuitivo e segue una logica familiare per chi ha provato a pro-grammare almeno una volta. Tuttavia credo che non sia stato abbastanzapubblicizzato e che gli unici a conoscenza della sua esistenza siano i program-matori Web piu informati ed esperti, la categoria peggiore per un linguaggioappena nato.Dart, ’e inutile’, ’non ne sento il bisogno’, ’non era necessario un nuovolinguaggio, bastava evolvere JavaSctipt’, ’e noioso’. Questi sono alcuni com-menti trovati sul Web, non hanno torto, Dart effettivamente non permette difare cose mai fatte, non introduce delle novita sostanziali in fatto di program-mazione e un programmatore esperto in cerca di novita potrebbe trovarloveramente noioso. Il fatto che sia un linguaggio noioso che non introducenovita permette agli utenti meno esperti di avvicinarcisi senza troppi pro-blemi, e si, esiste gia un linguaggio di programmazione per le applicazioniWeb, ma e troppo complesso per chi parte da zero. Dopo essermi documen-tata e aver letto decine di articoli e interviste, penso che tutti coloro chedenigrano Dart lo facciano su una base di pigrizia, superbia e paura. Tutti icommenti negativi che ho letto non erano rivolti all’efficienza, alla difficoltadi utilizzo o ad altri aspetti tecnici, erano basati sul concetto di necessita.Dart magari non era veramente necessario per chi ha scritto quegli articoli,pero puo risultare utile a chi di JavaScript non sa niente? Si, secondo mesi. Dart non e il linguaggio del futuro ma merita una possibilita, superaJavaScript in quasi tutti i campi tranne che nell’esperienza, ha prestazionipiu elevate, supporta le tecnologie piu moderne, e piu facile da imparare.Alcune persone pensano valga la pena imparare un nuovo linguaggio se haprestazioni piu elevate, credo nelle potenzialita di Dart e spero che ’alcuni’in questo caso significhi la maggioranza. Si vedra fra ormai 3 anni se LarsBak aveva ragione, cioe se Dart nel giro di 5 anni dalla nascita si sarebbe


affermato.

Bibliografia

[1] C. Buckett - Dart in action.Manning Publications Co., 2013

[2] Classifica Tiobe.http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

[3] CORS.http://www.w3.org/TR/cors/

[4] Dart; or Why JavaScript has already won.http://www.quirksmode.org/blog/archives/2011/10/dart or why jav.html

[5] Dash.https://gist.github.com/paulmillr/1208618

[6] Google Dart cracks Top 50 list of programming languages.http://www.infoworld.com/d/application-development/google-dart-cracks-top-50-list-of-programming-languages-204399

[7] Google’s JavaScript assassin: Web languages are harder than VMs.http://www.theregister.co.uk/2013/01/18/google dart interview/

[8] GOTO conference.http://gotocon.com/

[9] GWT.http://www.gwtproject.org/?hl=it

[10] Harmony.http://www.html.it/articoli/ecmascript-6-harmony-il-javascript-che-verra/

[11] InfoWorld interview: Why Google Dart beats JavaScript.http://www.infoworld.com/d/application-development/infoworld-interview-why-google-dart-beats-javascript-178738?page=0,1

[12] JSONP.http://www.json-p.org/

BIBLIOGRAFIA 54

[13] Microsoft snobba Google DART, il futuro e a tinte JavaScript.http://www.tomshw.it/cont/news/microsoft-snobba-google-dart-il-futuro-e-a-tinte-javascript/34702/1.html?pag commenti=1

[14] 9 Dart Myths Debunked.http://blog.sethladd.com/2012/10/9-dart-myths-debunked.html

[15] Node.js.http://nodejs.org/

[16] Octane.https://developers.google.com/octane/

[17] Official Dart Web site.http://dartlang.org

[18] SPDY.http://dev.chromium.org/spdy

[19] C. Strom - Dart for Hipsters.The Pragmatic Programmers, 2012

[20] 10 reasons why Dart is cooler than JavaScript.http://www.grobmeier.de/10-reasons-why-dart-is-cooler-than-javascript-03012012.html#.Udmpl lM9Bl

[21] K. Walrath, S. Ladd - What is Dart?O’Reilly,2012

[22] V. Wang, F. Salim, P. Moskovits - HTML5 WebSocket.Apress, 2013

[23] WebSocket.http://www.websocket.org

[24] What JavaScript’s inventor really thinks about Google Dart.http://www.infoworld.com/d/application-development/what-javascripts-inventor-really-thinks-about-google-dart-185045

[25] Whatsapp.http://www.whatsapp.com/?l=it

[26] Zynga.http://zynga.com/

Studio e Sperimentazione di Dart e Realizzazione di un ... · The goal of the Dash e ort is...

Documents

Transcript of Studio e Sperimentazione di Dart e Realizzazione di un ... · The goal of the Dash e ort is...