giato, poich `e la pagina HTML viene caricata molto pi `u velocemente se gli ascoltatori sono aggiunti in seguito separatamente: infatti mette a disposi- zione la possibilit `a di gestire gli eventi all’interno dello stesso codice Dart. Si pu `o in questo modo semparare ulteriormente la logica del programma dalla sua dipendenza alla tecnologia Html su cui si appoggia, permettendo una progettazione pi `u accurata del software.
4.1
Alcuni esempi di studio
Si vedranno ora alcuni esempi di codice riguardanti ci `o che `e stato appena descritto.
Classi e Interfacce
Se si pensa al processo di creazione di un software attraverso una me- todologia ingegneristica, si avr `a un susseguirsi di fasi che porteranno lo sviluppatore dall’idea iniziale del prodotto sino alla sua realizzazione. Si considera ad esempio di voler realizzare una semplice applicazione per il raddoppio data una stringa. Si inizier `a formulando un’interfaccia che soddisfi i nostri requisiti:
1
2 i n t e r f a c e d o u b l e r {
3 S t r i n g d o u b l e A s S t r i n g ( S t r i n g ) {
4 }
5 }
Successivamente in base alla necessit `a si potranno creare diverse clas- si che soddisfano tali richieste implementando questa iniziale interfaccia: ad esempio se si necessit `a di un componente che data una stringa, la converta in un numero e poi ne raddoppi il valore si avr `a numDoubler:
1 c l a s s n u m D o u b l e r i m p l e m e n t s d o u b l e r { 2 S t r i n g d o u b l e A s S t r i n g ( S t r i n g i n p u t ) { 3 d o u b l e n u m b e r = 0 . 0 ; 4 try { 5 n u m b e r = M a t h . p a r s e D o u b l e ( i n p u t ); 6 } 7 c a t c h ( B a d N u m b e r F o r m a t E x c e p t i o n ex ) { 8 r e t u r n ( ’ ’); 9 }
48 Applicazioni Web Strutturate : Dart come caso di studio
Figura 3.1: Doubler Example
10 r e t u r n ( n u m b e r * 2). t o S t r i n g ();
11 }
12 }
Invece per un componente che data una stringa ne concateni una sua copia si avr `a stringDoubler:
1 c l a s s s t r i n g D o u b l e r i m p l e m e n t s d o u b l e r {
2 S t r i n g d o u b l e A s S t r i n g ( S t r i n g i n p u t ) {
3 r e t u r n i n p u t + i n p u t ;
4 }
5 }
Complentando quindi attraverso un main
1 v o i d m a i n () { 2 var n u m D u b = new n u m D o u b l e r (); 3 var s t r D u b = new s t r i n g D o u b l e r (); 4 d o c u m e n t . q u e r y ("# d o u b l e d N u m "). i n n e r H T M L 5 = n u m D u b . d o u b l e A s S t r i n g ( ’2 ’); 6 d o c u m e n t . q u e r y ("# d o u b l e d S t r i n g "). i n n e r H T M L 7 = s t r D u b . d o u b l e A s S t r i n g ( ’2 ’); 8 }
e la relativa integrazione con l’Html si avar `a :
1 < html >
2 < head >
3 < title > Test </ title >
3.4.1 Alcuni esempi di studio 49 5 < body > 6 < h1 > Test </ h1 > 7 < h2 id =" d o u b l e d N u m " > </ h2 > 8 < h2 id =" d o u b l e d S t r i n g " > </ h2 > 9 < s c r i p t t y p e =" t e x t / j a v a s c r i p t " src =" T e s t . d a r t . app . js " > </ script > 10 </ body > 11 </ html >
Si avranno cos`ı per risultato due funzionalit `a differenti che per `o riprendo- no le richieste iniziali dell’interfaccia. Proseguendo e ampliando un simile progetto si avr `a in futuro una base molto solida e lineare, di facile compren- sione e gestione, e non un susseguirsi via via pi `u pesante di funzionalit `a, come per esempio si ha con javascript. In questo modo si comprendono, anche se attraverso un esempio molto semplice, le grandi potenzialit `a di un linguaggio come Dart che permette di strutturare il software in modo metodico e ingegneristico;
Tipizzazione opzionale
Di seguito un esempio di codice non tipizzato in Dart, che crea una nuova classe Space che ha i parametri x e y e due metodi: scale() e distance().
1 2 c l a s s S p a c e { 3 var x , y ; 4 S p a c e ( t h i s . x , t h i s . y ); 5 s c a l e ( f a c t o r ) = > new S p a c e ( x * factor , y * f a c t o r ); 6 d i s t a n c e () = > M a t h . s q r t ( x * x + y * y ); 7 } 8 9 m a i n () { 10 var a = new S p a c e (2 ,3). s c a l e ( 1 0 ) ; 11 p r i n t ( a . d i s t a n c e ( ) ) ; 12 }
Questo `e come il codice diventa con l’aggiunta dei tipi che garantiscono che x, y e factor siano di tipo num e che Space contenga due valori di tipo num.
1
2 c l a s s S p a c e {
3 num x , y ;
4 S p a c e ( num t h i s . x , num t h i s . y );
5 S p a c e s c a l e ( num f a c t o r ) = > new S p a c e ( x * factor , y * f a c t o r );
6 num d i s t a n c e () = > M a t h . s q r t ( x * x + y * y );
50 Applicazioni Web Strutturate : Dart come caso di studio
8 v o i d m a i n () {
9 S p a c e a = new S p a c e (2 ,3). s c a l e ( 1 0 ) ;
10 p r i n t ( a . d i s t a n c e ( ) ) ;
11 }
Ad esempio, con x e y tipizzati un’eventuale creazione dell’oggetto Space con valori diversi dal tipo num creerebbe un eccezione grazie alla quale il programmatore potrebbe intervenire risolvendo velocemente il problema; in alternativa non si riscontrerebbe nulla se non nel momento di utilizzo di tali variabili a runtime.
Sunflower: HTML5, tipizzazionee e gestione Eventi
Analizzeremo ora un semplice esempio di interazione tra Dart e HTML5 per la creazione di un SunFlower: questo esempio utilizza Canvas di HTML5 per il render di un’immagine che rappresenta il centro del fiore:
Sunflower.
Il metodo migliore per la creazione di una UI statica come in questo caso, `e di usare direttamente HTML. Ecco il codice HTML dell’esempio, il quale include l’heading text, l’oggetto Canvast, uno slider di HTML5 per l’input (slider), e una immagine che mostra l’equazione utilizzata per il render del sunflower :
1
2 < html >
3 < head >
4 < m e t a c h a r s e t =" utf -8" >
5 < title > S u n f l o w e r Demo </ title >
6 < l i n k t y p e =" t e x t / css " rel =" s t y l e s h e e t " h r e f =" s u n f l o w e r . css " > 7 </ head > 8 < body > 9 < h1 > d r f i b o n a c c i ’ s S u n f l o w e r S p e c t a c u l a r </ h1 > 10 11 <p > A c a n v a s 2 D d e m o . </ p > 12 13 < div id =" c o n t a i n e r " > 14 < c a n v a s id =" c a n v a s " w i d t h = " 3 0 0 " h e i g h t = " 3 0 0 " c l a s s =" c e n t e r " > </ canvas > 15 < f o r m c l a s s =" c e n t e r " > 16 < i n p u t id =" s l i d e r " t y p e =" r a n g e " max = " 1 0 0 0 " v a l u e = " 5 0 0 " / > 17 </ form > 18 < br / > 19 < img src =" m a t h . png " w i d t h = " 3 5 0 px " h e i g h t = " 4 2 px " c l a s s =" c e n t e r " > 20 </ div > 21 22 < footer >
3.4.1 Alcuni esempi di studio 51
Sunflower.png
Figura 3.2: Fibonacci SunFlower
23 < p id =" s u m m a r y " > </ p > 24 < p id =" n o t e s " > </ p > 25 </ footer > 26 27 < s c r i p t t y p e =" a p p l i c a t i o n / d a r t " src =" s u n f l o w e r . d a r t " > </ script > 28 < s c r i p t src =" h t t p :// d a r t . g o o g l e c o d e . com / svn / b r a n c h e s / b l e e d i n g _ e d g e / d a r t / c l i e n t / d a r t . js " > </ script > 29 </ body > 30 </ html >
Si nota dall’Html che il tag script ”type“ contiene il sorgente di tipo”appli- cation/dart“: ci `o permette di eseguire lo script direttamente da un browser che supporta Dart(al momento solamente Dartium), ma allo stesso tem- po per tutti gli altri browser che non hanno la Dart VM, viene caricato il file ”dart2js“ per eseguire il programma in javascript. Si vuole sottolineare a questo punto che per assurdo quindi, si potrebbe utilizzare Dart anche solo come strumento di strutturazione del codice, esportandolo poi in ja- vascript per l’esecuzione (anche se ovviamente non `e questo l’obbiettivo di questo nuovo linguaggio di programmazione!). Come evidenziato nei paragrafi precedenti inoltre, sia che venga utilizzato il codice Dart, o che si usi il codice Javascript, l’esecuzione del programma partir `a solamente
52 Applicazioni Web Strutturate : Dart come caso di studio quando il DOM sar `a pronto (su DOMContentLoaded).
Inoltre, a differenza di quanto si avrebbe avuto con javascript, nell’Html non compare traccia della gestione degli eventi, la quale `e infatti controllata
all’interno del codice Dart.
Analizzando velocemente il codice Dart del Sunfluwer si noter `a che, come spiegato nei paragrafi introduttivi a Dart, si partir `a con un main(): in questo caso viene inizzializzato l’oggetto Canvas, registrato un handler per gli eventi, e disegnato il primo frame.
1
2 // C o p y r i g h t ( c ) 2012 , the D a r t p r o j e c t a u t h o r s . P l e a s e see the A U T H O R S f i l e
3 // for d e t a i l s . All r i g h t s r e s e r v e d . Use of t h i s s o u r c e c o d e is g o v e r n e d by a
4 // BSD - s t y l e l i c e n s e t h a t can be f o u n d in the L I C E N S E f i l e . 5 6 # l i b r a r y ( ’ s u n f l o w e r ’); 7 8 # i m p o r t ( ’ d a r t : html ’); 9 # i m p o r t ( ’ d a r t : math ’ , p r e f i x : ’ Math ’); 10 11 f i n a l S E E D _ R A D I U S = 2; 12 f i n a l S C A L E _ F A C T O R = 4; 13 f i n a l TAU = M a t h . PI * 2; 14 15 f i n a l M A X _ D = 3 0 0 ; 16 f i n a l O R A N G E = " o r a n g e "; 17 18 num centerX , c e n t e r Y ; 19 int s e e d s = 0; 20 21 var PHI ; 22 23 m a i n () { 24 PHI = ( M a t h . s q r t (5) + 1) / 2; 25 26 C a n v a s E l e m e n t c a n v a s = q u e r y ("# c a n v a s "); 27 c e n t e r X = c e n t e r Y = M A X _ D / 2; 28 var c o n t e x t = c a n v a s . c o n t e x t 2 d ; 29 30 I n p u t E l e m e n t s l i d e r = q u e r y ("# s l i d e r "); 31 s l i d e r . on . c h a n g e . add (( E v e n t e ) { 32 s e e d s = M a t h . p a r s e I n t ( s l i d e r . v a l u e ); 33 d r a w F r a m e ( c o n t e x t ); 34 } , t r u e ); 35 36 s e e d s = M a t h . p a r s e I n t ( s l i d e r . v a l u e ); 37 38 d r a w F r a m e ( c o n t e x t ); 39 }
3.4.1 Alcuni esempi di studio 53
Vengono dichiarate molte costanti e variabili che sono tipizzate escplicita- mente; ci `o come visto `e un enorme aiuto per il mantenimento del software. Inoltre l’utilizzo della variabile di tipo num potrebbe far pensare che essa sia una pimitiva in Dart(a causa dell’utilizzo di una notazione lowercase sulla prima lettera) cosa che non `e possibile in quanto Dart non ha primi- tive: ci `o infatti `e dovuto all’utilizzo di librerie fondamentali(L’utilizzo di num elimina la necessit `a di converitre esplicitamente da int a double e viceversa in quanto vengono gestite come un unico tipo).
Infine uno sguardo al metodo che in definitiva disegna l’immagine :
1 /**
2 * D r a w the c o m p l e t e f i g u r e for the c u r r e n t n u m b e r of s e e d s .
3 */
4 v o i d d r a w F r a m e ( C a n v a s R e n d e r i n g C o n t e x t 2 D c o n t e x t ) {
5 c o n t e x t . c l e a r R e c t (0 , 0 , MAX_D , M A X _ D );
6
7 for ( var i = 0; i < s e e d s ; i ++) {
8 var t h e t a = i * TAU / PHI ;
9 var r = M a t h . s q r t ( i ) * S C A L E _ F A C T O R ; 10 var x = c e n t e r X + r * M a t h . cos ( t h e t a ); 11 var y = c e n t e r Y - r * M a t h . sin ( t h e t a ); 12 13 d r a w S e e d ( context , x , y ); 14 } 15 16 d i s p l a y S e e d C o u n t ( s e e d s ); 17 } 18 19 /** 20 * D r a w a s m a l l c i r c l e r e p r e s e n t i n g a s e e d c e n t e r e d at ( x , y ). 21 */
22 v o i d d r a w S e e d ( C a n v a s R e n d e r i n g C o n t e x t 2 D context , num x , num y ) {
23 c o n t e x t . b e g i n P a t h (); 24 c o n t e x t . l i n e W i d t h = 2; 25 c o n t e x t . f i l l S t y l e = O R A N G E ; 26 c o n t e x t . s t r o k e S t y l e = O R A N G E ; 27 c o n t e x t . arc ( x , y , S E E D _ R A D I U S , 0 , TAU , f a l s e ); 28 c o n t e x t . f i l l (); 29 c o n t e x t . c l o s e P a t h (); 30 c o n t e x t . s t r o k e (); 31 } 32 33 v o i d d i s p l a y S e e d C o u n t ( num s e e d C o u n t ) { 34 q u e r y ("# n o t e s "). t e x t = " $ { s e e d C o u n t } s e e d s "; 35 }
Il metodo drawFrame() compie tutti i calcoli mentre drawSeed() disenga sull’oggetto Canvas(in realt `a sul CanvasRenderingContext2D).
54 Applicazioni Web Strutturate : Dart come caso di studio
Attraverso l’utilizzo combinato dell’HTML5 e della tipizzazione di Dart, si
Capitolo 4
Conclusioni
Riprendendo l’introduzione di questa tesi, la rapidit `a alla quale tecnologia e web si stanno espandendo richiede un nuovo modo di affrontare la pro- gettazione e lo sviluppo di software per la rete.
La necessit `a di dover affrontare progetti sempre pi `u complessi porta ad una normale evoluzione verso un modello di programmazione strutturato. Dart si pone proprio come mezzo per affrontare questo cambiamento e risolvere le problematiche che riguardano il Web moderno; un linguaggio orientato agli oggetti di facile utilizzo per tutti coloro che si sono trovati si- no ad oggi a sviluppare software locale in ambienti object-oriented e allo stesso tempo con funzionalit `a e potenzialit `a tali da poter creare applica- zioni distribuite in maniera metodica e chiara; l’introduzione di un sistema basato agli oggetti appunto, garantisce le propriet `a strutturali che sono ri- chieste per sviluppare anche software complesso.
Inoltre grazie alla tipizzazione delle variabili si pu `o fare affidamento su uno strumento pi `u preciso, anche per la stessa analisi e correzione del soft- ware.
Nonostante per `o le forti caratteristiche che lo accomunano al javascript, Dart risulta un grosso cambiamento per chi ha per anni programmato con questo linguaggio, pur lasciando in ogni caso una grende libert `a espressi- va al programmatore.
In conclusione il progetto Dart `e ancora in fase di sviluppo, ma ha del- le buone potenzialit `a; si ricorda tuttavia,che per eseguire il codice Dart e per ottenere performance superiori all’attuale javascript i browser dovran-
56 Conclusioni no implementare la Dart Virtual Machine, un particolare che sicuramen- te ostacoler `a molto le ambizioni di Google: non tutte le software house produttrici di browser, infatti, potrebbero essere disposte ad accettare tali imposizioni: Microsoft ad esempio non ha fatto segreto di non gradire tale linguaggio, e preferisce restare fedele a JavaScript per il quale sta lavo- rando ad un progetto parallelo chiamato TypeScript, che si pone gli stessi obiettivi di Dart: ampliare javascript attraverso l’introduzione di quelle stes- se funzionalit `a viste in Dart, dalla tipizzazione opzionale, all’introduzione di classi e interfacce; Microsoft inoltre ha giustificato tali innovazioni come un naturale adattamento di javascript al futuro standard dell’ecmascript 6 che prevede appunto l’introduzione di calssi e interfacce ad esempio, e non come semplice modellazione ad immagine e somiglianza di altri suo lin- guaggi proprietari come c sharp, dal quale `e molto evidente si `e ispirata). Allo stato attuale non possiamo fare altro che tenere d’occhio l’evoluzione di questi progetti e vedere come il web risponder `a a tali cambiamenti.
Bibliografia
[1] W3C http://www.w3.org/ [2] DartLang http://www.dartlang.org/ [3] Dartr.com http://dartr.com/ [4] Chromium Blog http://blog.chromium.org/ [5] Dartwatch http://dartwatch.com/ [6] Techrepublic http://www.techrepublic.com/blog/webmaster/getting-started-with- google-dart/[7] Blog Sviluppare in Rete
http://sviluppare-in-rete.blogspot.it/ [8] Html5 - La Guida Italiana. http://www.guidahtml5.com/ [9] HTML.it http://www.html.it/ [10] Html5today http://www.html5today.it/
58 Bibliografia [11] XHtml.it http://xhtml.html.it/ [12] Sun http://www.sun.com [13] Wikipedia it.wikipedia.org/
Ringraziamenti
Il primo ringraziamento va alla mia famiglia che mi ha aiutato, sostenuto e s ¨opportato per tutti questi anni.
A Martina e Francesca che mi hanno sempre accompagnato in momenti felici e mi hanno sostenuto con la loro spontaneit `a ed amicizia e grazie alle quali ho trascorso mille pranzi in spensieratezza tra una lezione e l’altra, ammorbidendo le (a volte lunghe) giornate di lezione.
A Cornel che mi affianca in questo percorso dal primo giorno e che lenta- mente sto traviando verso il lato oscuro della forza!
..e a tutti gli altri ragazzi che ho incontrato in questo cammino e che spero di poter continuare a conoscere in futuro.
Infine, potr `a sembrare inusuale e fuoriluogo, ma credo che un ultimo rin- graziamento debba rivolgerlo a me stesso, per aver fatto le mie scelte e per averle portate avanti senza farmi influenzare da nessuno; per aver concluso questo percorso e per la voglia e l’intenzione di affrontarne altri mille.