BLOG

Componentes HTML para integrar con aplicaciones de gestión en el evento life is soft 2019

Por [N4] mconde el | 1 Comment

Empezamos con la primera de las ponencias que tuvimos la suerte de disfrutar en el pasado evento life is soft de Velneo, donde Fernando Rueda de la empresa Dinacom, nos mostró cómo es posible utilizar componentes HTML prácticamente de forma nativa, es decir, como si se tratara de un propio objeto nativo de la plataforma.

Dinacom es una empresa especializada en el desarrollo de aplicaciones y uno de sus principales sectores es el software para gestión de proyectos en agencias de publicidad.

¿Qué son y para qué sirven los componentes HTML?

Si trabajas con desarrollos web, ya sabrás que los componentes web o HTML son un estándar del W3C que nos permiten desglosar el desarrollo de aplicaciones web en pequeños contenedores que encapsulan marcado, código JavasScript y estilos CSS, recibiendo el nombre de componentes.

Esto nos permite reutilizarlos en diferentes partes de nuestras aplicaciones y también para exponer nuestros servicios en otras aplicaciones con simplemente una etiqueta HTML.

Los web components o componentes HTML surgieron como propuesta por parte de Google a la W3C, prácticamente a la par que el framework MVC de JavaScript AngularJS, también creado por la compañía del buscador. En este framework se presentaba el concepto de “directiva”, en el que podíamos crear etiquetas HTML propias para encapsular un marcado HTML con su propio ámbito de ejecución.

¿Qué tipo de software necesitan las empresas o agencias de publicidad?

Las agencias de publicidad necesitan un ERP vertical especialmente creado para aportar soluciones en la gestión y organización de la empresa. El fin último es poder gestionar con el software todos los procesos estándares y específicos del sector para ayudar a las agencias publicitarias a tener el control centralizado de todo lo que ocurre en la empresa, aportando en tiempo real información valiosa para la toma de decisiones de cara a sus clientes y proveedores.

Proveedor de software para agencias de publicidad

Dinacom es una empresa especializada en el desarrollo de aplicaciones y uno de sus principales sectores es el software para gestión de proyectos en agencias de publicidad.

Dinacom son grandes expertos en la creación de webs, y desde su marca FactoriaBiz han sido reconocidos con varios premios por sus trabajos en este ámbito.

Fernando nos explicó cómo utilizan componentes de Syncfusion para integrarlos plenamente con Velneo. Syncfusion dispone de múltiples ejemplos de componentes.

Fernando explicó los pasos que usan para integrar dichos componentes:

  • Inyectar
    • Componentes web (HTML, JS, CSS, …)
  • Inicializar
    • Configuración inicial del componente
  • Interactuar
    • Simulación de clics para notificar eventos a Velneo
  • Depurar
    • Resolver incidencias técnicas (mensajes, logs, …)

Se centró en explicar primero una serie de tips que hay que tener en cuenta cuando integramos componentes HTML de forma habitual, sin usar la propuesta que nos mostró en su presentación.

En la parte de inyectar código comentó entre otras cosas, la necesidad de reemplazar ” por \c , la necesidad de editar el código HTML con un editor externo a Velneo vDevelop y la necesidad, en algunos casos, de adjuntar ciertos ficheros.

