Guía de términos confusos para Developers Juniors

😱 La experiencia de sentirse como un fraude en el mundo de la programación puede ser abrumadora, especialmente cuando te encuentras con términos técnicos que te causan frustración.

A lo largo de muchos años en el desarrollo web he aprendido que lo más importante es la paciencia y la persistencia para enfrentarse a la terminología compleja.

He hablado mucho de ello en el podcast, pero aquí no sólo voy a recomendarte episodios, también quiero traerte ejemplos de código para que sitúes algunas cosas en su contexto.

Lista de términos técnicos causan frustración ¶

En el desarrollo web, es común encontrarse con términos que parecen complicados al principio. Algunos de estos incluyen:

• Algoritmos
• Bubble sort
• Big O notation
• CSS: Pseudo-elementos y pseudo-selectores
• CLI y GUI
• Bundlers
• Containerization
• Frameworks y APIs
• Git
• Objetos y clases
• Sintaxis

Terminología compleja después de muchos años en el desarrollo web ¶

¿Sientes que no puedes entender la terminología en el desarrollo web? No te preocupes, es completamente normal. Es importante recordar que el mundo de la programación está en constante evolución y siempre habrá términos nuevos para aprender.

🎧 Podcast relacionado ¶

Escucha: WR 205: ¿Cómo dar el salto de nivel de programador novato a pro?

Definición de términos de nivel principiante ¶

Algoritmos ¶

Un algoritmo es un conjunto de instrucciones que realiza una tarea específica. Los algoritmos son fundamentales para resolver problemas en informática. Uno de estos problemas son los algoritmos de ordenamiento.

Bubble sort (ordenamiento de burbuja)

Bubble sort es un algoritmo de ordenamiento simple que funciona comparando cada elemento en un array con el siguiente e intercambiándolos si están en el orden incorrecto. Este proceso se repite hasta que no se requieran más intercambios.

Ejemplo de código

def bubble_sort(lista):
    n = len(lista)
    for i in range(n):
        # Últimos i elementos ya están en su lugar
        for j in range(0, n-i-1):
            # Recorre la lista de 0 a n-i-1
            # Intercambia si el elemento encontrado es mayor que el siguiente
            if lista[j] > lista[j+1] :
                lista[j], lista[j+1] = lista[j+1], lista[j]
    return lista

# Ejemplo de uso
lista_desordenada = [64, 34, 25, 12, 22, 11, 90]
lista_ordenada = bubble_sort(lista_desordenada)
print("La lista ordenada es:", lista_ordenada)

Funciona comparando elementos adyacentes y haciendo un intercambio si están en el orden incorrecto. Este proceso se repite hasta que la lista esté completamente ordenada.

Este algoritmo de ordenamiento de burbuja se puede aplicar a cualquier lista de elementos comparables, como números o cadenas de texto. La función bubble_sort toma una lista como entrada y devuelve la lista ordenada.

Big O notation ¶

Big O notation es una forma de medir la eficiencia de un algoritmo en función del tamaño de los datos de entrada. Se utiliza para analizar el rendimiento de los algoritmos y compararlos entre sí.

Hacemos un análisis de complejidad del bubble_sort de antes.

• En el peor caso, donde la lista está en orden inverso, se deben hacer n-1 comparaciones en la primera iteración, n-2 comparaciones en la segunda iteración, y así sucesivamente hasta que la lista esté ordenada. En total, se deben hacer (n-1) + (n-2) + … + 1 comparaciones. Esto es equivalente a la suma de los primeros n números naturales, que es n(n-1)/2. En términos de Big O notation, esto es O(n^2).
• En el mejor caso, donde la lista ya está ordenada, se hará una sola pasada de n-1 comparaciones. En términos de Big O notation, esto es O(n).

Por lo tanto, la complejidad del algoritmo de ordenamiento de burbuja es O(n^2) en el peor caso y O(n) en el mejor caso. Esto significa que el tiempo que tarda el algoritmo en ejecutarse aumenta cuadráticamente con el tamaño de la lista en el peor caso, pero linealmente en el mejor caso.

