revista-cyle-noviembre-2023

Innusual, cuando sucede lo inesperado

Esta herramienta se puede integrar directamente con IDEs como Visual Studio Code, lo que permite a los desarrolladores recibir sugerencias mientras escriben, acelerando el proceso de desarrollo y ayudando a superar bloqueos o dificultades durante el mismo. 

## ¿Cómo funciona realmente GitHub Copilot?

GitHub Copilot se puede utilizar en varios entornos, como editores de código, línea de comandos o  a través de un chat. En todos los casos, esta herramienta implementa un flujo de procesamiento diseñado para generar las sugerencias más precisas y cumplir sus términos de uso. 

El primer paso de este procesamiento consiste en recoger el contexto relevante del entorno del usuario, que puede variar según la forma de usar GitHub Copilot. Por ejemplo, cuando se utiliza integrado en un editor de código, el contexto puede incluir el contenido del archivo que se está editando, otros archivos relacionados del proyecto, otras pestañas del editor, así como el nombre y el tipo del archivo. Cuando se utiliza a través del chat, el contexto también incluye el historial de la conversación. Además, es posible restringir qué código puede utilizar como contexto y cuál no, a través de la configuración de la herramienta.

A continuación, se construye el *prompt*, que es la forma de indicarle al modelo qué datos debe procesar y en qué orden. Una serie de algoritmos extraen y priorizan la información recogida en el contexto para obtener las mejores respuestas posibles.

El *prompt* se envía de forma segura a un servicio proxy que realiza diferentes verificaciones, por ejemplo,  asegurándose de que el *prompt* no contenga lenguaje inapropiado o de que no represente un riesgo de hackeo de la herramienta.

En este momento, los LLMs (Large Language Models) entran en juego. Una vez que el *prompt* ha pasado todas las comprobaciones necesarias, se transfiere a los LLMs, que son un conjunto de modelos de IA entrenados tanto con lenguaje natural como con código fuente. GitHub, como plataforma líder en almacenamiento de código utilizada por desarrolladores de todo el mundo, aloja una gran cantidad de repositorios de código abierto. Parte de estos repositorios se han utilizado para entrenar estos modelos.

La respuesta generada por el modelo es nuevamente procesada por un servicio proxy que verifica que no incluya errores de vulnerabilidad como SQL Injection, bugs evidentes o identificadores únicos. Finalmente, esta respuesta es la sugerencia que se envía al usuario.

## Superando las barreras: datos, propiedad intelectual y licencias

¿El código generado se puede considerar original? ¿El código se copia de otro repositorio? ¿Mi código se utiliza para entrenar el modelo? Es habitual que surjan preocupaciones de este tipo relacionadas con el uso de esta herramienta. 

En primer lugar, hay que señalar que el código generado por Copilot es de uso libre para el desarrollador. GitHub ha indicado que los desarrolladores tienen el mismo derecho a usar el código generado por Copilot que el código escrito manualmente. Aún así, es fundamental que se revisen y ajusten las sugerencias según las necesidades específicas del proyecto y las políticas internas de cada organización, para asegurar que el código final cumple con los estándares y requisitos del proyecto.

El código generado por GitHub Copilot es producido por el modelo y no copiado directamente de repositorios públicos. Sin embargo, puede haber coincidencias con el código de estos repositorios. Para evitarlo, los administradores pueden habilitar un filtro que bloquea todas las sugerencias de código que coincidan aproximadamente en 150 caracteres con el código público de GitHub. Según las pruebas, alrededor del 1% del código sugerido puede coincidir con el de otros repositorios públicos, y esto ocurre con mayor frecuencia cuando el asistente de código tiene un contexto muy limitado.

