Éxito de CI/CD para Desarrolladores de Vue

Rate this content
Bookmark

Esta charla cubrirá las mejores prácticas para el rendimiento, estabilidad, seguridad y mantenibilidad de los pipelines de CI/CD, cada uno respaldado con ejemplos prácticos y contraejemplos y adaptado a los desarrolladores de Vue.js.

FAQ

CI significa 'Integración Continua'. Es una práctica que consiste en construir y probar automáticamente todos los cambios en el código a medida que se envían a repositorios remotos, asegurando que cada cambio sea verificado automáticamente.

CD significa 'Despliegue Continuo'. Es el proceso que sigue a la integración continua, donde las aplicaciones construidas y probadas se despliegan automáticamente en ambientes de producción o de prueba, facilitando la entrega continua de software a los usuarios.

La automatización en CI/CD ayuda a eliminar errores manuales, acelera los procesos de construcción y despliegue, y asegura que el software se entregue de forma más consistente y predecible, mejorando la calidad y la eficiencia del desarrollo.

Para acelerar CI/CD, se pueden usar técnicas de paralelización de pruebas, optimización de recursos en las máquinas de construcción, uso de caché para dependencias y configurar los entornos de manera que se creen desde cero para cada proceso, asegurando aislamiento y reproducibilidad.

SSH debug es una característica que permite conectarse por SSH a un entorno de CI/CD para investigar y resolver problemas directamente cuando las pruebas o las construcciones fallan, facilitando una rápida identificación y corrección de errores.

El control de seguridad en CI/CD implica implementar escaneos automáticos de seguridad y mantener las credenciales seguras dentro del sistema. Esto ayuda a prevenir la introducción de vulnerabilidades en el software y protege la información sensible.

CI/CD facilita la incorporación de nuevos miembros al equipo proporcionando un proceso documentado y codificado, donde los nuevos desarrolladores pueden entender fácilmente los entornos, trabajos y pruebas que se están ejecutando, permitiéndoles integrarse y contribuir más rápidamente.

Zan Markan
Zan Markan
23 min
21 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy discute el éxito de CI y CD con Vue.js, enfatizando la importancia de la automatización en la entrega de software. El orador comparte consejos aplicables a todos los sistemas de CI-CD y lenguajes de programación, explicando el concepto de integración continua (CI) y su papel en la construcción y prueba automática de cambios. La atención a la velocidad, el tiempo de recuperación y las consideraciones organizativas son cruciales para el éxito de CI-CD. Técnicas como el almacenamiento en caché y la división de trabajos pueden mejorar la velocidad, mientras que la automatización y el escaneo de seguridad ayudan a mantener un entorno seguro. En última instancia, CI-CD es una responsabilidad del equipo que permite lanzamientos frecuentes y adaptabilidad al cambio.

Available in English: CI/CD Success for Vue Developers

1. Introducción al éxito de CI/CD con Vue.js

Short description:

Hoy hablaremos sobre el éxito de CI y CD con Vue.js. La diferencia entre las dos opciones radica en la automatización. El ciclo de vida de entrega de software se puede comparar con el cultivo y cuidado de cultivos. El trabajo manual cumple con el objetivo, pero no es tan reproducible.

Muy bien. Hola. Gracias por recibirme. Hoy hablaremos sobre el éxito de CI y CD con Vue.js en particular. Pero primero, comencemos con un ejercicio de reflexión. Piensa en un momento en el que te estabas preparando para lanzar un software. Tal vez sea algo en lo que hayas estado trabajando durante la última semana. Tal vez sean las últimas cuatro semanas. Tal vez sean los últimos seis meses. Esperemos que no sea mucho más tiempo que eso.

De todos modos, todo ha sido probado, todo está listo. Solo está esperando que presiones ese gran botón rojo, que luego inicia el proceso de implementación y pone el software en manos de tus usuarios. Entonces, sin más preámbulos, presionas ese gran botón rojo. Tiene un agradable clic audible. Es muy satisfactorio, con una agradable retroalimentación táctil. Como solo puede tener un buen teclado mecánico. Y luego comienza la carrera. El software está fuera de tus manos y se está implementando. Y en cuestión de minutos, tal vez horas, dependiendo de lo que estés implementando y cómo se haga, este software será utilizado por tus usuarios. Y todo lo que puedes hacer es contener la respiración y quedarte en silencio.