Pseudo-elementos y pseudo-selectores ¶

Los pseudo-elementos y los pseudo-selectores son reglas CSS que permiten seleccionar y aplicar estilos a partes específicas de un elemento HTML. Un ejemplo de pseudo-selector es el selector :nth-child, que permite aplicar estilos a un elemento específico dentro de un conjunto de elementos hermanos.

🎧 Podcast relacionado ¶

Escucha ⭐️ WRP 131. Padre, he pecado con el CSS

Ejemplo de código.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Aplica el estilo a todos los elementos li */
      li {
        color: black;
        font-size: 16px;
      }
      
      /* Aplica un estilo diferente al segundo elemento li */
      li:nth-child(2) {
        color: red;
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
    </ul>
  </body>
</html>

En este ejemplo, se utiliza el pseudo-selector :nth-child(2) para seleccionar el segundo elemento li de una lista y aplicarle un estilo diferente.

En este caso, el segundo elemento li tendrá un color rojo, un tamaño de fuente más grande y un peso de fuente más fuerte. Los demás elementos li tendrán el estilo por defecto, con color negro y tamaño de fuente de 16px.

CLI (Command-Line Interface) y GUI (Graphical User Interface) ¶

La CLI es una interfaz de usuario basada en texto que permite interactuar con el sistema operativo mediante comandos. Por otro lado, la GUI es una interfaz gráfica que facilita la interacción con el sistema operativo mediante elementos visuales como ventanas, botones e íconos.

Ambas interfaces tienen sus ventajas y desventajas, y la elección entre ellas depende de las preferencias personales y las necesidades específicas del proyecto.

Ejemplo de código

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// Interfaz de línea de comandos (CLI)
rl.question('¿Cuál es tu nombre? ', (nombre) => {
  console.log(`Hola, ${nombre}!`);
  rl.close();
});

// Interfaz gráfica de usuario (GUI)
const boton = document.querySelector('button');
const input = document.querySelector('input');
const mensaje = document.querySelector('#mensaje');

boton.addEventListener('click', () => {
  const nombre = input.value;
  mensaje.textContent = `Hola, ${nombre}!`;
});

En este ejemplo, el programa tiene una interfaz de línea de comandos que utiliza el módulo readline de Node.js para solicitar el nombre del usuario y mostrar un mensaje personalizado en la consola.

También tiene una interfaz gráfica de usuario que utiliza el DOM de JavaScript para crear un botón, un campo de entrada y un mensaje que se actualiza cuando se hace clic en el botón.

Para ejecutar el programa desde la línea de comandos, podemos escribir:

node programa.js

Esto mostrará el mensaje “¿Cuál es tu nombre?” en la consola, y al escribir el nombre del usuario y presionar Enter, se mostrará el mensaje personalizado en la consola.

Para usar la interfaz gráfica de usuario, podemos abrir el archivo HTML en un navegador web y hacer clic en el botón para mostrar el mensaje personalizado.

Bundlers ¶

Los bundlers son herramientas que agrupan y optimizan el código fuente y sus dependencias en paquetes más pequeños y eficientes para su distribución en producción. Ejemplos de bundlers populares incluyen Webpack y Vite.

🎧 Podcast relacionado ¶

Escucha WR 217: Buenas razones para usar Vite

Ejemplo de código

Un ejemplo de configuración de Vite en un proyecto de JavaScript para agrupar y optimizar el código fuente y sus dependencias:

// vite.config.js

module.exports = {
  build: {
    outDir: 'dist',
    minify: true,
    rollupOptions: {
      output: {
        entryFileNames: '[name]-[hash].js',
        chunkFileNames: '[name]-[hash].js',
        assetFileNames: '[name]-[hash][extname]',
      },
    },
  },
};

En este ejemplo, se utiliza Vite para optimizar y empaquetar el código fuente y sus dependencias en la carpeta dist. La configuración también incluye opciones para minimizar el código y personalizar el formato de los nombres de archivo generados por Vite.
Para ejecutar Vite en el proyecto, podemos utilizar el comando:

npm run build

Esto creará los archivos optimizados en la carpeta dist, listos para ser utilizados en producción.

Además de empaquetar y optimizar el código, Vite también ofrece una experiencia de desarrollo rápida y eficiente, con recarga en caliente, módulos ESM nativos y una configuración simplificada.

Containerization ¶

La containerización es un enfoque de empaquetar software y sus dependencias en contenedores aislados y livianos. Estos contenedores pueden ejecutarse de manera consistente en diferentes entornos, lo que facilita su implementación y escalabilidad. Docker y Kubernetes son dos tecnologías populares para la containerización de aplicaciones.

🎧 Podcast relacionado ¶

Escucha WR 163: Docker para novatos

Ejemplo de código

Un ejemplo de un archivo Dockerfile que define cómo construir un contenedor de Docker para una aplicación web de Node.js:

FROM node:14-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

En este ejemplo, se utiliza la imagen oficial de Node.js para construir el contenedor de Docker. Se crea un directorio de trabajo en /app, se copian los archivos package.json y package-lock.json al directorio y se instalan las dependencias de Node.js mediante npm install.

Luego, se copian todos los archivos del proyecto al directorio de trabajo y se expone el puerto 3000, que es el puerto en el que la aplicación web se ejecuta. Finalmente, se establece el comando predeterminado para ejecutar la aplicación web con npm start.

Para construir y ejecutar el contenedor de Docker, podemos utilizar los siguientes comandos:

docker build -t nombre-del-contenedor .
docker run -p 3000:3000 nombre-del-contenedor

El primer comando construye el contenedor de Docker utilizando el archivo Dockerfile en el directorio actual y lo etiqueta con el nombre nombre-del-contenedor. El segundo comando ejecuta el contenedor de Docker y lo conecta al puerto 3000 en la máquina host, lo que permite acceder a la aplicación web desde un navegador web.

La containerización es muy útil para garantizar que una aplicación se ejecute de manera consistente en diferentes entornos y para simplificar su implementación y escalabilidad.

Además, la containerización también puede mejorar la seguridad, ya que los contenedores aislados limitan el impacto de los posibles ataques en la seguridad del sistema.

Frameworks y APIs ¶

Un framework es un conjunto de bibliotecas y herramientas que proporcionan una estructura y base para el desarrollo de aplicaciones. Por otro lado, una API (Application Programming Interface) es un conjunto de reglas y protocolos que permiten a los desarrolladores acceder y utilizar funciones y datos proporcionados por servicios o sistemas externos.

🎧 Podcast relacionado ¶

Escucha WR 224: MongoDB, NodeJS y bien de APIs con Alfredo Giménez

Ejemplos de ambos

** Frameworks**

1. React: un framework de JavaScript para la creación de interfaces de usuario interactivas y reutilizables.
2. Angular: un framework de JavaScript para la creación de aplicaciones web escalables y de alta calidad.
3. Django: un framework de Python para la creación de aplicaciones web con un enfoque en la simplicidad y la productividad.
4. Ruby on Rails: un framework de Ruby para la creación de aplicaciones web con una estructura y convenciones definidas.
   APIs
5. Google Maps API: una API de JavaScript para integrar mapas y datos de ubicación en aplicaciones web y móviles.
6. Twitter API: una API de RESTful para acceder y utilizar datos de Twitter, como tweets, perfiles de usuario y tendencias.
7. Stripe API: una API de pagos en línea para procesar pagos seguros y fiables en aplicaciones web y móviles.
8. AWS API Gateway: una API de gestión de API para crear, publicar y proteger APIs de forma rápida y escalable en la nube de Amazon Web Services.

Git ¶

Git es un sistema de control de versiones ampliamente utilizado en el desarrollo de software. Permite a los desarrolladores colaborar en proyectos y mantener un historial completo de los cambios realizados en el código fuente.

👉 Consulta Los buenos motivos para usar Git si eres programador

⭐️ Curso premium en Web Reactiva: Empezar con Git

🎧 Podcast relacionado ¶

Escucha WR 239: Repasando “Programador, pon un git en tu vida”

Ejemplos de uso

Te dejo algunos ejemplos de comandos de Git que se pueden utilizar para colaborar en proyectos y mantener un historial completo de los cambios realizados en el código fuente:

Clonar un repositorio de Git desde un servidor remoto:

git clone https://github.com/nombre-de-usuario/repo.git

Crear una nueva rama de Git para trabajar en una nueva característica o solución de un problema:

git branch nueva-rama
git checkout nueva-rama

Agregar archivos modificados al área de preparación para el siguiente commit:

git add archivo-modificado.js

Crear un commit con los cambios realizados y agregar un mensaje descriptivo:

git commit -m "Mensaje descriptivo del commit"

Empujar la rama actual al servidor remoto para compartir los cambios con otros colaboradores:

git push origin nueva-rama

Traer los cambios más recientes de la rama principal del servidor remoto y fusionarlos con la rama actual:

git fetch origin
git merge origin/main

Git ofrece muchas otras funciones avanzadas, como la fusión de ramas, la rebase de ramas, el etiquetado de versiones y la gestión de conflictos.

Objetos y clases ¶

En la programación orientada a objetos, un objeto es una instancia de una clase que encapsula atributos y métodos relacionados con una entidad específica. Las clases son plantillas, que contienen una descripción común para todos los objetos creados a partir de ellas.

⭐️ Masterclass premium en Web Reactiva: Ejemplos reales de refactorización con buenas prácticas.

🎧 Podcast relacionado ¶

Escucha WR 93: Principios S.O.L.I.D. para novatos

Objetos ¶

Utilizamos el código en castellano para que el ejemplo sea más fácil de comprender, pero siempre es recomendable utilizar nombres de variables y métodos y comentarios en inglés.

// Definición de un objeto
let persona = {
  nombre: 'Juan',
  apellido: 'Pérez',
  edad: 30,
  saludar: function() {
    console.log(`Hola, mi nombre es ${this.nombre} ${this.apellido} y tengo ${this.edad} años.`);
  }
};

// Acceso a los atributos y métodos del objeto
console.log(persona.nombre); // Juan
console.log(persona.edad); // 30
persona.saludar(); // Hola, mi nombre es Juan Pérez y tengo 30 años.

En este ejemplo, se define un objeto persona con atributos como nombre, apellido y edad, y un método saludar que muestra un mensaje de presentación en la consola. Los atributos y métodos del objeto se pueden acceder y utilizar utilizando la sintaxis de punto (.).

Clases ¶

// Definición de una clase
class Persona {
  nombre: string;
  apellido: string;
  edad: number;

  constructor(nombre: string, apellido: string, edad: number) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.edad = edad;
  }

  saludar() {
    console.log(`Hola, mi nombre es ${this.nombre} ${this.apellido} y tengo ${this.edad} años.`);
  }
}

