Explicación de la solución de diseño a código de Infragistics

En este artículo, explicaré los componentes y modelos principales de las soluciones de diseño a código de código bajo/sin código de Infragistics y desglosaré rápidamente los 3 tamaños diferentes de organizaciones para que pueda comprender mejor sus ciclos de desarrollo de aplicaciones y las formas en el que App Builder simplifica todo, desde el diseño hasta el código. Mi idea es ayudarlo a aprender cómo estas soluciones de diseño a código reinventan el diseño y desarrollo de aplicaciones web y qué las convierte exactamente en una necesidad para todos sus procesos.

¿Qué es el diseño para codificar?

En resumen, el diseño a código es el proceso de transición de una aplicación de software desde su fase de diseño hasta la implementación del software. Este proceso suele implicar traspasos entre varios equipos.

¿Qué son las herramientas de diseño a código?

sustantivo

Plataformas de diseño y desarrollo de aplicaciones web que funcionan como una única fuente de verdad para reunir equipos, eliminar transferencias y optimizar cada fase del proceso de diseño y desarrollo de aplicaciones web.

Así definiría yo estos aceleradores de desarrollo de apps.

La necesidad de herramientas que ahorren tiempo está creciendo y empresas de diferentes sectores (fintech, estudios clínicos, TI, salud, viajes, logística) han comenzado a verlas e implementarlas como soluciones críticas para el negocio. Por lo tanto, innovaciones como App Builder intervienen para lograr grandes avances y perfeccionar el diseño y desarrollo de aplicaciones web.

Vamos a sumergirnos.

Cómo crean aplicaciones web empresas de diferentes tamaños

El proceso se puede resumir rápidamente así: si desea crear una aplicación, comienza con un diseño que va a elaborar en términos de una aplicación. Dado que en el desarrollador individual/organización de tamaño pequeño, el diseñador y el desarrollador pueden ser, y a menudo son, la misma persona, será usted nuevamente quien tomará ese diseño y desarrollará la aplicación web para él. Una vez que esté satisfecho con lo que ha hecho, vuelva a compararlo con el diseño. Lo miras, dices "Todo parece estar bien, lo he probado todo" y luego lo implementas. Y esta aplicación web está activa.

Sencillo, ¿verdad? Pero espéralo.

Este proceso, que incluye una fase de diseño, desarrollo e implementación con pocas subfases, es típico de organizaciones de desarrolladores individuales/pequeñas tiendas que incluyen un máximo de cinco personas (generalmente desarrolladores) y, como máximo, un diseñador.

Si tomamos como comparación una organización de tamaño mediano, cuenta con alrededor de 250 empleados, no todos ellos desarrolladores, por supuesto.

Hay diferentes departamentos: ventas, marketing, un equipo de diseño designado, etc. Crean aplicaciones para ellos mismos o como contratistas, respondiendo a las necesidades de otras empresas y proyectos externos. El proceso de desarrollo de la aplicación es prácticamente el mismo, pero existen otros pasos intermedios.

Luego, tenemos organizaciones de gran tamaño y el proceso de desarrollo de aplicaciones aquí es el siguiente.

Más pasos, más aprobaciones, más partes interesadas que se involucran en cada paso: diseño, desarrollo, aprobación, implementación. Por lo general, los equipos tienen que colaborar a través de diferentes medios, plataformas, aplicaciones e incluso países y zonas horarias. Existen varios tipos de software que la organización utiliza para producir wireframes, ver diseños, diseños de pantalla y, al final, entregar una aplicación web real.

Además, se están planteando más requisitos para este tipo de organización y las aplicaciones a menudo se crean para fines y usos internos. Los integradores de sistemas entran en la categoría de organizaciones grandes, pero aún así crean principalmente aplicaciones grandes para otras organizaciones.