Y luego tienes dos opciones. Opción uno. Sigues conteniendo la respiración, sudando, y esperando nerviosamente a que comience a explotar, que aparezcan algunos errores y tus usuarios se quejen. Opción B, empacas y te vas a casa, porque son las 4 pm de un viernes y has hecho tu trabajo. Yo ciertamente prefiero la opción B, en parte porque son las 4 pm de un viernes cuando estoy grabando esto, pero también porque es algo más agradable de hacer si quieres disfrutar de tu fin de semana. De todos modos, la diferencia entre las dos, sin embargo, siempre se reduce a la automatización, y siempre se reduce a la automatización, desde el software hasta los procesos, la fabricación, y sí, también la agricultura. Bueno, hoy no hablaremos de agricultura. Me gusta comparar el ciclo de vida de entrega de software con el proceso de cultivar y cuidar cultivos. Entonces, si imaginas que tienes un campo como este, puedes tener cientos de personas trabajando en ese campo, plantando todo, recogiendo todo manualmente, regando, deshierbando, todas esas cosas. Haciéndolo manualmente con cientos de personas, cumple con el objetivo, pero no es tan reproducible como uno quisiera.

2. CI-CD Success with Vue.js

Short description:

Los sistemas de CI-CD, como un invernadero perfectamente ajustado con procesos automatizados, pueden mejorar enormemente la eficiencia. Sin embargo, es importante recordar que cualquier problema que surja generalmente se debe a errores humanos. El ponente, En Marken, un defensor del desarrollo en CircleCI, comparte consejos y trucos aplicables a todos los sistemas de CI-CD y lenguajes de programación. En Marken explica el concepto de integración continua (CI) y su papel en la construcción y prueba automática de cambios enviados a repositorios remotos. El proceso de CI incluye la ejecución de pruebas, el escaneo de seguridad y la generación de una aplicación construida en un entorno aislado.

Por supuesto, puedes hacerlo con muchas menos personas si utilizas algunos tractores, si implementas sistemas de riego o llevas esto unos cuantos pasos más allá y pones todo en un invernadero con atmósfera controlada, iluminación controlada, nutrientes controlados que se alimentan directamente a cada planta individual, y me gusta imaginar que estas manos robóticas utilizan la visión por computadora para recoger las plantas en su mejor madurez para venderlas óptimamente. Y eso es a lo que me gusta comparar un sistema de CI-CD realmente ajustado.

Todo está automatizado. Todo está fuera de tus manos y las cosas simplemente funcionan. Hasta que, por supuesto, no lo hacen. Y aunque no espero que tu sistema de CI-CD y los robots en un invernadero se levanten de repente y se conviertan en dinosaurios que intenten matarnos a todos, definitivamente pueden A, arruinar tus cultivos, y B, tu sistema de CI-CD definitivamente puede arruinarte el día si has implementado algo que no es realmente desplegable. Pero no te preocupes. Nunca es culpa de la máquina. Siempre somos nosotros, ya sabes. Siempre somos los humanos que programamos estas máquinas, y es nuestra culpa romper las cosas.

Y con ese pensamiento en mente, mi nombre es En Marken. Soy un defensor del desarrollo en CircleCI y rompo muchas cosas. Y a menudo soy el problema entre el teclado y la silla. Esta charla se titula Éxito de CI-CD con Vue.js y para desarrolladores de Vue.js. Pero los consejos y trucos que estoy compartiendo aquí son esencialmente universales para todos los sistemas de CI-CD, para todos los lenguajes de programación, sin importar lo que estés construyendo o cómo lo estés haciendo. La mayoría de las cosas siempre serán ciertas. Como mencioné, trabajo para CircleCI. Hemos estado aquí durante 10 años. Somos el proveedor líder mundial de CI-CD y un gran número de equipos de todo el mundo que trabajan en muchas plataformas diferentes, lenguajes de programación y paradigmas de programación nos utilizan, incluyendo partes de Vue.js también, lo cual es realmente genial poder hablarles sobre esto ahora. Así que sí, esto no es para hablar de CircleCI. Esta es una charla sobre las mejores prácticas, optimización, consejos y trucos de CI-CD en general para ayudarte a aprovechar al máximo. Pero como estamos hablando de CI-CD, ¿qué significa realmente? ¿Qué significa en realidad?

Entonces, es un doble acrónimo donde CI significa integración continua. Esta es la práctica de construir y probar automáticamente todos los cambios a medida que se envían a repositorios remotos por parte de los desarrolladores. Así que si estás trabajando en un proyecto de GitHub con un equipo, cada vez que haces un commit, el proceso de CI ejecutará esencialmente todas tus pruebas, realizará todas las verificaciones que puedas tener, como el escaneo de seguridad, análisis de código estático y, en última instancia, producirá una aplicación construida. Además de que esto sucede automáticamente, todo también ocurre en aislamiento. Ahí es donde viene la analogía del invernadero. Porque todas las construcciones, todas las pruebas se ejecutan en máquinas virtuales o contenedores Docker, que se crean desde cero. Simplemente especificas el tipo de entorno que deseas y luego todos los pasos necesarios. Todo también está configurado con un archivo de configuración que se encuentra dentro del mismo repositorio, en CircleCI usamos YAML, pero podrías usar cualquier otro formato para eso. Pero en última instancia, sí, codificas, todo está vinculado al mismo commit y todo es reproducible.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
El creador de Vue js da una actualización sobre las nuevas características de la tecnología.
Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.