// Creación de un objeto a partir de una clase
let persona = new Persona('Juan', 'Pérez', 30);

// Acceso a los atributos y métodos del objeto
console.log(persona.nombre); // Juan
console.log(persona.edad); // 30
persona.saludar(); // Hola, mi nombre es Juan Pérez y tengo 30 años.

En este ejemplo, se define una clase Persona con atributos como nombre, apellido y edad, y un método saludar que muestra un mensaje de presentación en la consola. Se utiliza el constructor para inicializar los atributos de la clase cuando se crea un objeto a partir de ella. Los atributos y métodos de la clase se pueden acceder y utilizar utilizando la sintaxis de punto (.) en los objetos creados a partir de ella.

Estos son solo algunos ejemplos de código en TypeScript para trabajar con objetos y clases en la programación orientada a objetos. TypeScript ofrece muchas otras características avanzadas para la programación orientada a objetos, como la herencia, la polimorfismo y la encapsulación.

Sintaxis ¶

La sintaxis es el conjunto de reglas y estructuras para el lenguaje de programación elegido. Cada lenguaje tiene su propia sintaxis, por ejemplo, la sintaxis para declarar variables puede variar entre lenguajes como JavaScript, Python y PHP.

JavaScript ¶

// Declaración de una variable
let message = 'Hola mundo!';

