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

Esta es una guía detallada que le mostrará cómo pasar del diseño al código de una manera rápida y sencilla.

Entonces, si quieres:

• Cree una nueva aplicación Angular a partir de un diseño Sketch, utilizando herramientas de desarrollo y diseño de productos digitales de automatización.
• 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 Blazor o Web Components.

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

Empecemos.

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

Normalmente, la generación de código se describe como un proceso mediante el cual un modelo intermedio de código fuente se compila en un formato que puede ejecutarse de forma nativa mediante un microprocesador que ejecuta un sistema operativo como Windows, Mac OS o Linux. El proceso de "compilar" su código fuente consiste esencialmente en tomarlo de un formato (tal vez C# o TypeScript) y convertirlo en otro formato (como lenguaje intermedio como DLL, EXE o JavaScript). Dado que los procesadores requieren entradas específicas y funcionan de maneras específicas según el tipo de hardware en el que se ejecutan, siempre existe el desafío para los fabricantes de compiladores de garantizar que cualquier pieza de ejecución nativa que se espera se ejecute correctamente en el sistema de destino.

Si está utilizando una versión anterior de .NET Framework de Microsoft, estaría compilando su código fuente en un lenguaje intermedio (IL o MSIL para el lenguaje intermedio de Microsoft), que luego se compila "Just-in-Time" (JIT). mediante un intérprete en tiempo de ejecución, Common Language Runtime (CLR), que ejecuta el código en lenguaje de máquina en el sistema operativo Windows en tiempo real. Con las nuevas versiones de .NET Framework, como .NET Core y .NET 5, Microsoft incluye compiladores de lenguajes intermedios y tiempos de ejecución que funcionan en otros sistemas operativos, como Linux o MacOS.

El código fuente que usted escribe es el mismo, es responsabilidad de los compiladores asegurarse de que su proceso de generación de código produzca el lenguaje intermedio correcto y que el tiempo de ejecución en la máquina de destino pueda 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 importante. Esto significa que el código generado a partir del proceso de compilación de su aplicación está creado para la ejecución nativa en cualquier máquina o dispositivo de destino en el que se ejecutará. Por ejemplo, si compila AoT su aplicación Xamarin.iOS, el código compilado generado es nativo de iOS. No es necesario un tiempo de ejecución en el dispositivo para ejecutar su aplicación que no sea el sistema operativo iOS nativo. En las primeras versiones de Xamarin, las aplicaciones no se compilaban con AoT. Esto significaba que era necesario implementar el tiempo de ejecución mono 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 la generación de código Angular

A los efectos de este artículo, la generación de código Angular es sencilla. La generación de código Angular es el proceso de utilizar herramientas específicas que crean metadatos (o un lenguaje intermedio) para obtener una salida de código utilizable como código fuente para 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 un desarrollador puede utilizar para realizar modificaciones adicionales y, finalmente, "compilarla" en un formato generado que se ejecutará en el navegador como JavaScript y HTML.

Hay varias maneras de lograr esto:

1. Usando Angular CLI (Command LineInterface), con plantillas que usan Angular Schematics que generarán toda o parte de una aplicación. La CLI Angular del equipo de Google es la forma más rápida de generar la estructura y 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 a partir 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 todavía se basa en plantillas que utilizan Angular Schematics, la CLI puede agregar componentes de interfaz de usuario como gráficos, cuadrículas de datos Angular e incluso escenarios de aplicaciones completos a una aplicación Angular nueva o existente. Incluso puede crear sus propias plantillas personalizadas según las necesidades de su equipo o negocio para acelerar el desarrollo de aplicaciones y generar código en segundos.
3. Al utilizar el complemento Sketch to Angular, un desarrollador puede tomar un archivo de diseño Sketch que está almacenado en la nube App Builder y generar código para una aplicación Angular con un complemento de desarrollo. La mejor parte es que el desarrollador aún tiene control total sobre el código fuente que se genera a partir del archivo Sketch, 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 especialmente útil ya que el código genera todo el CSS, HTML y TypeScript necesarios para que se ejecute la aplicación Angular.
4. Con App Builder, un desarrollador puede utilizar una herramienta WYSIWYG basada en web para diseñar y generar código para una aplicación Angular completa. App Builder presenta el concepto de que los equipos pueden diseñar y crear aplicaciones reales de forma increíble en un sistema WYSIWYG de arrastrar y soltar basado en la nube. Esto incluye código, diseño, CSS e incluso datos.

Este diagrama muestra el nivel de interacción y salida de código que puede esperar de estas opciones de generación de código.

Puede ver que hay múltiples opciones para la generación de código Angular, desde la CLI Angular más genérica hasta una sólida experiencia de arrastrar y soltar en la web utilizando App Builder. Puede utilizar cualquiera de estas opciones para acelerar el desarrollo y la entrega de aplicaciones en Angular.

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.

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

Entregar aplicaciones es más que simplemente el proceso de compilar código fuente y generar algún tipo de resultado que se ejecutará en un procesador nativo de destino. Existe un proceso para ofrecer hermosas experiencias a los clientes que tengan sentido para los problemas que intentan 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 y luego creará un prototipo de la aplicación en la herramienta de su elección (como Figma o Sketch) para que esa parte interesada lo pruebe y utilice. El proceso es iterativo, incluye obtener comentarios de las partes interesadas, actualizar el diseño en función de los comentarios y críticas y luego probar nuevamente con las partes interesadas. Se ha demostrado que este proceso iterativo es la piedra angular del éxito de los proyectos de software. 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 utilizarán sus propias herramientas, intentarán descifrar el diseño que les entregaron y comenzarán a escribir código.

Es en este traspaso donde se corre 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) se estandariza en una plataforma de generación de código, o como ha acuñado Gartner, una plataforma de diseño de productos digitales, el riesgo y los errores en la transferencia se reducen o eliminan en gran medida. Una plataforma de generación de código debe incluir algo más que 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, con énfasis en lo que la plataforma puede hacer antes de la 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 la plataforma de generación de código.