Una consulta frecuente entre los usuarios es si GitHub Copilot utiliza los datos de su código para entrenar su modelo. De acuerdo con los términos de uso específicos de GitHub Copilot, por norma general, no se almacena ningún *prompt* para entrenar los LLMs base del asistente. Esto significa que ni el código ni el contexto recopilado en el entorno del usuario se guardan. Tras generar las sugerencias, los *prompts* son descartados. Sin embargo, dependiendo de la licencia de cada desarrollador y de las configuraciones establecidas en GitHub Copilot, pueden existir excepciones, por lo que es necesario revisar cada caso concreto.

Finalmente, es importante señalar que GitHub Copilot se utiliza bajo licencia. Existen licencias tanto para usuarios individuales como para empresas, estas últimas con términos adicionales de seguridad y cumplimiento. Esto permite a los desarrolladores y a las organizaciones seleccionar la opción que mejor se adapte a sus necesidades específicas.

## Y tú… ¿ya utilizas GitHub Copilot?

GitHub Copilot representa una evolución significativa en la manera de abordar el desarrollo de software, ofreciendo una combinación única de productividad, aprendizaje y calidad. Al adoptar esta herramienta, las organizaciones pueden acelerar sus ciclos de desarrollo, mejorar la calidad del código y fomentar un entorno de aprendizaje continuo para sus desarrolladores. 

Programando con Copilot

Una de las funcionalidades más utilizadas es GitHub Actions, que con el tiempo se ha vuelto crucial para gestionar y configurar la integración continua en nuestros proyectos, ofreciendo además muchas otras opciones.  

## Pero, ¿qué es GitHub Actions? 
GitHub Actions se centra en automatizar los flujos de trabajo o "workflows". Esto puede ir desde la simple creación y gestión de pequeñas tareas programadas, conocidas como "cron jobs", hasta la ejecución de software y el desarrollo completo de la integración y despliegue continuos (CI/CD) de nuestra aplicación. 

Para crear una GitHub Action, debemos definir archivos con extensión YAML que especifican las instrucciones o "jobs". A su vez, definimos conjuntos de pasos o "steps" que se ejecutan en un entorno totalmente limpio cada vez que se activan. Esto nos permite crear nuestra CI/CD, cuyo objetivo es agilizar y mejorar el ciclo de vida del software.

```typescript
name: CI/CD Ejemplo

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'

    - name: Install dependencies
      run: npm ci

    - name: Run linter
      run: npm run lint

    - name: Run tests
      run: npm test

    - name: Build project
      run: npm run build

    - name: Upload artifact
      uses: actions/upload-artifact@v3
      with:
        name: dist
        path: dist

  deploy:
    needs: build-and-test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'

    steps:
    - name: Download artifact
      uses: actions/download-artifact@v3
      with:
        name: dist

    - name: Deploy to production
      run: |
        # Aquí irían los comandos para desplegar la aplicación
        # Por ejemplo, usando SSH para conectar a un servidor:
        # ssh user@example.com 'cd /path/to/app && git pull origin main && npm install && pm2 restart app'
```

Podemos elegir cuando ejecutar diferentes tareas: si al crear una “Pull Request”, al mergearla en una de las ramas principales, al hacer push.... hay multitud de opciones, pero la finalidad es siempre la misma: ejecutar y automatizar una seria de pasos para conseguir un fin, asegurando que el resultado tenga un mínimo de calidad y que cumpla su cometido. 

## Gestión de nuestra CI/CD 
Los workflows en GitHub Actions permiten automatizar diversas tareas críticas en el ciclo de desarrollo de software. Entre las actividades más útiles que podemos configurar se encuentran:

1. Comprobación de cobertura de tests: Podemos ejecutar automáticamente nuestras suites de pruebas y generar informes de cobertura. Esto nos ayuda a mantener un alto estándar de calidad y detectar rápidamente cualquier regresión.
2. Verificación de convenciones de código: Utilizando herramientas como ESLint, Prettier o similares, podemos asegurar que todo el código nuevo cumpla con las normas de estilo y mejores prácticas establecidas para el proyecto.
3. Análisis de accesibilidad: Podemos integrar herramientas que evalúen el cumplimiento de las pautas de accesibilidad web (WCAG), garantizando que nuestra aplicación sea inclusiva y utilizable por todos.
4. Análisis de seguridad: Implementar escaneos de seguridad para detectar vulnerabilidades en el código o en las dependencias utilizadas.
5. Optimización de rendimiento: Ejecutar pruebas de rendimiento y generar informes para identificar posibles cuellos de botella.
6. Generación de documentación: Automatizar la creación y actualización de documentación técnica basada en los cambios en el código.