Si observamos a estas organizaciones, no existe una diferencia significativa entre los pasos que suelen seguir para desarrollar su software. Es la cantidad de ciclos de colaboración y traspasos lo que complica el proceso. Aquí surge uno de los mayores desafíos cuando los equipos colaboran: normalmente lo hacen a través de demasiados medios. Usan Outlook para correo electrónico, Teams para videollamadas, GitHub y herramientas web para tareas. También hay Visual Studio Online o TFs git, plataformas de diseño de gráficos vectoriales y marcos de colaboración en equipo que se combinan con todas las demás herramientas. Es mucho. Y hacer malabarismos entre herramientas y productos de software suele generar mucha fricción.

Nuestra solución considera no solo las operaciones de diseño y desarrollo sino también el proceso de colaboración. Comienza con un sistema de diseño que integra App Builder con código bajo o sin código para alinear la experiencia de usuario, la gestión de productos y el desarrollo de productos.

App Builder en pocas palabras

App Builder es una plataforma de código bajo que permite la alineación operativa, la colaboración profunda y la innovación continua a nivel de producto (DesignOps) con una experiencia multiusuario completa de código bajo para la entrega de aplicaciones web.

• Permite a los equipos de entrega de productos y UX empresarial poner en práctica la compatibilidad entre UX, gestión de productos y desarrollo de productos.
• Admite archivos de diseño Sketch y Figma
• Funciona como una única fuente de información entre los equipos empresariales, facilitando la colaboración con las partes interesadas.
• Permitir pruebas de usuario con análisis profundos y creación de prototipos basados en imágenes.

Partes centrales de la solución de diseño a código de Infragistics

Kits de interfaz de usuario: implementación de herramientas de diseño de terceros

Los kitsde interfaz de usuario siguen exactamente el mismo sistema de diseño para todas las tecnologías, lo que significa que los diseñadores pueden incluso cambiar la herramienta que elijan (por ejemplo, de Sketch a Figma) y seguirán teniendo soporte para continuar diseñando con los símbolos que proporcionamos para la herramienta específica.

• Se dirigen y ayudan a los diseñadores independientemente de la herramienta que utilicen, lo que les permite trabajar con una herramienta de su elección y al mismo tiempo pueden integrarse con App Builder, lo que reduce la fricción.
• Trabajar como fuente de verdad para los componentes de la interfaz de usuario, independientemente de la implementación de la plataforma.
• También hay adaptadores para Sketch y Figma, que utilizan los metadatos detrás de los símbolos del kit de interfaz de usuario para llevar las pantallas diseñadas al App Builder y visualizarlas en términos de componentes reales.

Componentes de la interfaz de usuario: implementaciones de componentes reutilizables específicas del marco

Sus comportamientos, apariencia y sensación están impulsados por el sistema de diseño.

• Reutilización de conceptos en todos los marcos.
• Cada nuevo componente está disponible en la plataforma App Builder.
• Controles para Angular, Blazor, Web Components

Modelo de aplicación común: la pieza central del sistema

Nos permite describir aplicaciones de manera independiente del marco.

• Resumen una forma de definir la estructura, las vistas y las interacciones de la aplicación.
• Le permite tener una misma aplicación en diferentes tecnologías.
• Toma un diseño, lo hace comprensible para App Builder y permite la generación de código para Angular, Blazor o Web Components (React aún en progreso)
• Define patrones comunes entre tecnologías.
• Generado por analizadores de herramientas de diseño además de los kits de interfaz de usuario, App Builder u otros complementos de terceros

App Builder: la joya de la corona de nuestra solución de diseño a código

En resumen, App Builder es la plataforma que le permite diseñar aplicaciones visualmente y generar código para ellas contra Angular, Blazor o Web Components (React próximamente) con poco código o sin código. Todo es arrastrar y soltar, lo que brinda una verdadera experiencia de desarrollo WYSIWYG. Tiene componentes en la caja de herramientas, diferentes tipos de diseños de vista entre los que puede elegir y navegación/estructura entre las vistas.

