Artículo original escrito por Hunor Márton Borbély
Artículo original JavaScript Tutorial — How to Set Up a Front End Development Project
Traducido y adaptado por Julio Vargas
Digamos que tienes planes en construir un sitio web. Antes de empezar, debes configurar algunas herramientas para hacer tu vida más fácil. Pero, ¿Cuáles herramientas deberías tener?
El ecosistema JavaScript cambia tan rápido que puede ser abrumador elegir las mejores herramientas para usar. Para resolver este problema, en este artículo voy a explicarte como configurar un proyecto front end desde cero.
Veremos cosas como extensiones del editor que deberías tener, como agregar librerías de JavaScript a tu proyecto, por qué deberías usar Node.js incluso si lo que deseas es hacer desarrollo de front end, y como configurar un paquete de aplicaciones que generara una vista previa en vivo a medida que vas escribiendo código en tu navegador.
Ahora, adentrémonos en ello.
Como elegir editor de código.
Comencemos con los fundamentos. Como desarrollador Web, principalmente escribirás y o editarás texto, entonces necesitas un buen editor. Así que, ¿Cuál deberías usar?
Elegir un editor es altamente basado en tus preferencias personales, ya que la mayoría de editores tienen características similares.
Si no tienes preferencia personal, te recomiendo mucho VS Code. Últimamente, VS Code se ha vuelto el editor estándar de facto para desarrollo web.
Aquí tenemos un gráfico de la última edición de la encuesta State of JS. En esta encuesta, se le preguntó a más de 23.000 desarrolladores sobre sus preferencias con respecto a desarrollo web. La inmensa mayoría eligió VS Code en lo que a editores se refiere.
Si no has visto las encuestas de State of JS antes, te recomiendo mucho que lo hagas. Te puede brindar una excelente descripción general de las últimas tendencias con JavaScript. Puedes ver cuáles librerías y herramientas usa la gente y cuáles podrían abandonar pronto.
Una de las principales características de los editores convencionales es que puedes agregarles extensiones. Veamos dos extensiones que son imprescindibles.
Como darle formato a tu código automáticamente en VS Code.
Prettier es una extensión que hace que tu código sea más consistente y fácil de leer.
Digamos que copiaste algo de Stack Overflow y es difícil de leer. La tabulación está desactivada, una línea es demasiado larga y etc. Luego solo debes guardar el archivo, y mágicamente, todo luce como debería.
Esto es lo que hace Prettier. Le da formato al código basado en buenas prácticas. No solo corrige la tabulación y ajusta las líneas, también agrega paréntesis para mejorar la legibilidad del código, se asegura de que seas consistente con las comillas y mucho más.
Para hacer que funciones, primero debes instalar la extensión de Prettier. En VS Code vamos al panel de extensiones, escribe Prettier y luego instálalo.
Instalar la extensión no le da formato a tus archivos automáticamente al guardar por defecto. El funcionamiento por defecto es que una vez instalada la extensión, puedes presionar clic derecho dentro de tu archivo y luego seleccionar formato de documento. O seleccionar parte del archivo y luego selecciona seleccion de formato.
La primera vez que haces esto deberás seleccionar el formateador por defecto. Actualmente VS Code tiene un formateador, pero no es tan poderoso como Prettier. Entonces ahora que tenemos dos formateadores, tenemos que hacerle saber a VS Code que en el futuro, cuando se trate de dar formato a nuestro código, queremos usar Prettier.
Si quieres darle formato automáticamente a tus archivos cuando guardes, debes cambiar una configuración.
Ve a configuraciones en las preferencias de tu VS Code y busca Format On Save (dar formato al guardar). Por defecto, esto es falso entonces asegúrate de marcar la casilla de verificación. Después de eso cada vez que guardes tus archivos, el formateo debería hacerse automáticamente.
Formatear puede ser controversial, sin embargo, en la mayoría de los casos, especialmente para principiantes, recomiendo mucho las configuraciones por defecto. Pero si prefieres un estilo diferente puedes personalizar cosas.
Puedes indicar comentarios para ignorar líneas específicas y puedes crear un archivo rc donde puedes listar tus preferencias.
En la carpeta principal de tu proyecto, puedes crear un archivo llamado .prettierrc y agregar algunas opciones. Una opción típica sería si prefieres comillas sencillas en lugar de dobles en tu archivo. O si no quieres agregar punto y coma al final de tus líneas de código.
Con esta configuración, una vez que guardés tus archivos deberías ver un resultado diferente.
Hay muchas opciones por supuesto. Si quieres investigar más a fondo, puedes hacerlo en Prettier's documentation. (en inglés)
¿Por qué necesitas Node para un proyecto de desarrollo de front end?
Antes de adentrarnos en la segunda extensión que deberíamos tener, necesitamos configurar un par de cosas más. Primero debemos hablar de Node.js. ¿Qué es Node y por qué lo necesitas incluso si trabajas como un desarrollador de front end?
Node es a menudo asociado con el desarrollo back end, pero eso no es del todo cierto. Si ves la descripción de un trabajo donde estén buscando un desarrollador de Node, entonces probablemente estén buscando un desarrollador Back End.
Aun así usaras Node incluso si haces desarrollo de front end.
Entonces qué es Node, ¿Por qué la gente piensa que es para desarrollo Back-End y por qué la necesitas incluso como desarrollador de front end?
Node es un tiempo de ejecución de JavaScript. Ejecuta archivos de JavaScript fuera de un navegador. Hay dos formas de ejecutar código de JavaScript. Lo tienes como parte de un sitio web y lo ejecutas en todo el sitio web en un navegador, o lo ejecutas solamente en el archivo JavaScript con Node.
En este ejemplo tenemos un simple archivo JavaScript que imprime Hola Mundo en la consola.
Si tenemos Node instalado, podemos ir a la terminal, buscar la carpeta donde está el archivo y luego ejecutarlo con Node, así, puedes ver como se ejecuta el archivo y el resultado está en la consola.
Eso es Node en realidad, una herramienta que ejecuta archivos JavaScript por sí mismos.
JavaScript se comporta principalmente de la misma manera en ambos casos. Pero hay algunas diferencias en lo que puede hacer en un navegador y lo que puede hacer cuando se ejecuta con Node.
Por ejemplo, cuando se ejecuta en el navegador, JavaScript puede acceder a los elementos HTML y modificarlos. Esa es el punto principal de tener JavaScript en primer lugar.
En Node, no hay archivo HTML circundante al cual JavaScript pueda acceder. JavaScript se ejecuta por sí mismo.
Por otro lado, en Node JavaScript puede acceder a tus archivos del sistema, leerlos y escribirlos.
Por ejemplo, puedes ejecutar scripts que generen el esqueleto de tu proyecto en tu computadora por ti. Puedes ejecutar comprobaciones en tus archivos y automáticamente corregir los errores. O puedes ejecutar tus archivos de prueba.
En resumen, Node te deja ejecutar algunos scripts que hacen tu vida más fácil.
Para instalar node ve a nodejs.org e instala la última versión estable, marcada con LTS. Si aún no estás seguro de que ya tienes Node, también puedes ir a tu terminal y ejecutar el código node-v para comprobarlo. Si obtienes un número de versión, tienes Node.
Entonces, para responder a la pregunta, ¿Por qué la gente asocia Node con el desarrollo Back End? Porque si el código back end es escrito en JavaScript, los servidores necesitan una forma de ejecutarlo sin el navegador. Entonces sí, si tú eres un desarrollador back end usando JavaScript, vas a usar Node. Pero Node es muchísimo más que eso.
Como ejecutar tu proyecto.
Ahora que tenemos Node instalado podemos instalar un empaquetador. ¿Qué es un empaquetador? Un empaquetador es una herramienta que toma todos tus archivos y los convierte en paquetes ordenados que podrás ejecutar en el navegador.
¿Por qué no podrías ejecutar tus archivos en el navegador? Si usas HTML, CSS y JavaScript simple entonces tienes razón, puede que ni siquiera necesites un empaquetador.
Pero las herramientas de desarrollo web han evolucionado, y en el momento en que utilices algo más avanzado tu navegador no entenderá tus archivos.
¿Estás usando React? La sintaxis de React JSX que se ve como HTML, no es parte de la sintaxis de JavaScript. Necesitas una herramienta que lo convierta en JavaScript simple. De otro modo, no se ejecutará en el navegador.
¿Estás usando SCSS o algún otro dialecto de CSS? Entonces, de nuevo, tienes que convertirlo a CSS simple para que el navegador lo entienda.
Otra razón por la que quieres usar un empaquetador es que puede generar una previsualización en vivo de tu sitio web mientras lo creas. Cada vez que guardes verás el resultado de inmediato en tu navegador
Entonces, ¿cómo elegir empaquetador? Hay muchas opciones. Actualmente, el empaquetador más usado es webpack. Webpack es una herramienta poderosa con un montón de opciones de configuración. Pero todo este montón de opciones son también sus debilidades. Configurarla no es algo fácil si eres nuevo en la herramienta.
Otra opción que ganó popularidad recientemente es Parcel. Parcel tiene características similares a Webpack. De alguna manera, es incluso mejor.
Lo realmente genial es que una vez instalado, no necesita una sola configuración. Parcel automáticamente se da cuenta de lo que usas e interpreta tus archivos.
¿Estás usando React? No hay problema, Parcel lo reconoce e interpreta JSX. ¿Estás usando SCSS? No hay problema. Parcel sabe qué hacer.
Para instalar Parcel tienes que ejecutar un comando en tu terminal. Vamos a usar npm (node package manager) para instalarlo. npm es una herramienta que viene con Node. Si instalaste Node ya tienes npm.
Con npm puedes instalar librerias de JavaScript en tu computador global o específicamente para un proyecto.
Ve a tu terminal y ejecuta el siguiente comando. La etiqueta -g significa global. Una vez que hayas instalado Parcel en tu computador, serás capaz de ejecutar cualquier proyecto con él. No tienes que instalar Parcel para cada proyecto que crees, solo lo haces una vez.
npm install -g parcel-bundlerNota: El comando de arriba instalará Parcel 1. Al momento de escribir este articulo, Parcel 2 está en fase Beta y tambien lo puedes instalar con npm install -g parcel.
Después de instalar Parcel globalmente, veamos como lo usamos para ejecutar un proyecto.
Digamos que tenemos un sitio web con archivos HTML, CSS y JavaScript. Podemos usar Parcel para crear una previsualización en vivo.
Abre la terminal y asegúrate de estar en la carpeta en la que tienes tu proyecto. Si usas VS Code puedes usar la terminal incorporada que comenzará automáticamente a la derecha de la pantalla.
Una vez que estemos seguros de estar en la carpeta correcta podemos ejecutar parcel con el siguiente comando. Este te dará una URL donde puedes ver los resultados. Y cada vez que editemos un archivo podemos ver el resultado guardado en vivo en el navegador.
parcel index.htmlUna vez que inicies con el código este ejecutará y generará una vista previa en vivo de tu sitio hasta que cierres o pares la ventana de la terminal. En general, la puedes ejecutar mientras estás desarrollando tu sitio. Entonces una vez que hayas terminado puedes presionar Ctrl+C para pararla.
Si se desincroniza o la interrumpes con un error, entonces puedes reiniciarla presionando Ctrl+C para pararla y después ejecutarla en el mismo script de nuevo.
Por supuesto, Parcel es mucho mas que eso. Ahora en vez de CSS simple, también puedes usar SCSS por ejemplo. Esto te permite usar muchas características diferentes como declaraciones anidadas, usar mixins o llamar funciones y mucho más. Es como CSS con superpoderes. O incluso puedes reemplazar HTML y usar Pug en su lugar.
Como añadir librerias a tu proyecto de JavaScript.
Ahora que tenemos Node instalado y una vista previa de npm, veamos como podemos añadir librerías a nuestro proyecto
En el pasado los desarrolladores usaban una CDN para agregar librerias. Tu podrías importar una librería teniendo la etiqueta script en tu código HTML apuntando a una URL.
Eso está bien y sigue funcionando bien, pero hoy en día muchos desarrolladores usan npm o node package manager para agregar libraries a sus proyectos. Entonces ¿cómo funciona?
Primero tienes que inicializar el proyecto con el siguiente comando en tu terminal. De nuevo, necesitas ejecutar este comando en el directorio raíz de tu proyecto (consejo: Usa la terminal incorporada de VS Code para comenzar en la carpeta correcta).
npm init —yesEste comando inicializó un archivo package.json en tu raíz con algunos metadatos. Tiene cosas como: nombre del proyecto, descripción, número de versión y etc. Cuando agregas el indicador si, todos estos valores tendrán un valor por defecto.
Ahora podemos agregar librerías a nuestro paquete con el comando de instalación de npm. En un artículo previo, usamos Three.js para renderizar cajas 3d en el navegador.
Así que como ejemplo instalemos Three.js. Ve a tu terminal de nuevo, asegurate de estar en la carpeta correcta y ejecuta el siguiente código:
npm install threeEsto instalará Three.js. ¿Cómo sabes que la palabra clave aquí es Three y no threejs?
Cuando no sabes el nombre de tu paquete puedes googlear "npm" y el nomre de la librería que necesitas. O en caso de que incluso no sepas el nombre de la librería también puedes buscar "npm librería 3D" y ver que encuentra Google.
Podemos mirar estos resultados uno por uno y elegir uno basado en sus capacidades y otras informaciones. La mayoría de estos paquetes vienen con descripciones y ejemplos rápidos para darte una idea de lo que puede hacer la librería.
Otro indicador que puedes mirar son las descargas semanales y su última actualización para asegurarte que sea una librería activa que la gente sigue usando.
Una vez que encuentres el paquete que estás buscando, puedes ver el comando de instalación en la esquina superior derecha: npm i three. La i aquí no es más que un diminutivo de instalar.
Cuando ejecutemos este comando, sucederán tres cosas.
Primero, agregará la última versión de Three.js a tu archivo package.json como una dependencia del proyecto. Después también crea un archivo package-lock. Ambas cosas nunca deberías editarlas manualmente. Para añadir, quitar o actualizar paquetes, deberías usar comandos como npm install, npm uninstall y etc.
Lo tercero que sucederá una vez que ejecutes npm install es que se creara una carpeta llamada node_modules. Esta es la carpeta donde estará el código fuente de Three.js.
Entonces, cuando importes Three.js en tu proyecto, lo buscarás en esta carpeta. No debes modificarla de forma manual como dijimos anteriormente.
Ahora que tenemos instalado Three.js podemos crear un sitio web simple que muestre una caja en 3D. Es un simple archivo HTML y JavaScript con el código para una Caja 3D.
La clave aquí es que en tu archivo JavaScript importes Three.js con la declaración de importar. Y usará el paquete que instalaste.
Luego podemos ejecutar el proyecto con Parcel. Usar importar significa que ahora usamos el módulo del sistema. Ejecutar un proyecto con la sitaxis del módulo puede ser un poco complicado, pero como estamos usando Parcel para ejecutar nuestro proyecto, funciona sin problemas y sin preguntas. Esa es una de las razones por la cual usamos Parcel.
Si quieres aprender más sobre crear juegos en 3D con Three.js puedes ver mi artículo sobre como construir un carro minimalístico en el navegador.
Cómo obtener consejos de codificación mientras codifica.
La segunda extensión que deberías tener para VS Codde es ESLint. Mientras que Prettier es para darle formato a tu código, ESLint puede darte consejos de codificación.
Existen muchos patrones en JavaScript que pueden causar un error o que pueden ser engañosos cuando tratas de entender el código.
En este ejemplo declaramos una variable pero luego tenemos un error de escritura y tratamos de usar otra variable que no existe.
ESLint lo resaltará. Te mostrará una advertencia en ambos, en la declaración diciendo que creaste una variable que no usas, y en el uso donde te dirá que tratas de usar una variable que no está declarada.
Después de estas advertencias, es fácil encontrar donde tuviste el error. Por supuesto, ESLint es mucho más complejo que solo tratar de encontrar este simple error. También hay otros menos obvios donde podrías no entender al principio, porque te muestra una advertencia.
En ese punto, también puedes dar clic en el enlace para ver una explicación más detallada de por qué este patrón es malo y que puedes hacer para evitarlo.
¿Cómo puedes usar ESLint en tu proyecto? Configurarlo requiere algunos pasos más allá de instalarlo. Por suerte, la mayoría de estos pasos los tienes que hacer una sola vez.
Primero, como hiciste con Prettier, tienes que instalar la extensión de ESLint. Ve a extensiones, busca ESLint e instálala.
Luego necesitas generar una configuración de ESLint. Aunque antes de hacer esto, debes asegurarte de que tu proyecto está inicializado con npm init.
Si aún no tienes un archivo package.json entonces primero tienes que ejecutar npm init. Sí, para inicializar tu proyecto.
Luego puedes generar una configuración para ESLint con el siguiente comando.
npx eslint —-initnpx es otra herramienta que viene con Node. Puede ejecutar scripts que ni siquiera están en tu computador.
En este caso ejecutamos el script ESLint, pero en realidad nunca instalamos ESLint. Instalamos la extensión de ESLint, pero no es el script que estamos ejecutando aquí.
Este script te preguntará alguna cosas. La mayoría obvias excepto la primera.
¿Cómo te gustaría usar ESLint?
¿Quieres ESLint solo para comprobar los errores de sintaxis, quieres que también encuentre posibles problemas o incluso quieres que compruebe errores de estilo?
Si también usas Prettier, necesitas seleccionar la segunda opción. Porque ambos te recomendaran estilos, lo que hará que entren en conflicto.
Entonces si usas Prettier no necesitas ESLint para comprobar los estilos, solo para la sintaxis y posibles problemas.
¿Qué tipo de módulos usa tu proyecto?
En un proyecto de desarrollo de front end probablemente usas importar y exportar por lo que seleccionarás la primera opción.
¿Qué framework usa tu proyecto?
Si usas React o Vue.js selecciona la opción apropiada, de otra forma no selecciones nada.
¿Tu proyecto usa Typescript?
Si usas Typescript selecciona si, si no presiona enter y continua.
¿Dónde ejecutas tu proyecto?
¿Tu proyecto se ejecutará en un navegador o con Node? Aquí configuramos proyectos de desarrollo de front end entonces seleccionamos Navegador.
¿En qué formato quieres que esté tu archivo de configuración?
Esto realmente no importa, pero si quieres personalizar la configuración más tarde probablemente tienes que escoger entre JavaScript o JSON.
Finalmente, el script pregunta si debería instalar ESLint como dependencia de desarrollo, deberías pulsar si, esto instalará ESLint entonces estará disponible en tu carperta node_modules.
Después de este paso, podrás tener tu configuración y podrás encontrar ESLint en tu archivo package.json como dependencia de desarrollo.
Dependencia de desarrollo significa que ESLint no es parte del código fuente de tu sitio web, pero las herramientas lo requieren. En este caso la extensión ESLint requiere que el paquete esté instalado en tu proyecto.
Ahora que tenemos ESLint instalado, configurado y su paquete instalado, también necesitamos garantizarle acceso a este paquete.
Esto es un requerimiento de seguridad que tendrás que hacer solo una vez. En la parte de abajo del editor, una vez que ESLint esté instalado, encontrarás un botón con un círculo atravesado por una línea. Dale clic y selecciona Permitir en todos lados, esto permite que ESLint funcione apropiadamente en cualquier proyecto futuro.
Después de todos estos pasos, ESLint debería funcionar por fin. Si vamos a un archivo JavaScript y tratamos de usar una variable sin declarar, luego al guardarla la señalará.
ESLint también podría mostrarte errores en lugares donde todo está bien. Irónicamente si seleccionaste que la configuración de ESLint debería estar en un archivo JavaScript, entonces te podrá arrojar un error de configuración por sí mismo.
Esto es porque configuramos que el entorno para nuestros proyectos sea el navegador y esta configuración se basa en una variable global que no existe en el navegador.
Sin embargo, este archivo no es parte del sitio web exactamente. Es un archivo de configuración que no será parte del código fuente definitivo y su entorno natural es el navegador sino más bien de Node.js y en Node esta variable global existe. Por lo tanto este archivo está bien y no debería haber un error.
Una forma de arreglarlo es establecer una lista de archivos que ESLint debería ignorar. En la carpeta raíz de la aplicación, puedes crear un archivo llamado .eslintignore y agregarle .eslintrc.js, una vez que guardemos, ESLint no ejecutara ninguna verificación en el archivo de configuración nunca más.
ESLint es también altamente personalizable. Para más detalles puedes ver la documentación de ESLint.
Como configurar un proyecto en React o Vue.
¿Planeas crear un sitio web con React o Vue.js? Esencialmente harás los mismos pasos.
Inicializa un proyecto con npm init, instala las dependencias, configura ESLint y luego ejecuta tu proyecto con Parcel.
Mira mis videos en YouTube en los cuales veremos paso a paso de lo que hicimos antes y un ejemplo rápido con React y Vue.js (en inglés).
Próximos pasos.
Estas son las herramientas básicas que puedes usar cuando trabajes en un proyecto de desarrollo de front end con JavaScript. Añade librerías con npm, mantén tu código ordenado con Prettier, evita dolores de cabeza innecesarios con ESLint y ejecuta tu proyecto con Parcel.
Ahora que configuramos un proyecto, estás listo para construir tu Sitio web.
¿Qué pasa una vez que termines? Necesitas empaquetarlo en una compilación final que puedas subir a la web, si usas Parcel puedes crear un paquete final con el siguiente comando.
parcel build index.html —public-url '.'Esto creará un paquete en la carpeta raíz que tú puedes ejecutar en el navegador, puedes simplemente ejecutar tu nuevo index.html en la carpeta raíz para verlo en el navegador.
¡Y eso es todo! Gracias por Leer:)