Durante los últimos 4 años, he trabajado con el equipo de migración del DRIT en el problema de la migración de la interfaz gráfica de usuario (GUI). Hemos publicado varios artículos y hemos migrado con éxito aplicaciones basadas en diferentes marcos de trabajo de GUI. Hoy, veremos juntos cómo realizamos un proyecto tan grande. En resumen, les presentaré la Ingeniería Dirigida por Modelos y la meta-modelización que hicimos para la GUI.
La Ingeniería Dirigida por Modelos es una buena solución cuando se quiere realizar algún análisis sobre una aplicación. Básicamente consiste en representar una aplicación con un nivel de abstracción superior al del código. Estoy seguro de que conoce la calidad del software SonarQube. Estos programas analizan su código base con un parser y crean un modelo para recuperar información como el olor del código, la vulnerabilidad, etc.
Para migrar Berger-Levrault, aplicamos un tipo de análisis similar. En primer lugar, realizamos una extracción de aplicaciones para reunir conceptos abstractos como clases, métodos e invocaciones de métodos. A continuación, recuperamos de esos conceptos la interfaz gráfica de usuario definida para cada aplicación. Pero... ¿Cuáles son los conceptos necesarios para representar una interfaz gráfica de usuario?
Conceptos de GUI: ¿Qué compone una interfaz gráfica de usuario?
Una interfaz gráfica de usuario puede dividirse en tres partes principales: visual, de comportamiento y de negocio. Cada parte tiene su responsabilidad y, al realizar la migración de aplicaciones, requiere un trabajo específico.
- Código visual describe el aspecto visual de la GUI. Contiene los elementos visuales de la interfaz. Define las características inherentes de los componentes, como la posibilidad de hacer clic o su color y tamaño. También describe la posición de estos componentes en relación con otros (layout).
- Código de conducta define el flujo de acción/navegación que se ejecuta cuando un usuario interactúa con la GUI. También es posible que las acciones se desencadenen automáticamente tras un exterior.
- Código comercial es específico de una aplicación. Incluye las reglas de la aplicación, la dirección del servidor distante y los datos específicos de la aplicación.
Representación del código visual 🖥️
El primer trabajo que dirigimos para migrar aplicaciones fue representar el Código Visual de cualquier GUI. Como estamos trabajando principalmente en aplicaciones web, echamos un vistazo a w3schoolsque es una referencia mundial para aprender HTML. Describe los principales componentes de HTML y sus atributos. Nos permite construir una buena representación de lo que es una GUI.
El núcleo pretende representar los principales elementos de la GUI. El elemento central es el Widget. Representa un elemento visual de la GUI: un botón, un texto, un panel o un conjunto de campos. Como puede ver, un Widget puede ser un Container. Container pretende representar un widget que puede contener otro. Por ejemplo, es el caso del panel. Los widgets pueden tener varios atributos. Los atributos configuran el aspecto visual de un widget: color, anchura, altura, etc.
Además del núcleo, representamos varios conceptos de widgets y de diseño. Los widgets tienen como objetivo obtener una representación precisa de la GUI y el Layout nos permite representar las posiciones de los widgets. En total, definimos más de 100 conceptos para representar la aplicación de Berger-Levrault. Y seguimos añadiendo otros nuevos.
Representación del código de comportamiento ⚙️
El segundo paso es la representación del código de comportamiento. El comportamiento es el código que se ejecuta cuando los usuarios finales interactúan con la interfaz gráfica de usuario y modifica u obtiene información de la parte visual. Así, identificamos dos categorías de código de comportamiento: los eventos y la manipulación de la UI.
- Los eventos corresponden a las interracciones que pueden realizar los usuarios finales. Existen: clic, cambio, envío, etc.
- La manipulación de la interfaz de usuario corresponde al código que se ejecuta y que modifica la interfaz gráfica de usuario
Para representar el código de comportamiento, también creamos un paquete de comportamiento. Como puedes ver, incluye la parte de eventos (lado derecho) y la parte de manipulación de la interfaz de usuario (lado izquierdo). Para los eventos, definimos: click, change, error, submit complete, y submit. Para la UIManipulation, definimos la acción de abrir un popup o diálogo, la navegación a otra página web, y el acceso a un atributo de un Widget.
Representación del código empresarial ⚖️
Por último, tuvimos que representar el código de negocio. El código de negocio incluye los datos manipulados por la aplicación así como los servicios del backend. Aquí, presentamos sólo la representación de los datos.
Para el código de negocio, el concepto principal es DTO. DTO, o Data Transfer Object, representa datos que pueden ser serializados y transferidos al backend o fácilmente manipulados por el front-end. El DTO puede ser una colección de DTO, un diccionario de DTO, una primitiva o un Business Type. Los Business Types son los que se manipulan en nuestra aplicación GWT: CampagneDTO, UserDTO, etc. Comprender esos datos es esencial para la migración. Con ellos, podemos recrear DTO en el idioma de destino.
En conclusión
Hemos creado una visualización de todos esos paquetes. Usted puede descárguelo aquí. Ahora tenemos una representación completa de la interfaz gráfica de usuario. Todavía hay varias preguntas. ¿Cómo extraer un modelo basado en el código fuente? ¿Cómo generar la aplicación de destino? ¿Cómo utilizar este modelo para obtener buenas métricas en el código? ¿Identificar un nuevo tipo de olor de código? ¿O crear una mejor línea de productos? En primer lugar, podemos aprender a utilizar modelos gracias a Moose o MoDisco. Entonces, ¡propongamos nuevas ideas en el área de comentarios o contactemos con nosotros con grandes ideas!