Una buena implementación puede ahorrarnos muchos problemas en nuestras aplicaciones, desde simples errores en la gestión de las builds hasta cuestiones más avanzadas como la revisión de código en un entorno externo que nos alerte sobre su calidad y mantenibilidad. 

GitHub también nos ofrece un marketplace donde podemos mejorar nuestras Actions con extensiones creadas por la comunidad. Así, por ejemplo, podemos encontrar extensiones para integrarse con sistemas como SonarCloud, desplegar en diversos proveedores de cloud como Azure, AWS o Google, etc, etc.... Todas estas herramientas se pueden integrar para gestionar la calidad, mantenibilidad y funcionalidad de nuestro código en las pull requests (PR) o merges. 

## ¿Y qué pasa con los despliegues? 
Desde hace años, disponemos de gran variedad de alternativas en cuanto a despliegues. Si nos centramos en “cloud”, la oferta de servicios como AWS, Azure, Google Cloud, Oracle Cloud o Digital Ocean por nombrar unos pocos, nos ofrecen despliegues globales, con bajos costes operativos, alta agilidad y escalabilidad sin precedentes. Por otro lado, también contamos con despliegues en servidores "on-premise", donde los servidores están físicamente localizados en las instalaciones del cliente. Esta opción es común para software sensible, perteneciente a gobiernos, corporaciones no gubernamentales o entidades bancarias. 

En ambos casos, GitHub Actions es una herramienta versátil que nos permite adaptarnos fácilmente sin complicaciones adicionales, proporcionando autonomía al desarrollador y cumpliendo con los requisitos necesarios. 

## Ventajas frente a otras soluciones 
Jenkins es uno de los principales competidores ya que se trata de una solución Open Source que lleva en el mercado muchos años y ha sido adoptado tradicionalmente por muchas organizaciones para desempeñar estas tareas. Sin embargo, cada vez más, vemos clientes y colaboradores que migran su actual infraestructura a Github Actions, destacando principalmente su gestión y configuración de  workflows creados mediante archivos YAML, permitiendo hacer cambios “en caliente”. En cambio, Jenkins requiere una instalación y configuración avanzada desde el inicio, lo cual puede dificultar el desarrollo tanto de un producto mínimo viable (MVP) como de un software con un ciclo de vida largo. 

Otra gran ventaja de GitHub Actions es su amplia comunidad en el marketplace de plugins. Aunque Jenkins también tiene un marketplace similar, su entorno suele estar desactualizado o incluso abandonado, lo que puede llevar a situaciones donde un plugin esencial esté deprecado, presentando posibles problemas de seguridad y funcionamiento si actualizamos cualquier versión. 

En conclusión, establecer y mantener buenos pipelines de CI/CD es esencial. Una de las plataformas que más empleamos para ello es GitHub, el cual, más allá de su trabajo como repositorio de código nos permite implementar workflows que extienden su uso a todo el ciclo de vida de nuestro software. Esto nos permitirá mejorar la calidad, mantenibilidad, seguridad y robustez de nuestra aplicación en cada una de sus fases, automatizando los procesos manuales de pruebas y despliegues, lo que se traduce en grandes mejoras de productividad para los equipos de desarrollo.


CI/CD con GH Actions

