DEV Community

Johan Garcia
Johan Garcia

Posted on

Rutas relativas y absolutas en programación

Una ruta es el método mediante el cual podemos referenciar un recurso o directorio en un sistema de archivos dentro de un sistema operativo. Teniendo esto claro, ¿por qué es importante conocer más sobre las rutas? Porque estas te ayudan a evitar errores y a referenciar de forma exacta los recursos o directorios necesarios para ser utilizados en nuestras aplicaciones.

Al saber indicar la localización exacta de un archivo o directorio mediante una cadena de caracteres, podemos trabajar de manera más eficiente y precisa.

Árbol de directorios

Antes de continuar, es importante definir un término clave para entender las rutas absolutas y relativas: el árbol de directorios. Este concepto representa una estructura jerárquica de directorios y archivos en un sistema operativo. Es un enfoque común cuando trabajamos directamente con sistemas de archivos, exploradores de carpetas o comandos de terminal, y es independiente de una aplicación específica.

Concepto del Árbol de Rutas
Un sistema de archivos está organizado en una estructura de árbol, donde:

  • Cada nodo es un directorio o un archivo.
  • El nodo raíz (/ en sistemas basados en UNIX o una unidad como C:\ en Windows) es el punto de inicio.
  • Cada rama conecta un directorio con sus subdirectorios o archivos.
  • Cada archivo o directorio tiene una ruta única que describe su posición en el árbol.

Estructura Jerárquica del Árbol
La estructura típica de un árbol de rutas en un sistema operativo puede representarse como:

Estructura Jerárquica del Árbol

Dentro de este árbol de directorios se encuentran las rutas absolutas y relativas, que es lo que veremos a continuación.

Rutas Absolutas:

  • Comienzan desde el directorio raíz (/ en sistemas basados en UNIX o C:\ en Windows).
  • Proporcionan la localización completa del archivo o directorio en el sistema.

Ejemplos:

  • En UNIX: /home/user/documents/file1.txt
  • En Windows: C:\Users\User\Documents\file1.txt

Rutas Relativas:

  • Se definen en relación con el directorio actual.
  • Ejemplo: Si estás en /home/user, la ruta relativa a file1.txt sería documents/file1.txt.

Rutas

Existen dos formas de expresar una ruta, su forma relativa y su forma absoluta que cumplen funciones distintas, en su mayoria las rutas.

Rutas Relativas
Una ruta relativa indica la ubicación de un archivo o recurso en relación con el directorio actual, o lo que sería lo mismo, la posición en la que nos encontramos dentro del sistema operativo (o el contexto actual). Estas rutas son más flexibles y se utilizan para acceder a archivos más cercanos o relacionados con la misma jerarquía de directorios en la que estamos trabajando.

Referenciación
Utilizaremos . para referenciar el directorio actual. Es útil para referirse a archivos o subdirectorios dentro del mismo directorio donde estás ubicado.

Utilizaremos .. para referenciar al directorio padre. Representa el directorio inmediatamente superior al actual.

Ejemplos

  • ../file.txt se refiere a file.txt en el directorio padre.
  • ../../anotherfile.txt retrocede dos niveles en la jerarquía y busca el archivo.

Tomaremos este directorio como ejemplo para explicar el uso de rutas relativas.

Directorio de ejemplo

Supongamos que estamos trabajando dentro de Header.js y queremos utilizar las funcionalidades que se encuentran en helpers.js. Haríamos referencia de la siguiente forma:

Importacion de recursos

Las ventajas de utilizar las rutas relativas son que no requieren un conocimiento completo de la estructura global del árbol de directorios.

Una desventaja sería utilizarlas en proyectos grandes, donde puede ser difícil mantener rutas que son especialmente largas, como (../../../).

Rutas Absolutas
Una ruta absoluta indica o señala la ubicación completa de un archivo, recurso o directorio desde la raíz del sistema de archivos. Estas rutas son independientes del directorio actual, más claras y explícitas sobre la ubicación del recurso. Además, pueden ser configuradas en algunos entornos, como TypeScript o Webpack.

Ejemplo
Si no estuviéramos trabajando con TypeScript o Webpack, haríamos uso de la raíz de nuestro árbol de archivos para ubicarnos en el recurso que necesitáramos (por ejemplo: C:\usuarios\usuario1\project\src\utils\helpers).

Sin embargo, en este caso estaremos utilizando TypeScript y haremos uso de baseUrl en tsconfig.json para configurar una URL base desde la cual podemos partir al utilizar rutas absolutas dentro de nuestro proyecto.

Directorio de ejemplo con tsconfig

Ahora continuaremos con la configuración de nuestro tsconfig.json.

Configuracion de tsconfig

Con esta configuración dentro de TypeScript y tsconfig.json, podremos utilizar los alias en nuestras rutas absolutas sin necesidad de referenciar todo el árbol de rutas existente (C:\usuarios\usuario1\project\src\utils\helpers), lo que evitará definir rutas extensas y difíciles de mantener, o el uso de rutas relativas.

Conclusión
Es esencial que comprendamos el árbol de directorios y las diferencias entre las rutas relativas y absolutas, ya que este conocimiento facilitará enormemente la navegación y gestión de archivos en cualquier sistema operativo o entorno de desarrollo. Las rutas absolutas les ofrecen una referencia precisa y clara a archivos y directorios, lo que asegura que siempre puedan acceder a ellos sin depender del directorio en el que se encuentren. Por otro lado, las rutas relativas son ideales para trabajar dentro del mismo contexto o proyecto, proporcionando flexibilidad y simplicidad.

Saber cuándo y cómo utilizar cada tipo de ruta no solo mejora la organización de sus proyectos, sino que también optimiza la mantenibilidad y reduce los errores relacionados con la ubicación de recursos. En proyectos grandes, las rutas absolutas y los alias bien configurados pueden simplificar las referencias y hacer que el código sea más limpio y fácil de comprender.

Entender estos conceptos es crucial para mejorar la eficiencia y precisión al trabajar con archivos y al desarrollar aplicaciones, garantizando un flujo de trabajo más ágil y un código más robusto.

  • Si el proyecto es pequeño o no quieres modificar configuraciones, usa rutas relativas.
  • Si trabajas en un proyecto grande o quieres mejorar la claridad del código, configura rutas absolutas.

Top comments (0)