// Declaración de una función
function greet(name) {
  console.log(`Hola ${name}!`);
}

// Uso de condicionales
if (x > y) {
  console.log('x es mayor que y');
} else {
  console.log('y es mayor que x');
}

// Uso de bucles
for (let i = 0; i < 10; i++) {
  console.log(i);
}

En este ejemplo, se muestran algunas de las sintaxis comunes de JavaScript, como la declaración de variables, la declaración de funciones, el uso de condicionales y bucles

Python ¶

# Declaración de una variable
message = 'Hola mundo!'

# Declaración de una función
def greet(name):
  print(f'Hola {name}!')

# Uso de condicionales
if x > y:
  print('x es mayor que y')
else:
  print('y es mayor que x')

# Uso de bucles
for i in range(10):
  print(i)

En este ejemplo, se muestran algunas de las sintaxis comunes de Python, como la declaración de variables, la declaración de funciones, el uso de condicionales y bucles.

PHP ¶

<?php
// Declaración de una variable
$message = 'Hola mundo!';

// Declaración de una función
function greet($name) {
  echo "Hola $name!";
}

// Uso de condicionales
if ($x > $y) {
  echo 'x es mayor que y';
} else {
  echo 'y es mayor que x';
}

// Uso de bucles
for ($i = 0; $i < 10; $i++) {
  echo $i;
}
?>

