domingo, 13 de enero de 2013

HTML5 Builder Review

Hace uno días, me enteré de la existencia de HTML5 Builder de la marca Embarcadero.

Todos los Delphi, C++ Builder y compañía, finalmente han ido a parar a estar compañía, que continúa sacando versiones de estos software que tanto utilicé en el pasado.

Y es que realmente, llevo tratando de encontrar alguna herramienta RAD que fuera por el estilo para la generación de software moderno. Yo recordaba que con Delphi (y C++Builder), hacer aplicaciones con bases de datos, era realmente sencillo, aunque todo se complicó un poco más con la utilización masiva de SQL (recordemos, que para las versiones C++ Builder 1, 2 y 3, los servidores SQL no estaban al alcance de cualquiera...; y mucha gente hacía sus aplicaciones de gestión con Clipper...).

Pasó un tiempo al que me dediqué a muchas otras cosas, y cosa así de hace un año, estuve haciendo otra prospección en cómo habían avanzado los entornos de desarrollos. Eché un vistazo a los Embarcadero de la época, y, para mi sorpresa, no se había avanzado mucho.

Sin embargo, con la aparición de HTML5 Builder, sí que me parece un salto cualitativo bastante importante. Poder diseñar con RAD (de verdad), aplicaciones a 3 capas.

Me he bajado la versión de evaluación de 30 días, y estoy haciendo algunos experimentos, así que aprovecho para hacer un pequeño artículo por si a alguien le puede resultar interesante.

Así, que vamos a echar un vistazo a algunas de las características.

Interfaz

Sin duda, lo que menos me ha gustado. Estos colores tan oscuros, me parece que estamos manejando algún juego, o viendo alguna página web. La barra de iconos, me parece que se superpone un poco.
Página Principal de HTML5 Builder
Página Principal de HTML5 Builder


Tipos de Proyectos

Estamos analizando la versión HTML5 Builder, y no ninguna otra de Embarcadero, por lo que aquí las opciones está más limitadas. En concreto, existen 4 tipos de proyectos que se pueden crear con HTML5 Builder:

  • Client Mobile Application: aplicaciones móviles que pueden funcionar independientemente de que haya un servidor web
  • Client Web Application: son aplicaciones Web que tampoco necesitan ni de una conexión a internet
  • Server Mobile Application: son aplicaciones Web específicas para móviles
  • Server Web Application: son aplicaciones Web típicas, modelo 3 capas.

Opciones para la creación de Proyectos en HTML5 Builder
Opciones para la creación de Proyectos en HTML5 Builder


Creando una aplicación "Server Web" 

Esta es la pantalla que nos aparece inicialmente.
 Como recordaba de Delphi / C++ Builder, tenemos una paleta de componentes, que podemos colocar directamente en el formulario.



HTML5 Builder - Formulario Vacío
HTML5 Builder - Formulario Vacío

HTML5 Builder - Formulario con botón
HTML5 Builder - Formulario con botón

y el editor de código.

HTML5 Builder - Editor de código
HTML5 Builder - Editor de código

 Me ha gustado bastante el Code Completion de PHP que incorpora. Es bastante bueno, y prácticamente no me ha fallado en nada.
HTML5 Builder - Completado de Código (Code Completion)
HTML5 Builder - Completado de Código (Code Completion)

Y la aplicación en acción (simplemente pulsando F9) en un navegador:

HTML5 Builder - Aplicación en funcionamiento: Página web
La aplicación en funcionamiento

Ahora con formularios un poco más complejos:

HTML5 Builder: Formularios complejos
HTML5 Builder: Formularios complejos

Conclusiones 

Me parece un buen producto, aunque realmente no he tenido tampoco mucho tiempo para profundizar. Comento aquí lo que me parecen los puntos fuertes y débiles. De todas formas, aun creo que esta en su primera versión, y que realmente tendrá muchas más mejoras en el futuro.

Puntos Fuertes

 Me ha gustado mucho que todo sigue siendo tan automático como antes. Inicialmente, el proyecto viene configurado para no utilizar AJAX, así que si creamos un "callback" al botón, es transparente el envío de los datos del formulario al servidor, y lo puedes utilizar directamente en el código:

Un ejemplo de código:


    function MiBotonClick($sender, $params)
    {
             $this->Back->Caption = 
                   $this->edProjectName->Text . "->Project saved";
    }

.
Cuándo se llame a esta función, internamente, se habrá creado un formulario en el HTML, se habrán enviado los campos del formulario, y estarán disponibles en los datos del formulario. Por ejemplo, el campo edProjectName automáticamente es rellenado con los valores que se han escrito en el formulario. Automáticamente se ejecuta el evento correspondiente.

Como comenté antes, el completado de código es muy bueno, y su ayuda contextual.

Puntos Débiles

He visto que han desaparecido muchos componentes que hacían la vida con las bases de datos más sencillas. Es una pena. De todas formas, voy a ver si para un próximo artículo, me monto una pequeña base de datos, y hago alguna prueba algo más compleja.

Para nota

Habilitar AJAX es bastante sencillo. Simplemente, en las propiedades del formulario hay que activar UseAjax (true) y UseAjaxUri (URL de la página).
A continuación, se crea un evento JavaScript en el botón, y se escribe el siguiente código:

   function MiBotonJSClick($sender, $params)
    {
        echo $sender->ajaxCall("MiBotonClick"); 
        ?>
        //begin js

        //end
        <?php
    }