Compilación y depuración Modos de ejecución GWT Google 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

Debugging in Development Mode Debug Run

Run - Development Mode HTTP SERVER CODE SERVER Developer PlugIn Static Content Servlets Client Side Code IDE Run

Run - Development Mode HTTP SERVER CODE SERVER Developer PlugIn Static Content Servlets Client Side Code IDE Jetty is a pure Java-based HTTP server and Servlet container

Development Mode - GWT

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 F5 Step Into (F5) F7 Step Return (F7) Use step filters F6 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. 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

.nocache.js.cache.html.gwt.rpc Host HTML.html

Compilador javaScript OpciónDescripció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() isnt 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

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.