En este ejemplo, se muestran algunas de las sintaxis comunes de PHP, como la declaración de variables, la declaración de funciones, el uso de condicionales y bucles.

En conclusión ¶

Es fundamental para un desarrollador junior aprender los términos básicos de programación para desenvolverse en el mundo del desarrollo web. A medida que creces como profesional, seguirás aprendiendo nuevas terminologías y conceptos.

No tengas miedo de enfrentarte a términos nuevos, ¡ser un aprendiz permanente es parte de ser un buen desarrollador!

Y siempre tienes una alternativa para aprender a la vez que haces otra cosa: 🎧 Escuchar el podcast Web Reactiva y Web Reactiva Premium

Preguntas frecuentes ¶

1. ¿Es necesario dominar todos los términos y conceptos para ser un buen desarrollador junior?

No es necesario dominar todos los términos y conceptos desde el principio. Es más importante centrarse en los fundamentos y aprender términos adicionales a medida que los encuentres en tu carrera.

2. ¿Cómo puedo mejorar mi comprensión de los términos y conceptos de programación?

Practicar y trabajar en proyectos reales te ayudará a entender y aplicar mejor los términos y conceptos en un contexto práctico.

3. ¿Es posible aprender todos los términos y conceptos existentes en el desarrollo web?

No, hay innumerables términos y conceptos en el mundo del desarrollo web, y siempre están evolucionando. Es más importante centrarse en aprender continuamente.

4. ¿Cómo puedo manejar el síndrome del impostor en el mundo de programación?

Aceptar que es imposible saberlo todo y entender que incluso los desarrolladores más experimentados siguen aprendiendo puede ayudarte a manejar el síndrome del impostor. También es útil rodearte de un sólido grupo de apoyo y compartir tus experiencias con otros desarrolladores.

5. ¿Qué recursos son útiles para aprender más sobre términos y conceptos de programación?

Hay numerosos recursos en línea, como blogs, tutoriales, cursos y documentación oficial para aprender más sobre términos y conceptos de programación. También es aconsejable unirse a comunidades en línea y participar en eventos locales de programación para obtener apoyo y conocimientos adicionales.