Herramientas de desarrollo de front-end populares que debe conocer

Si recién está comenzando con JavaScript, la cantidad de herramientas y tecnologías de las que escuchará puede ser abrumadora. Y es posible que le resulte difícil decidir qué herramientas necesita realmente.

O tal vez esté familiarizado con las herramientas, pero no ha pensado mucho en qué problemas resuelven y cuán miserable sería su vida sin su ayuda.

Creo que es importante que los ingenieros y desarrolladores de software comprendan el propósito de las herramientas que usamos todos los días.

Por eso, en este artículo, miro a NPM, Babel, Webpack, ESLint y CircleCI y trato de aclarar los problemas que resuelven y cómo los resuelven.

NPM

NPM es el administrador de paquetes predeterminado para el desarrollo de JavaScript. Le ayuda a encontrar e instalar paquetes (programas) que puede utilizar en sus programas.

Puede agregar npm a un proyecto simplemente usando el comando " npm init ". Cuando ejecuta este comando, crea un archivo " package.json " en el directorio actual. Este es el archivo donde se enumeran sus dependencias y npm lo ve como la tarjeta de identificación del proyecto.

Puede agregar una dependencia con el comando " npm install (nombre_paquete) ".

Cuando ejecuta este comando, npm va al registro remoto y verifica si hay un paquete identificado por este nombre de paquete. Si lo encuentra, se agrega una nueva entrada de dependencia a su package.json y el paquete, con sus dependencias internas, se descarga del registro.

Puede encontrar los paquetes descargados o las dependencias en la carpeta "node_modules" . Solo tenga en cuenta que generalmente se vuelve bastante grande, así que asegúrese de agregarlo a .gitignore .

Cómo mantener actualizadas sus bibliotecas de JavaScript - Blog de LogRocket

NPM no solo facilita el proceso de búsqueda y descarga de paquetes, sino que también facilita el trabajo colaborativo en un proyecto.

Sin NPM, sería difícil gestionar las dependencias externas. Debería descargar las versiones correctas de cada dependencia a mano cuando se una a un proyecto existente. Y eso sería una verdadera molestia.

Con la ayuda de npm, simplemente puede ejecutar "npm install" e instalará todas las dependencias externas por usted. Luego, puede ejecutarlo nuevamente cada vez que alguien de su equipo agregue uno nuevo.

Babel

Babel es un compilador o transpilador de JavaScript que traduce el código ECMAScript 2015+ en un código que los motores JavaScript más antiguos pueden entender.

Babel es el compilador de Javascript más popular, y marcos como Vue y React lo usan de forma predeterminada. Dicho esto, los conceptos de los que hablaremos aquí no solo están relacionados con Babel y se aplicarán a cualquier compilador de JavaScript.

¿Por qué necesitas un compilador?

"¿Por qué necesitamos un compilador, JavaScript no es un lenguaje interpretado?" puede preguntar si está familiarizado con los conceptos de lenguajes compilados e interpretados.

Es cierto que solemos llamar a algo "compilador" si traduce nuestro código legible por humanos a un binario ejecutable que la CPU pueda entender. 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, de JS moderno a una versión anterior).

JavaScript es el lenguaje de los navegadores. Pero hay un problema con los navegadores: compatibilidad cruzada. Las herramientas JavaScript y el lenguaje en sí están evolucionando rápidamente y muchos navegadores no logran igualar ese ritmo. Esto da lugar a problemas de compatibilidad.

Probablemente desee escribir código en las versiones más recientes de JavaScript para poder utilizar sus nuevas funciones. Pero si el navegador que está ejecutando su código no ha implementado algunas de las nuevas funciones en su motor JavaScript, el código no se ejecutará correctamente en ese navegador.

Este es un problema complejo porque cada navegador implementa las funciones a una velocidad diferente. E incluso si implementan esas nuevas funciones, siempre habrá personas que usen una versión anterior de su navegador.

Entonces, ¿qué sucede si desea poder utilizar las funciones recientes pero también desea que sus usuarios vean esas páginas sin ningún problema?

Antes de Babel, usábamos polyfills para ejecutar versiones anteriores de cierto código si el navegador no era compatible con las funciones modernas. Y cuando usa Babel, usa polyfills detrás de escena y no requiere que haga nada.

