¿Qué es el Desarrollo Frontend?
Tags: latam, spanish, frontend, webdev
Published: 2021-02-02 21:16:26

En mis últimos posts he hablado un poco sobre la industria tech, las ventajas de empezar a trabajar en este sector y cuáles serian algunos empleos comunes pero bastante demandada hoy día. Hablé sobre desarrollo de software, y en especial el desarrollo web. A partir de aquí me quiero enfocar en esta última área por dos razones: Es un área muy demandado con buenos sueldos y bastante accesible para cualquiera que quiera empezar desde cero, y también es el área a que me dedico y que tengo experiencia para poder hablar de lo que hago en mi día a día.

Muy bien, empecemos desde lo más elemental:

# **¿Qué es el Frontend?**
En el desarrollo web, el frontend es toda el área visual que un usuario puede ver e interactuar en un sitio web. Desde componentes más pequeños como botones, entradas de texto, imágenes hasta toda página en general. Como ejemplo tenemos esta página de dev.to, todo lo que podemos visualizar como texto, imágenes, otros posts, botones, links de redirección, página de perfil de usuarios, podcasts, forman parte del frontend del sitio.

Ok, entonces ¿Qué es el desarrollo Frontend?

Bueno como ya habrás supuesto, el desarrollo frontend se encarga de construir las vistas de un sitio web, utilizando herramientas especializadas que ayudan y facilitan su creación. Es importante destacar que, aunque este puesto se encargue de la parte visual, no le compete el diseño de la web, es decir, para la construcción de un sitio, primero se debe pasar por el proceso de diseño (que normalmente se encarga un diseñador), y luego con esto el desarrollador frontend procede a maquetar dicho diseño. Sería un buen plus que la persona que se encargue del frontend sepa diseñar, no es una tarea que se le deba delegar necesariamente, pero si lo sabe pues también es bueno.

Otra tarea importante de un desarrollador Frontend y que en ocasiones se desconoce cuando se comienza es la implementación de los servicios que el sitio web consumirá. En la mayoría de los casos nuestra web (a no ser que sea un sitio totalmente estático o sin funcionalidades) estará consumiendo servicios que provienen de otras fuentes y que normalmente realiza un desarrollador backend (tema que hablaremos después) como por ejemplo una API REST. Estos servicios deben ser implementados por el desarrollador frontend para su uso en la web.

Ahora bien, para poder construir una web, requiere de ciertas tecnologías que son la base.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wehzu33fvfxiq39wyu03.jpg)

* **HTML (HyperText Markup Language)**: Es un lenguaje de marcado de hiper texto. Con él construimos la estructura inicial de un sitio web. El HTML viene siendo el esqueleto de una web, que contiene el texto a mostrar. Se basa en etiquetas para poder construir todo el sitio web. Ejemplo, el siguiente código muestra un párrafo:

```
<p> Esto es un párrafo </p>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lpymwa9hneibpgkmc6rp.jpg)

* **CSS (Cascading Style Sheets)**: Es un lenguaje de estilos en cascada, esto le proporciona a la web los colores, espacios, tamaños, tipografías que necesita para poder tener el diseño que se quiere construir. CSS se construye por medio de reglas de estilos y que influyen sobre los archivos HTML que existen. Ejemplo, el siguiente código les da un color rojo a todos los párrafos:

```
p {
  color: red;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l2m99wgn3opzse769aa9.png)

* **JavaScript**: Es un lenguaje de programación que en los últimos años ha tenido un gran crecimiento, es usado por una gran comunidad y cada año es mantenido y recibiendo actualizaciones que le permite mejorar. Con JavaScript podemos darle interacción a nuestro sitio web. Hasta los momentos con puro HTML y CSS podemos crear un sitio estático, pero con JavaScript le damos el dinamismo que necesitamos que tenga nuestra web. JavaScript es un lenguaje que si o si debes aprender para ser todo un profesional. Además de él se desglosan una gran cantidad de herramientas para facilitar nuestro trabajo del día a día. Ejemplo, en el siguiente código renombra el texto del párrafo:

```
document.getElementByTagName("p").innerHTML = 'Este es un nuevo párrafo'
```

Aunque en teoría, con estas tecnologías logras crear una web, en la actualidad se requiere conocer de más herramientas para poder hacer este proceso más eficiente, optimizado y en menos tiempo. Te preguntarás ¿Cuáles son estas otras herramientas? en la siguiente semana hablaré sobre la ruta de aprendizaje que debes tomar para ser un desarrollador Frotend, no te lo pierdas.