Generación de código Angular: una guía paso a paso utilizando App Builder

¿Se pregunta cómo manejar la generación de código Angular de manera más rápida y sencilla? Esta guía detallada le mostrará el camino, lo que le permitirá pasar del diseño al código un 80% más rápido que nunca.

Entonces, si quieres:

• Crea una nueva aplicación Angular a partir de un diseño Figma, utilizando nuestro kit de interfaz de usuario Figma.
• Genere código Angular listo para producción con un solo clic, eliminando la codificación manual.
• Obtenga una vista previa de la aplicación y el código y vea una aplicación de muestra para comprobar cómo funcionan juntos un sistema de diseño + Angular + App Builder.
• Cambie de Angular a React, Web Components o Blazor.

Entonces, encontrarás esta guía y todos los pasos incluidos que te serán de gran utilidad cuando comiences tu próximo proyecto.

¿Qué es la generación de código?

La generación de código se describe como un proceso mediante el cual se compila un modelo intermedio de código fuente en un formato que puede ser ejecutado de forma nativa por un microprocesador que ejecuta un sistema operativo como Windows, Mac OS o Linux. El proceso de "compilar" su código fuente es esencialmente tomarlo de un formato (tal vez C # o TypeScript) y convertirlo en otro formato (como Intermediate Language como DLL o EXE, o JavaScript).

Dado que los procesadores requieren entradas específicas y operan de maneras específicas según el tipo de hardware en el que se ejecutan, los fabricantes de compiladores siempre enfrentan el desafío de garantizar que la pieza de ejecución nativa se ejecute correctamente en el sistema de destino.

Si usa una versión anterior de .NET Framework:

• El código fuente se compila en un lenguaje intermedio (IL o MSIL, lenguaje intermedio de Microsoft).
• A continuación, Common Language Runtime (CLR) compila este código IL "Just-in-Time" (JIT).
• CLR ejecuta el código compilado JIT en lenguaje de máquina en el sistema operativo Windows en tiempo real.

Con versiones más recientes de .NET (como .NET Core y .NET 5):

• Microsoft proporciona compiladores de lenguaje intermedio y tiempos de ejecución que funcionan en varios sistemas operativos.
• Estos incluyen Linux y macOS, además de Windows.

El código fuente que escribes es el mismo; Es responsabilidad de los compiladores asegurarse de que su proceso de generación de código produce el lenguaje intermedio correcto y que el tiempo de ejecución de la máquina de destino puede ejecutarlo.

Esta figura demuestra visualmente el proceso.

Compilación JIT versus compilación anticipada

Para marcos como Angular o Xamarin, el concepto de AoT, o compilación anticipada, es esencial. Esto significa que el código generado a partir del proceso de compilación se compila para la ejecución nativa en cualquier máquina o dispositivo de destino en el que se ejecute. Por ejemplo, si compila AoT la aplicación de Xamarin.iOS, el código compilado generado es nativo de iOS. No es necesario un tiempo de ejecución en el dispositivo para ejecutar la aplicación que no sea el sistema operativo iOS nativo. En versiones anteriores de Xamarin, las aplicaciones no se compilaban con AoT. Esto significaba que el tiempo de ejecución mono debía implementarse en el dispositivo para ejecutar el código en tiempo de ejecución. Las aplicaciones compiladas de AoT tienen un mejor rendimiento de inicio y, según las especificaciones del dispositivo, una ejecución en tiempo de ejecución potencialmente más rápida.

¿Qué es Angular generación de código?

Angular generación de código es el proceso de usar herramientas específicas que crean metadatos (o un lenguaje intermedio) para obtener una salida de código utilizable, como el código fuente de uno o más componentes Angular y/o una aplicación Angular completa. Esta salida estaría en un formato limpio y utilizable que luego puede ser utilizado por un desarrollador para modificaciones adicionales y luego finalmente "compilado" en un formato generado que se ejecutará en el navegador como JavaScript y HTML.

Hay varias maneras de lograr esto:

1. Usando la CLI (interfaz de línea de comandos) Angular, con plantillas que usan esquemas Angular que generarán toda o parte de una aplicación. La CLI de Angular del equipo de Google es la forma más rápida de generar la estructura y las dependencias de una aplicación Angular. Un esquema es un generador de código basado en plantillas que incluye instrucciones y lógica para agregar o modificar código de un proceso de generación de código.
2. Usando la CLI de Infragistics, que va un paso más allá que la CLI Angular.  Si bien aún se basa en plantillas que utilizan esquemas Angular, la CLI puede agregar componentes de interfaz de usuario como gráficos, cuadrículas de datos Angular e incluso escenarios de aplicación completos a una aplicación Angular nueva o existente. Incluso puede crear sus propias plantillas personalizadas basadas en las necesidades de su equipo o negocio para acelerar el desarrollo de aplicaciones y generar código en segundos.
3. Usar el kit de interfaz de usuario de Figma Indigo.Design para Material que se asigna a nuestro conjunto de herramientas Ignite UI for Angular. La mejor parte es que el desarrollador aún tiene control total sobre el código fuente que se genera a partir del archivo Figma; No hay límite en la lógica de la aplicación, las modificaciones y los cambios de código. Una herramienta como esta es útil, ya que genera todo el CSS, HTML y TypeScript necesarios para que se ejecute la aplicación Angular.
4. Con el App Builder de código bajo, un desarrollador puede usar una herramienta WYSIWYG basada en la web para diseñar y generar código de una aplicación Angular completa. App Builder presenta el concepto de que los equipos pueden diseñar y crear aplicaciones reales a una velocidad vertiginosa en un entorno de arrastrar y soltar WYSIWYG basado en la nube. Esto incluye código, diseño, CSS e incluso datos.

Para ayudarlo a aprender cómo hacerlo, publiqué recientemente una descripción general completa del producto App Builder y un tutorial. Haga clic a continuación para verlo.

Paso a paso: Angular generación de código a partir de un diseño Figma

En el entorno de desarrollo ágil y acelerado de hoy en día, pasar de un diseño de UX aprobado a un código utilizable y ejecutable debe suceder más rápido que nunca. A los desarrolladores se les da la tarea casi imposible de convertir un diseño de UX en una aplicación en ejecución en días y, en algunos casos, incluso horas. Se les pide a los diseñadores que recopilen comentarios de los usuarios durante un proceso de diseño iterativo, pero las herramientas tradicionales utilizadas no coinciden con las necesidades de un proceso ágil de UX. Aquí es donde plataformas como App Builder pueden ayudar.

¿Cómo generar código Angular a partir de Figma? 

El kit de interfaz de usuario Figma Indigo.Design para Material se asigna a nuestro conjunto de herramientas de interfaz de usuario Ignite UI for Angular para agilizar su proceso de generación de código Angular. De esta manera, puede convertir fácilmente todos los archivos de diseño estáticos en aplicaciones interactivas y receptivas con componentes de interfaz de usuario, marca y estilo reales. Pero, ¿cómo empiezas con eso?

Tenga en cuenta que el kit puede ser utilizado por todos los usuarios Figma, independientemente de su plan. Sin embargo, existen limitaciones para los usuarios gratuitos en comparación con los usuarios Pro: como usuario de cuenta gratuita, no puede usar los componentes de la biblioteca directamente desde el panel Activos. Por lo tanto, debe copiar todos los componentes necesarios del archivo del kit de interfaz de usuario y pegarlos en el archivo del proyecto.

Paso 1: Descarga e instalación del complemento Figma: puede hacerlo desde la página Descargar activos o a través de los enlaces directos para el kit de interfaz de usuario Figma,  Complemento para Figma, y Aplicaciones de muestra 

Paso 2: Crear un duplicado del kit de interfaz de usuario de la comunidad Figma.

Vaya a la Comunidad Figma y busque Indigo.Design kit de interfaz de usuario para material. Una vez que duplique el archivo (seleccionando Abrir en Figma), aparecerá en su carpeta Borradores.

Paso 3: Mover el archivo al espacio de su equipo

A continuación, use la flecha de chevron justo al lado del nombre del archivo para mover el archivo de "Borradores" al espacio de su equipo.

Notarás que justo debajo del nombre del archivo, se muestra el nombre del proyecto del equipo al que has movido el archivo, por ejemplo, "Testing". 

Paso 4: Publicación de la biblioteca y uso de sus activos

Una vez que se mueve el archivo, vaya al panel Activos. Haga clic en el icono Bibliotecas y debería poder publicar este archivo como una biblioteca, que distribuirá todos los estilos, tipografía y componentes al resto de su equipo. La activación es desde el icono Activos > Bibliotecas > botón Publicar.

A continuación, abra el archivo de diseño Figma donde desee usar los componentes de la biblioteca del kit de interfaz de usuario. Vaya al panel Activos, haga clic en el icono Bibliotecas, vaya a Sus equipos, seleccione la biblioteca deseada, haga clic en Agregar al archivo y comience a usar los componentes.

Paso 5: Crear una aplicación en App Builder

Paso 6: Elegir temas y colores: cinco paletas con diez variaciones de color disponibles
Paso 7: Manejo de activos y envío a App Builder (imágenes o ilustraciones)

Para obtener una visión más detallada de los pasos, puedes consultar nuestra página de ayuda dedicada al Figma plugin, que te guiará a través de todo el proceso de diseño a código.

Además, puedes ver la guía de video Figma to Code in App Builder y verlo todo en acción.

¿Qué es una plataforma de generación de código?

La entrega de aplicaciones es más que el proceso de compilar código fuente y generar alguna salida que se ejecutará en un procesador nativo de destino. Existe un proceso para ofrecer experiencias hermosas a los clientes que abordan los problemas que están tratando de resolver. Una parte clave de este proceso es el diseño. En un proceso de diseño, un equipo de diseño trabajará con las partes interesadas o los clientes para comprender sus necesidades, luego creará un prototipo de la aplicación en una herramienta de su elección (como Figma) para que las partes interesadas lo prueben y lo usen.

El proceso es iterativo; Implica obtener comentarios de las partes interesadas, actualizar el diseño en función de los comentarios y las críticas, y luego probarlo nuevamente con las partes interesadas. Se ha demostrado que este proceso iterativo es la piedra angular de los proyectos de software exitosos. Este proceso de diseño iterativo ocurre antes de que se escriba cualquier código. Eventualmente, hay una "transferencia" de un equipo de diseño a un equipo de desarrollo del diseño aprobado por el cliente. En este punto, los equipos de desarrollo usarán sus propias herramientas para descifrar el diseño que se les entregó y comenzar a escribir código.

Es en esta transferencia que existe el riesgo de desconectarse de la intención del diseño y de lo que se construye.

Si un equipo de producto (que incluye equipos de diseño y equipos de desarrollo) estandariza en una plataforma de generación de código, el riesgo y los errores en la transferencia se reducen o eliminan significativamente. Una plataforma de generación de código debe incluir más que solo la pieza de "código"; Debe incluir todos los aspectos de la entrega de software, como:

• Diseño de pantalla
• Flujos de usuarios
• Creación de prototipos
• Coedición
• Componentes de la interfaz de usuario
• Codigo de GENERACION

Esto significa que un equipo de diseño y un equipo de desarrollo deben evaluar las plataformas de generación de código, enfatizando lo que la plataforma puede hacer antes del proceso de generación de código. App Builder es la única plataforma de bajo código basada en la nube del mundo con una solución completa de diseño a código, que va más allá de los objetivos tradicionales de las plataformas de generación de código.

Beneficios de usar una plataforma de generación de código para su proyecto

El argumento a favor de los beneficios de la generación de código siempre ha sido la productividad y la velocidad de entrega. Si una herramienta puede ayudarme a realizar este esfuerzo de trabajo más rápido, ¿por qué no la usaría? La desventaja contra la generación de código es el argumento de la "caja negra": un desarrollador no tiene idea de qué código se está "generando" realmente; no pueden verlo, cambiarlo, modificarlo, etc. Por lo tanto, la carga recae en el desarrollador si algo sale mal en el producto generado por el código. Este miedo a la pérdida de control suele ser lo que aleja a los equipos de desarrollo de la generación de código. Pero, con las herramientas más sofisticadas de hoy. Gran parte de ese argumento desaparece.

Cualquier plataforma de generación de código (o una herramienta de código bajo) que quiera algún nivel de éxito hoy debe:

• Sea transparente y abierto en la forma en que genera código.
• Código correcto, consistente y limpio del producto.
• No ocultar nada al desarrollador.

Esto significa que la salida de la generación de código debe ser algo que el desarrollador que lo inspecciona lo construya él mismo. Tal vez incluso mejor, y ciertamente mucho, mucho más rápido. Lo que va al corazón de por qué un equipo adoptaría una plataforma de código bajo que incluyera la generación de código:

• Produzca una salida de aplicación de alta calidad diseñada a propósito
• Aumentar la comunicación, la eficiencia y el rendimiento del equipo.
• Reduzca significativamente el tiempo de comercialización con mayores tasas de adopción

Con las herramientas modernas de hoy en día, es una opción obvia para que los equipos al menos consideren y experimenten con plataformas de código bajo, incluso en beneficio de la generación de código moderno.

Resumen

La generación de código es más que simplemente compilar código fuente en un lenguaje de máquina nativo. La generación de código tiene muchas facetas y muchas herramientas para realizar el trabajo. Este artículo le brindó información sobre qué es la generación de código, por qué la necesita, cómo puede aplicarla a una aplicación Angular y le presentaron algunas herramientas que pueden ayudarlo a crear un mejor software más rápido.

En términos de Figma a código, este proceso se refiere a la transformación simplificada de un diseño o un prototipo creado en Figma en una aplicación funcional con código real y utilizable. Al utilizar nuestra solución low-code, esto sucede de una manera muy sencilla e intuitiva, sin tener que escribir ningún código manualmente. Tenemos una publicación de blog dedicada que explica todos los pasos que lo ayudarán a convertir Figma a código HTML de la manera más rápida posible.

Y así, un desarrollador puede pasar de Figma a código con nuestra herramienta low-code. Los equipos pueden diseñar y crear aplicaciones reales en un entorno WYSIWYG de arrastrar y soltar basado en la nube y generar código listo para producción, completo con diseño web, CSS y datos.

¡Feliz codificación!