Si estás empezando a usar JavaScript, el número de herramientas y tecnologías de las que oirás hablar puede ser abrumador. Y puede que te resulte difícil decidir qué herramientas necesitas realmente.
O tal vez estés familiarizado con las herramientas, pero no has pensado mucho en los problemas que resuelven y lo miserable que sería tu vida sin su ayuda.
Yo creo que es importante que los Ingenieros y Desarrolladores de Software entiendan el propósito de las herramientas que usamos todos los días.
Por eso, en este artículo, examino a NPM, Babel, Webpack, ESLint, y CircleCI e intento aclarar los problemas que resuelven y cómo los resuelven.
NPM
NPM es el administrador de paquetes por defecto para el desarrollo de JavaScript. Te ayuda a encontrar e instalar paquetes (programas) que puedes usar en tus programas.
Puedes añadir npm a un proyecto simplemente usando el comando npm init. Cuando ejecutas este comando crea el archivo "package.json" en el directorio actual. Este es el archivo donde se listan sus dependencias, y npm lo ve como la tarjeta de identificación del proyecto
Puedes añadir una dependencia con el comando npm install (nombre_de_paquete)
Cuando ejecutas este comando, npm va al registro remoto y comprueba si hay un paquete identificado con este nombre de paquete. Si lo encuentra, se añade una nueva entrada de dependencia a su package.json y el paquete, con sus dependencias internas, se descarga del registro.
Puede encontrar los paquetes o dependencias descargados en la carpeta "node_modules". Sólo ten en cuenta que normalmente es bastante grande, así que asegúrate de añadirlo a .gitignore.
NPM no sólo facilita el proceso de búsqueda y descarga de paquetes, sino que también facilita el trabajo en colaboración en un proyecto.
Sin NPM sería difícil manejar las dependencias externas. Tendrías que descargar a mano las versiones correctas de cada dependencia cuando te unes a un proyecto existente. Y eso sería una verdadera molestia.
Con la ayuda de npm, puedes simplemente ejecutar npm install e instalará todas las dependencias externas por ti. Luego puedes volver a ejecutarlo cada vez que alguien de tu equipo añada una nueva dependencia.
Babel
Babel es un compilador o transpilador de JavaScript que traduce el código ECMAScript 2015+ a un código que puede ser entendido por los motores JavaScript más antiguos.
Babel es el compilador de Javascript más popular, y los frameworks como Vue y React lo usan por defecto. Dicho esto, los conceptos de los que hablaremos aquí no sólo están relacionados con Babel y se aplicarán a cualquier compilador de JavaScript.
¿Por qué necesitas un compilador?
"¿Por qué necesitamos un compilador, acaso JavaScript no es un lenguaje interpretado?" Puedes plantearte si estás familiarizado con los conceptos de los lenguajes compilados e interpretados.
Es cierto que solemos llamar a algo "compilador" si traduce nuestro código humano a un binario ejecutable que pueda ser entendido por la CPU. Pero ese no es el caso aquí.
El término transpilador puede ser más apropiado ya que es un subconjunto de un compilador: Los transpiladores son compiladores que traducen el código de un lenguaje de programación a otro lenguaje (en este ejemplo, del JS moderno a una versión más antigua).
JavaScript es el lenguaje de los navegadores. Pero hay un problema con los navegadores: La compatibilidad recíproca. Las herramientas de JavaScript y el lenguaje en sí mismo evolucionan rápidamente y muchos navegadores no logran alcanzar ese ritmo. Esto resulta en problemas de compatibilidad.
Probablemente quieras escribir código en las versiones más recientes de JavaScript para poder usar sus nuevas características. Pero si el navegador en el que está ejecutando su código no ha implementado algunas de las nuevas características en su motor de JavaScript, el código no se ejecutará correctamente en ese navegador.
Este es un problema complejo porque cada navegador implementa las características a una velocidad diferente. E incluso si implementan esas nuevas características, siempre habrá gente que use una versión más antigua de su navegador.
¿Y qué pasa si deseas poder usar las funciones recientes pero también quieres que tus usuarios vean esas páginas sin problemas?
Antes de Babel, usábamos polyfills para ejecutar versiones antiguas de cierto código si el navegador no soportaba las características modernas. Y cuando se usa Babel, se usan polyfills entre bambalinas y no se requiere hacer nada.
¿Cómo funcionan los transpilers/compiladores?
Babel trabaja de manera similar a otros compiladores. Tiene etapas de análisis, transformación y generación de código.
No vamos a profundizar aquí en cómo funciona, ya que los compiladores son cosas complicadas. Pero para entender los fundamentos de cómo funcionan los compiladores, puedes ver el proyecto the-super-tiny-compiler. También se menciona en la documentación oficial de Babel como útil para entender cómo funciona Babel.
Normalmente podemos salirnos con la nuestra conociendo los plugins y presets de Babel. Los plugins son los fragmentos que Babel utiliza entre bambalinas para compilar su código en versiones antiguas de JavaScript. Puedes pensar en cada característica moderna como un plugin. Puedes ir a este enlace para ver la lista completa de plugins.
Los presets son colecciones de plugins. Si quieres usar Babel para un proyecto de React puedes usar el preset @babel/preset-react que contiene los plugins necesarios.
Puedes añadir plugins editando el archivo de configuración de Babel.
¿Necesitas Babel para tu aplicación React?
Para React, necesitas un compilador porque el código de React generalmente usa JSX y JSX necesita ser compilado. Además la biblioteca está construida sobre el concepto de usar la sintaxis ES6.
Afortunadamente, cuando se crea un proyecto con create-react-app, viene con Babel ya configurado y normalmente no es necesario modificar la configuración.
Ejemplos de un compilador en acción
El sitio web de Babel tiene un compilador en línea y es realmente útil para entender cómo funciona. Sólo tienes que conectar un poco de código y analizar la salida.
Webpack
Webpack es un paquete de módulos estáticos. Cuando se crea un nuevo proyecto. La mayoría de los frameworks y bibliotecas de JavaScript lo usan hoy en día.
Si la frase "static module bundler" suena confusa, sigue leyendo porque tengo algunos grandes ejemplos para ayudarte a entender.
¿Por qué necesitas un empaquetador?
En las aplicaciones web vas a tener un montón de archivos. Esto es especialmente el caso de las aplicaciones de una sola página (React, Vue, Angular), cada una con sus propias dependencias.
Lo que quiero decir con una dependencia es una declaración de un import - si el archivo A necesita importar el archivo B para funcionar correctamente, entonces decimos que A depende de B.
En los proyectos pequeños, se pueden manejar las dependencias del módulo con etiquetas <script>. Pero cuando el proyecto se hace más grande, las dependencias se vuelven rápidamente difíciles de manejar.
Tal vez, lo más importante, es que al dividir el código en varios archivos, tu sitio web se carga más lentamente. Esto se debe a que el navegador necesita enviar más solicitudes en comparación con un archivo grande, y tu sitio web comienza a consumir un montón de ancho de banda, debido a los encabezados HTTP.
Nosotros, como desarrolladores, queremos que nuestro código sea modular. Lo dividimos en múltiples archivos porque no queremos trabajar con un archivo con miles de líneas. Aún así, también queremos que nuestros sitios web sean eficientes, que usen menos ancho de banda y que carguen rápido.
Así que ahora, veremos cómo Webpack resuelve este problema.
Cómo funciona Webpack
Cuando hablábamos de Babel, mencionamos que el código JavaScript debe ser transpilado antes de ser implementado.
Pero compilar con Babel no es la única operación que necesita antes de implementar su proyecto.
Usualmente necesitas realizar el proceso de uglify, transpilarlo, compilar el SASS o SCSS a CSS si estás usando algún preprocesador, compilar el TypeScript si lo estás usando... y como puedes ver, esta lista puede hacerse larga fácilmente.
No querrás lidiar con todos esos comandos y operaciones antes de cada despliegue. Sería genial si hubiera una herramienta que hiciera todo eso por ti en el orden y la forma correcta.
La buena noticia es que la existe Webpack.
Webpack proporciona características como un servidor local con recarga en caliente (lo llaman reemplazo de módulo en caliente) para mejorar tu experiencia durante el desarrollo.
Entonces, ¿qué es la recarga en caliente? Significa que cada vez que guardas tu código, es compilado y desplegado en el servidor local HTTP que se ejecuta en tu máquina. Y cada vez que un archivo cambia, envía un mensaje a tu navegador para que ni siquiera tengas que refrescar la página.
Si alguna vez has usado npm run serve, npm start o npm run dev, esos comandos también inician el servidor dev de Webpack en segundo plano.
Webpack comienza desde el punto de entrada de su proyecto (índice) y genera el Árbol de Sintaxis Abstracta del archivo. Puedes pensar en ello como un análisis del código. Esta operación también se hace en los compiladores, que luego buscan declaraciones de importación recursivamente para generar un gráfico de dependencias.
Luego convierte los archivos en IIFEs para modularlos (recuerde, poner código dentro de una función restringe el alcance). Al hacer esto, modularizan los archivos y se aseguran de que las variables y funciones no sean accesibles a otros archivos.
Sin esta operación, sería como copiar y pegar el código del archivo importado y ese archivo tendría el mismo alcance.
Webpack hace muchas otras cosas avanzadas entre bambalinas, pero esto es suficiente para entender lo básico.
Bonus – ESLint
La calidad del código es importante y ayuda a mantener sus proyectos mantenibles y fácilmente ampliables. Mientras que la mayoría de nosotros los desarrolladores reconocemos la importancia de un código limpio, a veces tendemos a ignorar las consecuencias a largo plazo bajo la presión de los plazos de entrega.
Muchas compañías deciden sobre los estándares de codificación y alientan a los desarrolladores a obedecer dichos estándares. Pero, ¿Cómo puede asegurarse de que su código cumple con los estándares?
Bueno, puedes usar una herramienta como ESLint para hacer cumplir las normas en el código. Por ejemplo, puedes crear una regla para hacer cumplir o no permitir el uso de punto y coma en tu código JavaScript. Si rompes una regla, ESLint muestra un error y el código ni siquiera se compila, por lo que no es posible ignorarlo a menos que deshabilites la regla.
Los linters pueden utilizarse para hacer cumplir las normas mediante la redacción de reglas personalizadas. Pero también se pueden usar las configuraciones de ESLint pre-hechas por las grandes compañías de tecnología para ayudar a los desarrolladores a adquirir el hábito de escribir código limpio.
Puedes echar un vistazo a la configuración de ESLint de Google aquí - es la que prefiero.
ESLint te ayuda a acostumbrarte a las mejores prácticas, pero ese no es su único beneficio. ESLint también te advierte sobre posibles errores en tu código para que puedas evitar errores comunes.
Bonus – CI/CD (CircleCI)
La integración/desarrollo continuo ha ganado mucha popularidad en los últimos años ya que muchas empresas han adoptado los principios de Agile.
Herramientas como Jenkins y CircleCI le permiten automatizar el despliegue y las pruebas de su software para que pueda desplegar más a menudo y de forma confiable sin tener que pasar por procesos de construcción difíciles y propensos a errores por sí mismos.
Menciono CircleCI como el producto aquí porque es gratuito y se usa frecuentemente en proyectos de JavaScript. También es bastante fácil de usar.
Repasemos un ejemplo: Digamos que tienes un servidor de despliegue/QA y tu repositorio Git. Quieres desplegar tus cambios en tu servidor de despliegue/QA, así que aquí tienes el siguiente ejemplo:
- Empuja los cambios a Git
- Conectate al servidor
- Crear un contenedor Docker y ejecutarlo
- Descarga los cambios en el servidor, descarga todas las dependencias (npm install)
- Ejecuta las pruebas para asegurarte de que no hay nada roto
- Utiliza una herramienta como ESLint/Sonar para asegurar la calidad del código
- Fusiona el código si todo está bien
Con la ayuda de CircleCI, puedes hacer automáticamente todas estas operaciones. Puedes configurarlo para hacer todas las operaciones anteriores cada vez que pulses un cambio en Git. Rechazará la solicitud si algo sale mal, por ejemplo, si falla una prueba.
No entraré en detalles sobre cómo configurar el CircleCI porque este artículo trata más sobre el "¿Por qué?" de cada herramienta. Pero si estás interesado en aprender más y verlo en acción, puedes ver esta serie de tutoriales.
Conclusión
El mundo de JavaScript está evolucionando rápidamente y nuevas herramientas están ganando popularidad cada año.
Es fácil reaccionar a este cambio con sólo aprender a usar la herramienta - a menudo estamos demasiado ocupados para tomarnos nuestro tiempo y pensar en la razón por la que esa herramienta se hizo popular o qué problema resuelve.
En este artículo, elegí las herramientas que creo que son más populares y compartí mis opiniones sobre su relevancia. También quise hacerles reflexionar sobre los problemas que resuelven, más que sobre los detalles de cómo usarlas.
Si te ha gustado el artículo, puedes consultar y suscribirte a mi blog, donde intento escribir con frecuencia. También, hazme saber lo que piensas comentando para que podamos hacer una lluvia de ideas o puedes decirme qué otras herramientas te gusta usar :)
Traducido del artículo de Yiğit Kemal Erinç - Popular Front End Development Tools You Should Know.