Beneficios de utilizar la plataforma de generación de código para su proyecto

Los pros y los contras de la generación de código y las plataformas de generación de código se han debatido durante mucho tiempo. El argumento a favor de los beneficios de la generación de código siempre ha sido la productividad y la velocidad de entrega. De una herramienta que 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 puede verlo, cambiarlo, modificarlo, etc. Por lo tanto, la carga recae en el desarrollador si algo sale mal en el código del producto generado. Este miedo a perder el 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 o herramienta de generación de código que desee alcanzar algún nivel de éxito hoy en día 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 el resultado de la generación de código debe ser algo que el desarrollador que lo inspeccione construiría él mismo. Quizás incluso mejor y ciertamente mucho, mucho más rápido. Lo que explica por qué un equipo adoptaría una plataforma de diseño de productos digitales que incluyera la generación de código:

• Salida de aplicaciones de alta calidad del producto diseñadas específicamente
• 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 actuales, es una opción obvia para los equipos al menos considerar y experimentar con plataformas de diseño de productos digitales, aunque sea en beneficio de la generación de código moderna.

Paso a paso: Generación de código Angular a partir de Sketch Design

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

Exploremos 2 opciones que tiene para obtener un código editable y con píxeles perfectos usando App Builder.

1. Complemento Sketch
2. Importador Sketch App Builder

Opción n.° 1: complemento Sketch

Paso 1: instalar el kit de interfaz de usuario

Todo comienza con un boceto. Utilice los controles de la interfaz de usuario y los patrones de interfaz de usuario compuestos de nuestros kits de interfaz de usuario para diseñar aplicaciones en Sketch. Puede descargar los kits Sketch UI desde aquí.

Paso 2: cargue o sincronice el diseño Sketch con la nube App Builder

Una vez que un diseñador ha completado su diseño Sketch, puede cargarlo utilizando el complemento Sync Sketch integrado. Una vez en la nube, un equipo de diseño puede aprovechar las funciones de la herramienta de código bajo, como pruebas de usuarios, colaboración con usuarios y creación de prototipos interactivos.

Paso 3: generar código Angular con el complemento Sketch

Un desarrollador puede descargar el complemento Sketch desde aquí. El complemento le ayudará a publicar sus diseños/aplicaciones creadas con Sketch en App Builder. También puedes descargarlo siguiendo estos pasos:

1. Abrir App Builder
2. Haga clic en "Nueva aplicación de Creta"
3. Haga clic en "Obtener activos para..."

Ahora puedes comenzar a usar el complemento.

Una vez que todo se haya configurado como desee, ¡es hora de generar código! Haga clic en el botón "Crear aplicación" y esto comenzará el proceso.

En esos 3 sencillos pasos, puedes pasar del diseño al código, de Sketch a Angular. Si no tiene un diseño o no tiene Sketch, pruebe el ejemplo de la aplicación HR Dashboard aquí:

https://www.infragistics.com/resources/sample-applications/hr-dashboard

Opción n.º 2: Importador Sketch App Builder

Si pensaba que la opción n.° 1 era sencilla, ¡le encantará la opción n.° 2! Estos son los 4 sencillos pasos para pasar del diseño al código con App Builder con solo arrastrar y soltar.

Paso 1: haga clic en Nueva aplicación

Paso 2: arrastre su archivo Sketch al área de colocación "Crear a partir de un diseño existente"

Paso 3: revisar el diseño en el IDE de la nube

Paso 4: revisa o descarga tu código Angular

Puede optar por utilizar los botones en la parte superior derecha del IDE para generar una aplicación o obtener una vista previa de su aplicación y ver el código.

Si está utilizando Figma y busca una solución de generación de código, App Builder también lo cubre gracias a su complemento Figma. Puede generar fácilmente código listo para usar en componentes Angular, Blazor y Web a partir de un archivo de diseño Figma. Básicamente, el proceso Figma-to-code se refiere a la transformación simplificada de un diseño o prototipo creado en Figma en una aplicación funcional con código real y utilizable. Cuando se utiliza nuestra solución de código bajo, 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 diseñador o desarrollador puede pasar de Sketch a codificar con una herramienta WYSIWYG basada en web. Los equipos pueden diseñar y crear aplicaciones reales increíbles en un sistema WYSIWYG basado en la nube de arrastrar y soltar y obtener código, completo con diseño web, CSS e incluso datos.

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.

¡Feliz codificación!