• Funciona para ahorrar tiempo y produce código para iniciar su aplicación con la misma o mejor calidad que el código que usted mismo escribiría.
• Le permite iniciar su aplicación desde cero, desde plantillas de proyecto listas para usar o desde archivos de diseño Figma, Sketch o Adobe XD ya terminados.
• Sirve como una fuente única de verdad que facilita la colaboración entre desarrolladores, diseñadores, gestores de proyectos y partes interesadas que pueden intervenir en cualquier etapa del ciclo de desarrollo de la aplicación.
• Consume el modelo de aplicación común a través de los analizadores (los metadatos proporcionados por los kits de interfaz de usuario) y lo produce a través de su superficie de diseño.
• Recibe mejoras y funciones continuas

Uno de nuestros clientes destaca que:

“Según mi experiencia, App Builder permite ahorrar tiempo en un 70% o más al crear un marco de aplicación completamente funcional. La colaboración con diseñadores, clientes y otras partes implicadas se acelera y optimiza considerablemente.

La capacidad de crear fácilmente una aplicación con los componentes y estilos de la interfaz de usuario utilizados en la aplicación final y mostrarlos de forma interactiva sin programarlos de antemano es una ventaja invaluable cuando se trata de cumplir con los requisitos del cliente.

La aplicación Angular generada por App Builder no es diferente de una aplicación creada con Angular CLI y se puede completar con el flujo de trabajo habitual”.

Vista previa y generación de código

Code Gen es un servicio que consume el modelo de aplicación común y produce código específico del marco para aplicaciones.

• Comprende la transición de un modelo de aplicación abstracto al producto específico que implementa los componentes de la interfaz de usuario en la aplicación.
• Entiende los patrones de aplicaciones comunes: enrutamiento, comportamientos, transiciones.
• Crea una estructura de repositorio específica del marco.
• Puede implementar la aplicación generada en un nuevo repositorio de GitHub.
• ¿Pueden las relaciones públicas actualizar un repositorio de GitHub existente?
• En el futuro, podremos iniciar una compilación y una implementación en Azure de la aplicación generada.
• Le permite activar la vista de código y verla al lado de la aplicación en ejecución.
• Hay generación de código para Angular o Generación de código Blazor

Integración de GitHub

A través de App Builder, habilitamos la integración de GitHub, donde puede sincronizar el proyecto en el que trabaja desde la superficie de diseño con un repositorio de GitHub donde puede residir el código real generado en la plataforma de destino.

• El código generado a partir de diseños se puede cargar directamente en GitHub como repositorios de nuevos usuarios.
• Las actualizaciones de diseños con el repositorio de GitHub asociado se pueden iniciar como una solicitud de extracción a través del App Builder
• App Builder ofrecerá implementación de la aplicación generada directamente en Azure
• Code Generator crea acciones de GitHub yml para implementación y CI

Cuando estás en el sector de TI, rápidamente te das cuenta de que los agentes, los procesos y los factores que afectan la forma en que actualmente creamos aplicaciones web cambian constantemente y se vuelven más complejos.

Hay:

Equipos de fusión, desarrolladores individuales, diseñadores de un solo jugador, partes interesadas, PM, escritores de UX, especialistas en marketing, evaluadores de usabilidad, clientes con sus requisitos específicos, consumidores con conocimientos digitales que pueden descartar muy rápidamente los desarrollos de software que carecen de la velocidad, funcionalidad y exhaustividad que necesitan. se utilizan para.

Fases de ideación, diseño, transferencias, codificación, POC, iteración, pruebas, implementación, marketing, etc.

Tiempo comprimido, entornos de trabajo dinámicos, cambio de prioridades, transformación digital, comunicación dispersa en diferentes canales.

Suena demasiado complejo, lleva demasiado tiempo y parece que realmente le vendría bien algo de automatización y herramientas.

Es por eso que los “reinventores” del diseño y el desarrollo como App Builder intervienen, aceleran DesignOps y DevOps y perfeccionan la forma en que creamos aplicaciones web modernas con un tiempo de comercialización aproximadamente un 80 % mayor.