STJS: Strongly Typed Javascript

JavaScript es sin duda, un lenguaje muy poderoso y extremadamente útil para el desarrollo de aplicaciones web RIA (Rich Internet Applications). Un programador puede llegar a ser muy productivo utilizando este lenguaje. Sin embargo, gracias a que es un lenguaje débilmente tipado (y en mi opinión, a otros factores históricos del uso que se le ha dado al lenguaje), el desarrollo de cierto tipo de aplicaciones web utilizando Javascript extensivamente puede llegar a ser muy complejo e improductivo, asi como difícil y costoso de mantener y evolucionar.

Hay muchas propuestas para facilitar el desarrollo de este tipo de aplicaciones, librerías como jQuery, ext-js; frameworks más complejos como GWT, Vaadin u Open Lazlo. Este artículo está basado en una propuesta un poco diferente, pues no es ni una librería Javascript ni tampoco intenta proveer un framework para el desarrollo de aplicaciones web RIA. La idea básica es desarrollar Javascript pero usando Java como lenguaje de desarrollo, tomando ventaja de la naturaleza fuertemente tipada de este último lenguaje y de la gran cantidad de herramientas (IDEs, Integrated Development Environment) disponibles que facilitan enormemente el desarrollo.

st-js o Strongly Typed Javascript es un proyecto de código abierto (Open Source) que provee un traductor de Java a Javascript asi como un plugin Maven que utiliza el traductor para generar el código Javascript después de que el codigo Java haya sido compilado. La dificultad de esta aproximación es que Javascript y Java, a pesar de parecerse en nombre y sintaxis, son dos lenguajes muy diferentes, así que st-js tiene sus particularidades.

Algunos pensarán que el camino tomado es muy parecido al de GWT (Google Web Toolkit), pero st-js es mucho más sencillo. La filosofía de GWT está orientada al desarrollo de aplicaciones web RIA en Java, mientras que st-js propone el desarrollo de aplicaciones web RIA en Javascript, pero escrito en Java, de tal manera que el código Java sea lo más parecido al Javascript generado por el traductor, utilizando cualquier librería Javascript que se desee, por ejemplo jQuery. Quienes han desarrollado en GWT, sabrán que el código Javascript generado es bastante complejo y poco se parece al código fuente original. A continuación muestro un pequeño ejemplo de un codigo st-js escrito en Java y su correspondiente traducción:

//Imports omitted here

public class MyForm {

   private final static String MY_WEB_SERVICE_URL = "myWebService";

   private final JQueryAndPlugins nameInput;
   private final JQueryAndPlugins submitButton;
   private final JQueryAndPlugins resultLabel;

   public MyForm() {
       nameInput = $("#nameInput");
       submitButton = $("#submitButton");
       resultLabel = $("#resultLabel");
       final MyForm that = this;
       submitButton.click(new EventHandler() {
           public boolean onEvent(Event event, Element elmnt) {
               that.buttonHandler();
               return true;
           }
          });
   }

   private void buttonHandler() {
       String name = (String) nameInput.val();
       callWebService(name);
   }

   private void callWebService(final String name) {
       final MyForm that = this;
       $.ajax(new AjaxParams() {{
           url = MY_WEB_SERVICE_URL;
           data = $map("name", name);
           success = new Callback3<string, string,="" jqueryxhr="">() {
               public void $invoke(String result, String textStatus, JQueryXHR xhr) {
                   that.displayResult(result);
               }
           };
       }});
   }

   private void displayResult(String result) {
       resultLabel.text(result);
   }
}

En este ejemplo se muestra una clase que representa un formulario web con un campo de texto (nameInput), un botón (submitButton) y una etiqueta (resultLabel). Al crear la clase, utilizando jQuery, se enlaza el evento “click” al botón para que el valor del campo de texto sea enviado como el parámetro “name” a un servicio web y el resultado del servicio web se despliega en la etiqueta.

A continuación, encontrarán el código Javascript generado:

