closure visto da vicino

Google Closure visto da vicino

Davide Ficano

[email protected]

GTUG, Palermo, Gennaio, 2010

mailto:[email protected]

Google, API e licenze

● Ogni applicazione rilasciata da Google e' accessibile tramite API

● Quasi tutte le applicazioni dispongono di API pubbliche e documentate

● Le API generalmente non hanno licenze open source

Google Closure

Nel Novembre 2009 Google presenta Closure

● E' Open Source (Apache license 2.0)

● Contiene gli stessi strumenti utilizzati per sviluppare le applicazioni Google

Cosa fa Closure

Lo sviluppo di applicazioni Enterprise lato client rende difficoltoso

● gestire la dipendenza tra moduli JS

● ottimizzare il codice prodotto

● gestire la generazione dinamica delle pagine

Quali strumenti

Closure e' composto da tre elementi, ognuno dei quali e' utilizzabile indipendente dall'altro

● Closure Library

● Closure Compiler

● Closure Template

Closure LibraryJavascript Standard Library

Il sogno di una STL/JDK anche per Javascript

● Concentrare le energie sullo sviluppo dell'applicazione e non sui task ripetitivi

● Server agnostic, deploy della libreria in modo semplice

● Cross browser compatibile, sempre lo stesso problema

Closure Librarycosa contiene

Contiene centinaia di classi che coprono le piu' disparate aree

● goog.dom.*

● goog.json.*

● goog.css.*

● goog.net.*

● goog.graphics.* (HTML5 canvas)

Closure Libraryil valore aggiunto

Il considerevole numero di classi fornite è paradossalmente l'elemento meno interessante di Closure Library.

Il vero valore aggiunto è dato da

● Alta leggibilità del codice scritto● Alta integrabilità con IDE● Documentazione ed esempi disponibili

● Inclusione dinamica delle sole classi referenziate● Controllo delle dipendenze tra script

Closure LibraryInclusione dinamica

base.js

● Ogni applicazione deve includere via tag <script/> soltanto il file base.js

● base.js rende disponibili due metodi(*)● goog.require(name)● goog.provide(name)

(*) Comprende anche altri metodi la cui trattazione non risulta pertinente in questo contesto

Closure Librarygoog.require()

goog.require('goog.dom');function createHello() { goog.dom.createDom('h1', { 'style': 'background-color:#EEE'}, 'Hello world!');}

<html> <head> <script src="closure/goog/base.js"></script> <script src="hello.js"></script> </head> <body onload="createHello()"> </body></html>

hello.js

hello.html

Closure Librarygoog.provide()

// Presenti in dom.jsgoog.provide('goog.dom');goog.provide('goog.dom.DomHelper');goog.provide('goog.dom.NodeType');

goog.require('goog.array');......goog.require('goog.userAgent');

goog.dom.getDocument = function() { return document; };

Le classi definite in dom.jsVengono dichiarate tramite provide

Le classi da cui dom.js dipendeVengono dichiarate tramite require

Closure LibraryGestione dipendenze

deps.js

● base.js “carica” il file deps.js che contiene la lista di tutte le dipendenze presenti in Library

● deps.js contiene il mapping tra nome modulo e nome file, le classi che fornisce e le classi da cui dipende

// require('goog.dom')

