Cómo mejorar y automatizar tu flujo de trabajo como desarrollador

La automatización juega un papel cada vez más importante en una variedad de sectores, y el web development no es una excepción. Automatizar y agilizar algunos de los procesos relacionados con la creación de sitios web y aplicaciones ayuda a ser más eficientes a los desarrolladores web, reduciendo el tiempo que dedican a operaciones fundamentales que solemos pasar por alto, como las pruebas y el debugging. Conocer las herramientas adecuadas para optimizar su flujo de trabajo ya no es solo una mejora opcional, sino que es un paso crucial para realizar las tareas correctamente. Esto permite aumentar la satisfacción del cliente mediante la creación de sitios y aplicaciones de alta calidad en menos tiempo. Entonces, en este artículo, descubriremos algunos flujos de trabajo que ayudarán a acelerar la programación, las pruebas, el debugging y la implementación.

Aprovechar la console del browser

Las herramientas para desarrolladores integradas en el navegador, y en particular en Google Chrome, son un recurso indispensable que todo desarrollador debería aprender a explotar ya durante la formación en un curso de coding. La console es muy útil para probar ideas sobre cómo resolver un problema con JavaScript o verificar el funcionamiento de secciones cortas de código directamente desde el navegador, todo antes de insertar este código en nuestro proyecto. Se pueden usar diferentes métodos para acceder a la console en Chrome: presiona la tecla F12 y selecciona la pestaña "Console" en el menú superior, o presiona las teclas CTRL + Shift + J simultáneamente. Alternativamente, puedes abrir el menú de Chrome haciendo clic en los tres puntos en la parte superior derecha, selecciona "Más herramientas" y luego "Herramientas de desarrollador", y desde allí selecciona la pestaña "Console".

Como hemos visto, la console permite probar rápidamente el funcionamiento de pequeños fragmentos de código, pero no probar el sitio o la aplicación en su totalidad. En cambio, esto es posible utilizando framework o bibliotecas como React, Angular o Vue.js, que brindan una infraestructura completa para el desarrollo, las pruebas, el debugging y la vista previa después de cada cambio.

Utilizar VS Code con integración Live Server

Para proyectos que no requieren el uso de framework o bibliotecas, sino que simplemente utilizan lenguajes HTML, CSS y JavaScript, un desarrollador web necesita otra opción para controlar la vista previa en tiempo real. Aquellos que usan Visual Studio Code, uno de los editores más populares entre los desarrolladores web, pueden instalar la útil extensión Live Server para este propósito. Esta integración simula la ejecución a través de un servidor de desarrollo local que se actualiza en tiempo real y funciona tanto para páginas estáticas como dinámicas. Después de la instalación, simplemente haz clic con el botón derecho en el archivo index.html (o en el archivo HTML principal, si tiene un nombre diferente) y ábrelo con Live Server, o haz clic en "Go Live" en la barra de estado de VS Code. Este flujo de trabajo permite desarrollar y probar un sitio o una aplicación sin tener que volver a cargar el navegador, comprobando fácilmente la vista previa después de cada cambio.

Test local con el comando “npx serve”

Junto con npm (Node Package Manager), que permite administrar paquetes cuando usa Node.js, también está instalado npx (Node Package Execute). Esta herramienta permite, a través de la línea de comandos, ejecutar paquetes desde el registro npm sin tener que instalarlos localmente. Para ello se utiliza la utilidad "servir", a través de la cual se puede visualizar localmente un sitio web estático. Simplemente habrá que abrir la línea de comando desde la carpeta raíz del proyecto y escribir "npx servir" para obtener una URL que se refiera a la versión estática del sitio o la aplicación en la que está trabajando.

Github que es y como integrarlo con un servicio de hosting cloud

Los flujos de trabajo vistos ahora pueden hacer que los proyectos de desarrollo web sean más ágiles, facilitando el control en tiempo real de los cambios locales. Sin embargo, para un desarrollador de sitios web no hay peor pesadilla que darse cuenta, cuando se acerca la fecha límite, que el resultado final es diferente de la vista previa local. Por lo tanto, en esta última sección, veremos cómo automatizar el proceso que permite crear una vista previa en tiempo real de un sitio o aplicación en una infraestructura externa, simulando el producto final con precisión. Para hacer esto, necesitamos un servicio de hosting en la nube como Vercel, Netlify o Heroku para integrarlo con GitHub. Esto permite conectar el repositorio en GitHub que aloja el código, que se distribuirá automáticamente a un CDN cada vez que hagamos push. Cuando se crea una pull request, se obtiene una URL con la vista previa de los cambios realizados, que se puede ver en una infraestructura externa.

En primer lugar, es necesario crear un repositorio en GitHub, luego confirmar y enviar la primera versión del código. Luego, se debe integrar el servicio de hosting con GitHub, generalmente un proceso simple de completar siguiendo las instrucciones proporcionadas por los distintos proveedores. Después de eso, se crean varias ramas del repositorio, que se usarán para corregir errores o para introducir otras funciones. Luego, el servicio de hosting distribuirá el código a la CDN y proporcionará una URL desde la cual obtener una vista previa de cada rama, para verificar que todo funciona correctamente. La URL también se puede compartir con colegas que colaboran en el proyecto o con el cliente para obtener opiniones en el camino. Para el final, lo único que queda es aprobar la pull request para incluir los cambios y funciones deseados en la rama principal.

Este flujo de trabajo, efectivo y fácil de automatizar, simplifica la vida de cada programador informático dejando más tiempo disponible para lidiar con el código real, sin preocuparse por el resto.