var MyForm = function() {

   this.nameInput = $("#nameInput");
   this.submitButton = $("#submitButton");
   this.resultLabel = $("#resultLabel");
   var that = this;
   this.submitButton.click(function(event, elmnt) {
       that.buttonHandler();
       return true;
   });
};
MyForm.MY_WEB_SERVICE_URL = "myWebService";
MyForm.prototype.nameInput = null;
MyForm.prototype.submitButton = null;
MyForm.prototype.resultLabel = null;
MyForm.prototype.buttonHandler = function() {
   var name = this.nameInput.val();
   this.callWebService(name);
};
MyForm.prototype.callWebService = function(name) {
   var that = this;
   $.ajax({
       url : MyForm.MY_WEB_SERVICE_URL,
       data : {"name": name},
       success : function(result, textStatus, xhr) {
           that.displayResult(result);
       }
   });
};
MyForm.prototype.displayResult = function(result) {
   this.resultLabel.text(result);
};

Como se puede ver, el código generado es muy parecido al código Java original, lo cual demuestra la filosofía de st-js, que es realmente programar en Javascript, pero escribiendo en Java.

El código mostrado en el ejemplo se podría escribir en menos líneas, siguiendo un estilo más tradicional de escritura de código Javascript. Pero por más que se intente compactar el código, una de las desventajas de intentar escribir Javascript en Java, es que se requieren más código “boilerplate” a causa de la necesidad de utilizar clases internas anónimas. Con algo de paciencia, esto se solucionará con los cambios al lenguaje Java anunciados con la version 8. Sin embargo, considero que es una desventaja pequeña si se compara con las ventajas de st-js con respecto al desarrollo en Javascript puro:

• Verificación en tiempo de compilación del código Java antes de generar el código Javascript correspondiente. Es decir que el compilador Java, puede detectar referencias a clases, variables o métodos que no existen, asi cómo ayudar a garantizar el uso adecuado de los diferentes tipos.
• La mayoría de IDEs permiten el autocompletado de código Java, de una manera mucho más eficaz que muchos (si no todos) de los editores de código Javascript, lo cual mejora la productividad de los desarrolladores.
• Otra ventaja grandísima, es poder hacer “refactoring” del código usando esas mismas herramientas. Cambiar el nombre de una clase, variable o método es mucho más fácil en Java con las herramientas actuales que en Javascript.
• Algunas de las clases st-js se pueden utilizar tanto del lado del cliente (el código que es generado en Javascript) como del lado del servidor (por ejemplo un Servlet J2EE), lo cual permite mantener consistentes los tipos de datos que son intercambiados entre los dos mundos.

Estas ventajas son más visibles cuando el proyecto desarrollado requiere un uso extensivo de Javascript y cuando hay más de una persona trabajando sobre el mismo código. El mantenimiento del código también es mucho más sencillo.

Si está interesado en conocer más acerca del proyecto, puede encontrar más información en la página del proyecto.

Nota: noticia enviada anónimamente al portal

Comments

[Frank]

Se vé interesante. Puede configurarse para que optimize el código generado? osea que lo minimize, elimine rutas de ejecución que no se usan etc...?

[Abraham]

si uno quisiese usar esta librería con algo diferente de JQuery ¿ es posible?

[Juan]

Para la minimización del código javascript generado se puede utilizar algo como packtag para applicaciones web Java.

Para la optimización de rutas de ejecución, el generador de STJS no lo hace automáticamente. Sin embargo, se pueden utilizar herramientas, algunas de ellas disponibles por medio del IDE, que detectan código muerto o ineficiente, sobre el código Java original.

STJS se puede utilizar con cualquiere librería, no solo JQuery. Para ello, lo recomendado es crear los mocks de interfaz en Java de la librería que se quiera utilizar. El equipo de STJS provee las interfaces de JQuery en Java para STJS como ejemplo. En uno de los proyectos en los que utilisamos STJS creamos utilizamos CometD, para lo cual creamos mocks como:

public class CometD {
public void unregisterTransport(String string) {}
public void disconnect() {}
public boolean isDisconnected() {}
public Object addListener(String string, Callback1<CometDMessage> callback1) {}
public void removeListener(Object subscription) {}
public void clearListeners() {}
public void init(Map<String, String> $map) {}
public Object subscribe(String channel, Callback1<CometDMessage> callback1, Map<String, Map<String, Map<String, String>>> $map) {}
public void unsubscribe(Object subscription) {}
public void clearSubscriptions() {}
public void addTransportSuccessPostProcessor(String transportName, Callback3<Object, XMLHttpRequest, Array<Object>> postProcessor) {}
public void clearTransportSuccessPostProcessors(String transportName) {}
}