goog.addDependency('dom/dom.js', // percorso file ['goog.dom', ..., 'goog.dom.NodeType'], // classi fornite ['goog.array', ..., 'goog.userAgent']); // classi richieste

Closure LibraryGestione dipendenze per i propri file

calcdeps.py

La scrittura di propri moduli conformi a Closure Library richiede la creazione di un proprio “deps.js”

Nei file della distribuzione di Library e' presente lo script Python calcdeps.py

calcdeps.py fa il parsing dei file sorgenti alla ricerca delle dichiarazioni goog.require()/goog.provide() e crea un file con l'albero delle dipendenze

Closure Librarydocumentazione e testing

Al suo interno Library usa strumenti diventati uno standard de facto nella comunità Javascript.

● JSDoc - http://code.google.com/p/jsdoc-toolkit/

● JSUnit - http://www.jsunit.net/

http://code.google.com/p/jsdoc-toolkit/

http://www.jsunit.net/

Closure Compiler

Cosa non fa

● Non produce codice macchina!

Cosa fa

● Ottimizza il codice● Segnala errori e warning● Analizza le dipendenze “at compile time”● Offre strumenti di debug e test

Closure Compilercome usarlo

E' possibile usare Compiler tramite

● Applicazione Java a linea di comandoFacilita l'automazione di build process

● Applicazione webhttp://closure-compiler.appspot.com/home

● API RESTful

http://closure-compiler.appspot.com/home

Closure Compilerottimizzazioni

Sono disponibili tre livelli di ottimizzazione.Ogni livello comprende le ottimizzazioni dei livelli inferiori

1.WHITESPACE_ONLYElimina gli spazi e gli “a capo”

2.SIMPLE_OPTIMIZATIONSIl default, rinomina variabili locali e funzioni con nomi “corti”

3.ADVANCED_OPTIMIZATIONSEffettua l'inline delle funzioni, molto aggressivo può produrre

codice non funzionante se non si rispettano alcuni vincoli

Closure CompilerSIMPLE_OPTIMIZATIONS

Closure CompilerADVANCED_OPTIMIZATIONS

Closure CompilerAlla fiera delle follie dell'ottimizzatore 1

Si supponga di avere il costruttore

function ctor() { this.name = "";}

Utilizzando il livello di ottimizzazione Simple tutto va bene

Utilizzando il livello Advanced invece...


… si ottiene un warning sull'uso globale di this.

Per compilare senza warning e' necessario dire, tramite JSDoc, che la funzione e' un costruttore

/** * @constructor */function ctor() { this.name = "";}


Si supponga di avere il seguente frammento di codice

alert(typeof f); // print "undefined"var f = function (){};

Utilizzando il livello di ottimizzazione Simple il codice rimane inalterato



… il frammento di codice

alert(typeof f); // print "undefined"var f = function (){};

Viene trasformato in

alert(typeof a); // print "function"function a(){};

Contestualmente si ottiene un warning su f non definita

Viene stravolto il significato del codice originale!!!


Si supponga di avere il seguente frammento di codice

function f(a, b) { b = typeof(b) == "undefined" ? 1 : b;}

f(1); // al parametro b viene dato un valore di default

Utilizzando il livello di ottimizzazione Simple il codice generato risulta essere

function f(){}f(1);



… si ottiene un warning sulla mancanza di un valore per b ma non c'e' nessun codice generato

La soluzione consiste nel dire, tramite JSDoc, che b e' opzionale

/** * @param a * @param {string} [b="hello"] */function f(a, b) { }

f(1);

Closure TemplatesTofu e Soy

Closure Templates è un sistema di templating che facilita la scrittura di elementi di interfaccia utente dinamici

● Nasce per creare frammenti di elementi grafici invece di monolitici template per pagina

● “A tool, not a framework” come riportato nella documentazione ufficiale; "coabita" insieme ad altri ambienti, librerie e framework

● La sintassi del linguaggio SOY è semplice ed intuitiva e comprende i comuni costrutti di un linguaggio; iterazione, espressioni condizionali

Closure TemplatesTofu e Soy

● Lo stesso template può essere utilizzato sia lato client che server (Java)

● I templates vengono compilati in codice Javascript efficiente (SoyToJsSrcCompiler / SoyParseInfoGenerator )

● Nessuna dipendenza da Compiler e Library, l'integrazione con Library va esplicitamente attivata in fase di compilazione (shouldProvideRequireSoyNamespaces)

● Estendibile tramite plugin Java (come una tag library)

Closure TemplatesUn esempio

/** * Greets a person using "Hello" by default. * @param name The name of the person. * @param? greetingWord Optional greeting word to * use instead of "Hello". */ {template .helloName} {if not $greetingWord} Hello {$name}! {else} {$greetingWord} {$name}! {/if} {/template}

ToolsIntegrazione Firebug

● Closure Inspector viene utilizzata per debug e test integration.● Attraverso dei file di source mapping (generati con

Compiler) permette di fare debug partendo dal codice compilato

● Mostra un migliore stack trace● Eseguendo le unit test mostra le assert che falliscono

● Page Speed viene utilizzata per misurare tempi di risposta di una pagina● Fornisce indicazioni su come ottimizzare la pagina

Conclusioni

Pro

Contro

ConclusioniPro

● E' Open Source

● E' una libreria Javascript scritta da programmatori Java● package razionali e con bassa interdipendenza

● Documentazione e supporto

● Incoraggia l'utilizzo di good software engineering practices● Documentare con JSDoc● Scrivere test unit con JSUnit

● Closure Compiler generalmente migliore di YUI Compressor

ConclusioniContro

● E' una libreria Javascript scritta da programmatori Java

● A discapito del nome, le closure Javascript sono sottoutilizzate (vedi Jquery)

● Troppe operazioni command line come calcdeps.py

● L'ottimizzazione advanced e' inutilizzabile

● Non esiste un CSS compiler

closure visto da vicino

Technology