¿Cómo funcionan los transpiladores / compiladores?

Babel funciona de manera similar a otros compiladores. Tiene etapas de análisis, transformación y generación de código.

No profundizaremos aquí en cómo funciona, ya que los compiladores son cosas complicadas. Pero para comprender los conceptos básicos de cómo funcionan los compiladores, puede consultar el proyecto del compilador super-diminuto. También se menciona en la documentación oficial de Babel como útil para comprender cómo funciona Babel.

Por lo general, podemos salirse con la suya sabiendo acerca de los complementos y ajustes preestablecidos de Babel. Los complementos son los fragmentos de código que Babel usa entre bastidores para compilar su código en versiones anteriores de JavaScript. Puede pensar en cada característica moderna como un complemento. Puede ir a este enlace para ver la lista completa de complementos.

Los ajustes preestablecidos son colecciones de complementos. Si desea utilizar Babel para un proyecto de React, puede utilizar el @ babel / preset-react prefabricado que contiene los complementos necesarios.

Puede agregar complementos editando el archivo de configuración de Babel.

¿Necesita Babel para su aplicación React?

Para React, necesita un compilador porque el código de React generalmente usa JSX y JSX debe compilarse. Además, la biblioteca se basa en el concepto de utilizar la sintaxis de ES6.

Afortunadamente, cuando creas un proyecto con create-react-app , viene con Babel ya configurado y normalmente no necesitas 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 comprender cómo funciona. Simplemente ingrese un código y analice la salida.

Webpack

Webpack es un paquete de módulos estáticos. Cuando crea un nuevo proyecto, la mayoría de los frameworks / bibliotecas de JavaScript lo usan de inmediato.

Si la frase "agrupador de módulos estáticos" suena confusa, siga leyendo porque tengo algunos ejemplos excelentes para ayudarlo a comprender.

¿Por qué necesitas un paquete?

En las aplicaciones web, tendrás muchos archivos. Este es especialmente el caso de las aplicaciones de una sola página (React, Vue, Angular), y cada una tiene sus propias dependencias.

Lo que quiero decir con una dependencia es una declaración de importación: si el archivo A necesita importar el archivo B para ejecutarse correctamente, entonces decimos que A depende de B.

En proyectos pequeños, puede manejar las dependencias del módulo con etiquetas. Pero cuando el proyecto crece, las dependencias rápidamente se vuelven difíciles de administrar.

Quizás, lo que es más importante, dividir el código en varios archivos hace que su sitio web se cargue más lentamente. Esto se debe a que el navegador necesita enviar más solicitudes en comparación con un archivo grande, y su sitio web comienza a consumir una tonelada de ancho de banda debido a los encabezados HTTP.

Nosotros, como desarrolladores, queremos que nuestro código sea modular. Lo dividimos en varios archivos porque no queremos trabajar con un archivo con miles de líneas. Aún así, también queremos que nuestros sitios web sean eficaces, usen menos ancho de banda y se carguen rápido.

Entonces, veremos cómo Webpack resuelve este problema.

Cómo funciona Webpack

Cuando hablábamos de Babel, mencionamos que el código JavaScript debe transpilarse antes de la implementación.

Pero compilar con Babel no es la única operación que necesita antes de implementar su proyecto.

Por lo general, necesita uglify, transpilarlo, compilar SASS o SCSS a CSS si está usando preprocesadores, compilar TypeScript si lo está usando ... y, como puede ver, esta lista puede ser larga fácilmente.

No desea ocuparse de todos esos comandos y operaciones antes de cada implementación. Sería genial si hubiera una herramienta que hiciera todo eso por usted en el orden correcto y de la manera correcta.

La buena noticia es: Webpack.

Webpack también proporciona características como un servidor local con recarga en caliente (lo llaman reemplazo de módulo en caliente) para mejorar su experiencia de desarrollo.

Entonces, ¿qué es la recarga caliente? Significa que cada vez que guarda su código, se compila y se implementa en el servidor HTTP local que se ejecuta en su máquina. Y cada vez que cambia un archivo, envía un mensaje a su navegador para que ni siquiera necesite actualizar la página.

