Lea esta guía paso a paso para aprender cómo generar código listo para producción en Angular con un solo clic y con poco código.
Jason Beres
13min de lectura
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:
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.
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.
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.
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:
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.
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:
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.
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:
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:
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.
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.
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í.
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.
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:
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í:
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.
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.
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!
En esta publicación de blog, utilizamos nuestro WYSIWYG App Builder ™ para crear una aplicación Angular CRM personalizada utilizando una muestra y un enfoque de desarrollo de código bajo. Mira cómo se hace.
A veces no es necesario iniciar un proyecto Angular desde cero. Puede utilizar una aplicación de muestra y personalizarla con personalizaciones adicionales. Este artículo proporciona algunos ejemplos para comenzar.
¿Qué es la generación de código Blazor? ¿Cómo puedes aprovecharlo con un clic usando App Builder de código bajo? Encuentre las respuestas en esta guía paso a paso.