Para inicializar los componentes explicó la necesidad de concatenar variables en un string formando el código necesario y también el uso desde una URL (file:///) mediante algún mecanismo de sustitución de patrones o códigos tipo ##nombre##.

Para la simulación de un clic usaron la propiedad setLinkDelegationPolicy de VCWebView donde recogen los parámetros retornados.

Para depurar, Fernando comentó cómo con su sistema evitan el tener que añadir mensajes de tipo alert() desde Javascript o el típico volcado a fichero, permitiendo con su sistema trazar el código del componente Javascript para poder realizar depuración del código.

Ejemplo de integración componentes HTML con Velneo

Entre muchos de los ejemplos de integración que mostró, uno de los más interesantes fue un la integración de un mapa Bing con los registros de su base de datos Velneo.

Al final de su presentación y como resumen, Fernando nos mostró cómo es posible tener todo bajo control (organizando todos tus componentes bajo una misma estructura), mantenerlo simple (fácil de hacer y mantener) u cómo es posible reutilizar y disfrutar haciéndolo (reutilizar tus componentes con el mínimo esfuerzo).

Os dejamos la presentación completa sobre componentes web del_life_is_soft_2019. Si estáis interesados en conocer todas las posibilidades que ofrece Dinacom, no dudéis en contactar con ellos.

Más sobre componentes web

Los componentes de web se basan en cuatro especificaciones principales:

Elementos personalizados
La especificación de los elementos personalizados sienta las bases para el diseño y el uso de nuevos tipos de elementos DOM.

Sombra DOM
La especificación “shadow” DOM define cómo utilizar el estilo encapsulado y el marcado en los componentes web.

Módulos ES
La especificación de los módulos ES define la inclusión y reutilización de los documentos JS de una manera basada en estándares, modular y eficiente.

Modelo HTML
La especificación de elemento de modelo HTML define cómo declarar fragmentos de marcado que no se utilizan al cargar la página, pero que se pueden instanciar más tarde en tiempo de ejecución.

En este artículo puedes leer más sobre qué son los componentes web.

Ventajas de usar componentes web nativos

Ventajas técnicas

En cuanto al desarrollo web tiene muchas ventajas técnicas, como por ejemplo:

  • Declaración: Puede declarar fácilmente los componentes de su página que están listos para funcionar
  • Composición: Puede componer aplicaciones usando trozos de código más pequeños, con el comando Shadow DOM
  • Reutilización: Puede importar, utilizar y reutilizar elementos en aplicaciones.
  • Mantenimiento: El código compartimentado y reutilizable es la mejor manera de mantener la legibilidad del código; reduce el tamaño general de la aplicación y simplifica la depuración.
  • Expansibilidad: Los elementos del navegador o los componentes web personalizados se pueden ampliar con la API de elementos personalizados.
  • Alcance: Shadow DOM proporciona un alcance DOM y CSS donde los estilos no se filtran y el componente DOM es todo local. Usted define el elemento api dentro de su componente y no se filtra en el ámbito global.
  • Interoperabilidad: Los componentes web nativos son interoperables en el nivel más bajo de los navegadores, que es DOM.
  • Productividad: El uso de componentes ya construidos y la iteración por encima de ellos nos permite desarrollarnos más rápido y de forma más productiva.
  • Accesibilidad: Utilizando y ampliando los elementos existentes del navegador, la accesibilidad predeterminada del navegador viene con él.

Consistencia de la apariencia de los desarrollos

Por otro lado también tiene muchas ventajas en cuanto a la consistencia del look and feel de tus desarrollos web. La división del código de su aplicación de front-end en librerías de componentes o incluso en sistemas de diseño garantiza la consistencia del aspecto de tus desarrollos.

También proporciona un beneficio adicional por su capacidad de ser utilizado por todos los desarrolladores, independientemente de la pila de tecnología que use cada cual.

Los componentes web también son extremadamente útiles para los equipos de desarrollo que trabajan en muchos proyectos diferentes.

El principio programación DRY (Don’t Repeat Yourself) en la programación en general es crucial, especialmente cuando se programan aplicaciones para la web (y un aspecto que valoramos mucho en Velneo porque afecta directamente a la rentabilidad de los desarrollos). Los componentes web se pueden utilizar para garantizar un aspecto coherente sin tener que volver a crear todo desde cero una y otra vez al emprender un nuevo proyecto.

Rentabilidad para la empresa de desarrollo

Si eres un coordinador de desarrollo o un directivo de la empresa, debes tener en cuenta que los componentes web nativos te ahorran dinero.

Los desarrolladores tendrán la capacidad de concentrarse únicamente en crear componentes reutilizables nativos, similares a los legos, y utilizar estos bloques en otras aplicaciones de forma compartida por todos los programadores. Tus equipos podrán crear e implementar aplicaciones mucho más rápidamente. Esto lleva a que se dedique menos tiempo al desarrollo de nuevas funciones.

Eficiencia para el desarrollador

Desde la perspectiva de un desarrollador, los componentes web nativos ayudan a gestionar el proyecto de forma más eficiente. El código será más consumible, más fácil de usar.

El código puede ser compartido entre los equipos de desarrollo con mayor facilidad. Y como subproducto, la calidad del código mejorará, ya que los desarrolladores pueden reutilizar los componentes existentes.

Por último, las aplicaciones que utilizan componentes web nativos aprovechan las ventajas: cuando se añade una corrección o se añade una nueva característica, estos cambios se propagan a cada instancia.

Estándar de los navegadores

Los componentes web son un estándar que fue añadido por el “World Wide Web Consortium” o W3C. El W3C establece o define el estándar de características que los navegadores pueden implementar.

Los componentes web permiten a los desarrolladores escribir aplicaciones de una manera más modular, dividiendo las aplicaciones en trozos lógicos más pequeños con funcionalidad reutilizable.

Hace unos tres años, todos los proveedores de navegadores se reunieron y acordaron un nuevo conjunto de estándares web para definir los componentes web.

Buenas prácticas de desarrollo

Contar con buenas prácticas es siempre una sabia decisión para definir el estilo de desarrollo dentro y entre los diferentes programadores o equipos de desarrollo. Los componentes nativos de la web funcionarán bien en todas partes. Se basan en estándares web y son ya el presente y el futuro de la programación en este entorno.

¿Qué es life is soft?

life is soft es el mayor evento para programadores de software empresarial en España que reúne a desarrolladores especializados en hacer aplicaciones de software para empresas de todo tipo… Aplicaciones de robótica integradas con producción, de gestión de reservas masivas online, de organismos públicos estatales que mueven un gran volumen de datos, de aplicaciones críticas hospitalarias o de seguridad nacional o ERPs integradas con CAD por citar unas pocas.

El evento está auspiciado por la plataforma Velneo, tecnología de programación especialmente concebida para el desarrollo de aplicaciones de software de gestión y aplicaciones empresariales.

El evento, aunque no se celebra todos los años, sí se viene celebrando con regularidad desde hace más de 12 años. La filosofía del life is soft pretende convencer a las empresas de desarrollo de software empresarial y a los departamentos de informática de empresas de todo tipo que la programación de software de gestión para mejorar la rentabilidad no tiene por qué ser un trabajo arduo, ni repetitivo ni aburrido, sino todo lo contrario, divertido, motivante y “suave” siempre y cuando se cuente con las herramientas adecuadas.

Por lo general la mayoría de los programadores no son ni muy buenos ni muy malos, pero los que más éxito tienen son aquellos que saben elegir la mejor tecnología o el mejor lenguaje de programación para cada tipo de proyecto de desarrollo.

Si quieres más información sobre life is soft no dudes en ponerte en contacto.

 

Velneo es el entorno ágil para el desarrollo
de aplicaciones empresariales

DESCARGAR VELNEO

One Response to "Componentes HTML para integrar con aplicaciones de gestión en el evento life is soft 2019"
  1. [N3] pacosatu dice:

    Hola.

    Componentes Web, una tecnología madura que aporta un plus de productividad en el desarrollo de aplicaciones web y que hasta ahora (hasta la llegada de Chromium) hemos tenido que encajar con calzador en nuestras aplicaciones.
    Excelente resultado de integración por parte de Dinacom del paradigma de “Desarrollo basado en componentes”.

    Espero que sea un deseo de todos el avanzar en nuestros desarrollos nativos con Velneo, aplicando el mismo paradigma que con los Componentes web, es decir, arrastrar y soltar en el proyecto o formulario verdaderas piezas de software más o menos complejas, pero siempre con un interface compatible con LifeIsSoft.

    Que en próximas ediciones de life is soft hablemos de Componentes Velneo.

    Saludos
    Paco Satué

Deja un comentario

Esta web utiliza cookies. Si continúa navegando acepta dichas cookies y nuestra política de cookies. Gracias. ACEPTAR

Aviso de cookies