Si alguna vez ha utilizado "npm run serve", "npm start" o "npm run dev", esos comandos también inician el servidor de desarrollo de Webpack entre bastidores.

Webpack comienza desde el punto de entrada de su proyecto (índice) y genera el árbol de sintaxis abstracta del archivo. Puede pensar en ello como analizar el código. Esta operación también se realiza en compiladores, que luego buscan declaraciones de importación de forma recursiva para generar un gráfico de dependencias.

Luego convierte los archivos en IIFE para modularizarlos (recuerde, poner código dentro de una función restringe su alcance). Al hacer esto, modularizan los archivos y se aseguran de que las variables y funciones no sean accesibles para 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 detrás de escena, pero esto es suficiente para comprender los conceptos básicos.

Bono - ESLint

La calidad del código es importante y ayuda a que sus proyectos se mantengan y se puedan ampliar fácilmente. Si bien la mayoría de los desarrolladores reconocemos la importancia de la codificación limpia, a veces tendemos a ignorar las consecuencias a largo plazo bajo la presión de los plazos.

Muchas empresas deciden sobre estándares de codificación y animan a los desarrolladores a obedecer esos estándares. Pero, ¿cómo puede asegurarse de que su código cumpla con los estándares?

Bueno, puede usar una herramienta como ESLint para hacer cumplir las reglas en el código. Por ejemplo, puede crear una regla para hacer cumplir o no permitir el uso de punto y coma en su código JavaScript. Si rompe una regla, ESLint muestra un error y el código ni siquiera se compila, por lo que no es posible ignorarlo a menos que desactive la regla.

Los linters se pueden utilizar para hacer cumplir los estándares escribiendo reglas personalizadas. Pero también puede usar las configuraciones ESLint prefabricadas establecidas por las grandes empresas 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 lo ayuda a acostumbrarse a las mejores prácticas, pero ese no es su único beneficio. ESLint también le advierte sobre posibles errores / errores en su código para que pueda evitar errores comunes.

Bono - CI / CD (CircleCI)

La integración / desarrollo continuo ha ganado mucha popularidad en los últimos años, ya que muchas empresas han adoptado principios ágiles.

Herramientas como Jenkins y CircleCI le permiten automatizar la implementación y las pruebas de su software para que pueda implementarlo con más frecuencia y de manera confiable sin tener que pasar por procesos de compilación difíciles y propensos a errores.

Menciono CircleCI como el producto aquí porque es gratuito y se usa con frecuencia en proyectos de JavaScript. También es bastante fácil de usar.

Repasemos un ejemplo: digamos que tiene un servidor de implementación / control de calidad y su repositorio Git. Desea implementar sus cambios en su servidor de implementación / control de calidad, por lo que aquí hay un proceso de ejemplo:

  1. Empuje los cambios a Git
  2. Conectarse al servidor
  3. Crea un contenedor Docker y ejecútalo
  4. Extraiga los cambios al servidor, descargue todas las dependencias (npm install)
  5. Ejecute las pruebas para asegurarse de que no haya nada roto
  6. Utilice una herramienta como ESLint / Sonar para garantizar la calidad del código
  7. Fusionar el código si todo está bien

Con la ayuda de CircleCI, puede realizar automáticamente todas estas operaciones. Puede configurarlo y configurarlo para que realice todas las operaciones anteriores siempre que haga un cambio en Git. Rechazará el empuje si algo sale mal, por ejemplo, una prueba fallida.

No entraré en detalles sobre cómo configurar CircleCI porque este artículo trata más sobre el "¿Por qué?" de cada herramienta. Pero si está interesado en aprender más y verlo en acción, puede consultar esta serie de tutoriales.

Conclusión

El mundo de JavaScript está evolucionando rápidamente y las nuevas herramientas están ganando popularidad cada año.

Es fácil reaccionar a este cambio con solo 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 pensamientos sobre su importancia. También quería hacerte pensar en los problemas que resuelven en lugar de solo los detalles de cómo usarlos.

Si te gustó el artículo, puedes consultar y suscribirte a mi blog donde intento escribir con frecuencia. Además, déjame saber lo que piensas comentando para que podamos hacer una lluvia de ideas o puedes decirme qué otras herramientas te encanta usar :)