En la actualidad, el desarrollo de aplicaciones web ha evolucionado hacia arquitecturas más modulares y escalables. Una de las técnicas más innovadoras del presente, plantea dividir  la aplicación web en pequeñas aplicaciones independientes, cada una con su propio front-end. Esta técnica, llamada microfrontends, no solo permite una mayor flexibilidad en el desarrollo y despliegue, sino que también facilita la colaboración entre equipos al permitir que cada uno trabaje de manera autónoma en su parte específica de la aplicación. Así, los microfrontends se presentan como una solución ideal para proyectos complejos y de gran escala.

__Webpack Module Federation__ es una herramienta clave para implementar esta arquitectura de manera eficiente, permitiendo a los desarrolladores compartir y cargar módulos en tiempo de ejecución. Introducida con Webpack 5, esta funcionalidad ha revolucionado la manera en que los equipos gestionan dependencias y recursos compartidos entre aplicaciones, eliminando la necesidad de un empaquetado conjunto desde el principio. Con Module Federation, es posible construir aplicaciones más dinámicas y flexibles, donde los módulos pueden ser actualizados y distribuidos de forma independiente sin afectar al conjunto del sistema.
En el contexto de microfrontends, Webpack Module Federation permite que varias aplicaciones independientes colaboren como una sola. Esta capacidad transforma la forma en que construimos y desplegamos las aplicaciones web modernas.

## Ventajas de Usar Webpack Module Federation

Utilizar Webpack Module Federation en una arquitectura de microfrontends ofrece múltiples ventajas:

1.	Desarrollo Independiente: Equipos distintos pueden trabajar en diferentes partes de la aplicación sin interferir unos con otros, lo que acelera el desarrollo y reduce conflictos de integración.
2.	Despliegue Incremental:  Se pueden actualizar y desplegar partes específicas de la aplicación sin necesidad de volver a desplegar todo el sistema, mejorando la agilidad y reduciendo el riesgo de errores.
3.	Escalabilidad: Es más sencillo escalar aplicaciones grandes ya que cada microfrontend puede gestionarse de manera independiente, optimizando recursos y rendimiento.
4.	Reutilización de Código:  Los módulos compartidos permiten reutilizar componentes y librerías comunes, reduciendo la duplicación de código y el tamaño del final de paquete desplegado.

## ¿Cuándo Usar Microfrontends con Webpack Module Federation?

Los microfrontends son ideales para proyectos que buscan escalabilidad y modularidad. Son especialmente útiles en las siguientes situaciones:

- Grandes Equipos de Desarrollo: Cuando múltiples equipos trabajan en una misma aplicación, los microfrontends facilitan la colaboración y el manejo de dependencias.
- Aplicaciones de Gran Escala: Para proyectos que se espera que crezcan significativamente en el tiempo, la modularidad de los microfrontends permite manejar esta expansión de manera ordenada y eficiente.
- Evolución Continua: Si una aplicación necesita actualizarse y desplegarse frecuentemente, los microfrontends permiten hacerlo de manera ágil y segura.

Para proyectos pequeños, los beneficios pueden no justificar la complejidad adicional. En estos casos, una arquitectura más tradicional podría ser más adecuada.

En conclusión, adoptar microfrontends con Webpack Module Federation puede transformar la manera en que desarrollas y escalas tus aplicaciones web. Esta arquitectura ofrece un alto grado de modularidad, permitiendo desarrollos independientes, despliegues incrementales y una mejor reutilización del código. Aunque implica una curva de aprendizaje y una mayor complejidad inicial, los beneficios a largo plazo tus grandes proyectos superan con creces estos desafíos y en Innusual contamos un con equipo de desarrolladores expertos que pueden ayudarte a potenciar tu aplicación de la mejor manera. 

En definitiva, los microfrontends representan el presente y con mucha certeza, el futuro del desarrollo web modular y escalable.


.css-adcnbg{font-family:var(--chakra-fonts-body);font-weight:300;color:inherit;}>>> Podría interesarte

Programando con Copilot

CI/CD con GH Actions

Microfrontends con Webpack Module Federation

>>> Podría interesarte