Compilación y depuraciónModos de ejecución

GWTGoogle Web Toolkit

Prof. Ing. Esteban Ramírez

Compilación y depuraciónModos de ejecución

GWTGoogle Web Toolkit

Prof. Ing. Esteban Ramírez

Contenido

Etapas de un proyecto GWT

Debugging in Development Mode.

Code Spliting

GWT History Mechanism

Compilador GWT

Etapas de un proyecto GWT

Etapas de un proyecto GWT

Debugging in Development Mode

Debug Run

Run - Development Mode

HTTP SERVER

CODESERVER

DeveloperPlugIn

StaticContent

Servlets

Client SideCode

IDE

Run

Run - Development Mode

HTTP SERVER

CODESERVER

DeveloperPlugIn

StaticContent

Servlets

Client SideCode

IDE

Jetty is a pure Java-based HTTP server and Servlet container

Development Mode - GWT

Development Mode - GWT

Development Mode - GWT

Development Mode - GWT

Development Mode - Eclipse

Development Mode - Eclipse

Development Mode – Chrome Plugin

En caso que el servidor no este disponible el Plugin emite este mensaje.

Debug - in Development Mode

Debug

Debug - in Development Mode

Resume Suspend

Terminate

Step Into (F5)

Step Return (F7)

Use step filters

Step Over (F6) Drop to frame

Compilador

Es un programa informático que traduce un programa escrito en un

lenguaje de programación a otro lenguaje de programación.

http://es.wikipedia.org/wiki/Compilador

Lenguaje 1 Lenguaje 2

Compilador GWT

Compilador javaScript

Compilador javaScript - Detailed

java.lang.StringBuffer append(String valor)

Compilador javaScript - Pretty

java.lang.StringBuffer append(String valor)

Compilador javaScript - Obfuscated

java.lang.StringBuffer append(String valor)

Compilador javaScript

Compilador javaScript

Compilador javaScript

Compilador javaScript

<Module>.nocache.js <MD5>.cache.html<MD5>.gwt.rpcHost HTML <Module>.html

Compilador javaScriptOpción Descripción

-logLevel The level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG, SPAM, or ALL

-workDir The compiler working directory for internal use (must be writeable; defaults to a system temp dir)

-gen Debugging: causes normally-transient generated types to be saved in the specified directory

-style Script output style: OBF[USCATED], PRETTY, or DETAILED (defaults to OBF)

-ea Debugging: causes the compiled output to check assert statements

-XdisableClassMetadata EXPERIMENTAL: Disables some java.lang.Class methods (e.g. getName())

-XdisableCastChecking EXPERIMENTAL: Disables run-time checking of cast operations

-validateOnly Validate all source code, but do not compile

-draftCompile Enable faster, but less-optimized, compilations

-optimize Sets the optimization level used by the compiler. 0=none 9=maximum.

-compileReport Create a compile report that tells the Story of Your Compile

-strict Only succeed if no input files have errors

-localWorkers The number of local workers to use when compiling permutations

-war The directory into which deployable output files will be written (defaults to 'war')

-extra The directory into which extra files, not intended for deployment, will be written

Compilador javaScript

Optimizaciones:

• Dead Code Elimination.

• Constant Folding.Window.alert( “Hello” + “World”)$wnd.alert(“Hello World”)

• Copy Propagation.a=15; int b= a*a+5;a=15; b=230

• String Interning.

• Code Inlining.

• Monolithic compilation

Compilador javaScript

Puntos a tener en cuenta:

• Paquetes soportados en client – side:java.lang (includes exceptions, classes, general utility methods)java.util (three classes useful for date/time processing)java.io (sorely restricted! including just the Serializable interface)java.sql (also quite limited, includes three classes useful for date/time)

• obj.getClass().getName() isn’t available, but GWT.getTypeName(obj) is.

• Class.forName("MyClass"), which has GWT.create(MyClass)

Deploy module

Compilador javaScript

Compile Report -compileReport

Compile Report -compileReport

Compile Report -compileReport

Compile Report -compileReport

Compile Report -compileReport

Compile Report -compileReport

Compile Report -compileReport

Compile Report -compileReport

Have four major use cases:

1. To reduce total download size

2. To reduce download size of initial fragment

3. To reduce download size of specific code fragments as produced by code splitting

4. To compare between permutations, for example, differences between user agents

GWT Code Splitting

En las aplicaciones AJAX los fuentes de JavaScripts suelen crecer fácilmente.

Para ayudar en este inconveniente GWT provee Dead-for-now (DFN) code splitting.

Para implementar la segmentacion del codigo simplemente se dbe insertar llamadas al metodo GWT.runAsync en los lugares donde el programa pausará la descarga. Estos puntos son llamados split points.

GWT Code Splitting

GWT Code Splitting

GWT Code Splitting

Sin split points

Con split points

GWT Code Splitting

GWT History Mechanism Historial del Navegador

GWT provee un mecanismo para administrar el historial del navegador que funciona con aplicaciones del tipo Ajax. Para acceder al mismo, es necesario escribir un manejador de eventos que implemente la interfaz HistoryListener y luego éste debe ser registrado

en el objeto History:

History.newItem("overview");….

History.newItem("reports");

Ejercicios

1- Probar el debug con puntos de corte en el calculo del promedio del curso del proyecto .

2 - Compilar todos los proyectos realizados en los diferentes modos de optimización y comparar los tamaños de los .js generados.

3- Publicar y probar los .war generados en el Apache Tomcat.

4- Probar la generación del reporte de compilación y analizar su contenido.

5- Crear dos proyectos, uno TestSinSplit y otro TestConSplit implementando el ejemplo de esta presentación.

6- Probar el proyecto GestionAcademicaWebHist donde se implementó el mecanismo de histórico de navegación.