Frontend developer: ¿Sólo debe maquetar?
Tags: frontend, beginners, webdev, spanish
Published: 2022-07-18 13:34:27

¡Hola! En este post quiero hablar sobre la pregunta **¿un frontend developer, sólo debe maquetar?** y mi opinión sobre ella.

Antes de responder la pregunta, veamos algo de historia y de dónde surge esta duda. Hasta hace unos años, cuando el 99.99% de los sitios webs estaban construidos en PHP, el desarrollador tenía un perfil más fullstack (tema que veremos en otro post). Generalmente se construían web apps monolíticas donde PHP se usaba como generador de plantillas. Entonces, en ese contexto, o eras un desarrollador que hacía la maqueta y la lógica, o solo te encargabas del HTML y CSS, y el backend developer se encarga de desmenuzar ese código y ponerlo en las vistas de la aplicación.

Pero hoy, en la mayoría de los casos y para alegría de muchos, la cosa es diferente. ¿Un frontend developer debe maquetar? ¡Por supuesto! Debe sentirse extremadamente cómodo con HTML y CSS, pero desde mi punto de vista, eso es solo la base. Veamos algunas tecnologías y responsabilidades que entiendo que un frontend developer hoy en día debe dominar:

## HTML
Lucho, ¿me estas tomando el pelo no? Pues no, HTML es un lenguaje sencillo de aprender pero que tiene muchos detalles, y no todos los conocen y dominan el arte de usarlos correctamente. Cuando digo "usarlo correctamente" me refiero desde definir el lenguaje de la página hasta evitar cosas como la divitis (divitis: dícese del uso indiscriminado del tag HTML `<div>`)y escribir HTML semánticamente correcto.

## CSS
Parece una obviedad que CSS esté en esta lista, pero como dije más arriba, junto con HTML son las bases de un frontend developer. Debes sentirte cómodo usando media-queries, flex-box y grid.

## JavaScript
Ahora sí se va poniendo interesante. Cuando digo JavaScript no me refiero a algún framework de moda como React, Angular, Vue, etc, me refiero a entender cómo funciona el lenguaje, entender _the good parts_ y _the tough parts_.

No me mal interpretes, no estoy diciendo que no sea importante saber React, lo que digo es que tal vez en unos años estemos hablando de React como hoy lo hacemos de jQuery, y ¿qué tienen en común esas dos tecnologías? JavaScript.

Hoy JavaScript no solo se usa en la web, tiene muchos usos y ¡cada vez son más! Por lo que recomiendo que entiendas cómo funciona este lenguaje. Para esto a continuación dejo dos recursos que a mi me ayudaron bastante a lograr eso:

- [33 Concepts Every JavaScript Developer Should Know](https://github.com/leonardomso/33-js-concepts)
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md)

## SEO

¿Por qué necesitas saber de SEO (del inglés Search Engine Optimization)? Porque en el 99% de los casos vas a querer que la web que estas construyendo sea visitada por la mayor cantidad de usuarios posibles.

Probablemente hayas entrado en discusiones eternas con equipos de marketing sobre SEO o algún cliente te haya dicho algo como "quiero que mi web aparezca primero en Google", y lograr que un sitio web se encuentre entre los primeros puestos de los resultados de búsquedas depende de muchos factores y de un gran y largo trabajo en equipo.

En este post no entraremos en detalle sobre todos los aspectos del SEO, pero es importante que conozcan los aspectos básicos del mismo y las buenas prácticas que contribuyen a un buen SEO. Comparto una [guía de MOZ](https://moz.com/beginners-guide-to-seo) para ayudarles con esto.

Y en el caso de que luego quieras dar un salto más profundo sobre este tema, te recomiendo leer sobre [datos estructurados](https://schema.org/).

## Performance
A mí me gusta usar la frase "cuando navego un sitio web, me gusta sentir el viento en la cara" haciendo alusión a que el sitio web debe andar muy rápido. Pero la performance no es solo hacer que los sitios webs sean rápidos, sino también consiste en hacer que los procesos lentos parezcan rápidos.

Probablemente pienses que tu sitio web anda muy rápido, y tal vez así sea, pero debes entender que siempre hay margen para mejorar, la performance es algo con lo que debes estar comprometido a largo plazo. Para esto hay un muchas cosas que se deben optimizar, como imágenes, videos, fonts, renderizado, request y largo etc. A continuación dejo dos guías, con contenido de excelente calidad, que van desde conceptos básicos (cómo funciona internet) a detalles súper minúsculos pero súper importantes.

- [Web performance - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Performance)
- [Fast load times - web.dev](https://web.dev/fast/)

## Accesibilidad

La accesibilidad no debe entenderse como una feature de tu sitio web, sino como algo integral del mismo.

Te invito a que mires mi post [Accesibilidad: breve introducción hacia una web inclusiva](https://dev.to/luchopenafiel/accesibilidad-breve-introduccion-hacia-una-web-inclusiva-3eb3) en el cual introduzco los conceptos básicos y dejo recursos para profundizar más sobre el tema.

## Nice to have
De mas está decir que todo lo que puedas aprender siempre es bienvenido, pero para ir terminando este post dejo una lista con otros temas que al dominarlos harán que des un salto de calidad como frontend developer:

- Unit testing
- Docker
- CI/CD

## Mejora cada día
Estudiar y dominar los temas mencionados anteriormente es un camino largo y puede llevar tiempo, mi intención no es agobiar, sino darles una guía con los temas y herramientas que a mí me hubiera gustado tener cuando entré en este mundo.

Y como último consejo que puedo darte es que seas curiosa/o, investiga, lee y aprende algo nuevo cada día. Como reza la famosa frase, nuca pares de aprender.

Eso es todo por ahora, nos vemos pronto 👋🏻.