Un frontend developer, aquellos magos de internet que construyen interfaces, desarrollan la web, y que sin ellos nuestras vistas estarían a merced de los desarrolladores backend (no me puedo imaginar un mundo peor XD). Hablando en serio, un frontend necesita habilidad y conocer muchas herramientas que lo harán profesional en su área. Es totalmente posible llegar a ser muy habilidoso, pero requiere de bastante estudio, esfuerzo, constancia y práctica (mucha pero mucha práctica).

Hace tal vez unos 15 años, era solo necesario aprender HTML, CSS y JavaScript para construir una web. Hoy en día también lo puedes hacer, pero existen una gran cantidad de herramientas que facilitan muchos procesos, ahorras tiempos de desarrollo y nos hace más eficientes, además que las empresas esperaran que sepas usar muchas de ellas (hasta varios años de experiencia). Así que, si este 2021 esperas conseguir trabajo como desarrollador frontend debes aprender estas herramientas que te mencionaré a continuación.

Sin más que decir, vamos por nuestra ruta de aprendizaje:

Ruta de un Frontend

Esta ruta no es algo absoluto, esta basada en mi experiencia y en información recabada sobre frontends developers.

Para empezar, HTML, CSS y JavaScript son lo básico, es lo mínimo que necesitas saber y debes tener una base sólida.

• HTML: El lenguaje de marcado de hipertexto, se debe conocer la sintaxis, etiquetas, herramientas del navegador, estructura básica y etiquetas semánticas (cada etiqueta se usa para un propósito).

• CSS: Hojas de estilo en cascada, de esto aprende las reglas de estilos, selectores, modelo de caja, flexbox, grid, media querys.

• JavaScript: El lenguaje de programación de la web, conoce la sintaxis, tipos de datos, funciones, eventos, manejo del DOM, AJAX, Fetch, JSON y sobre todo aprender las últimas versiones desde ES6 (ECMAScript 6) que es básicamente las actualizaciones que cada año hay del lenguaje.

Esta es la base y es esencial que lo tengas claro. Una vez aprendido le agregamos un poco más de diversión.

• Responsive Design: Aprender a construir diseños que se adapten a la mayoría de las pantallas existentes hoy día (smartphones, tablets, laptops). Hoy día la tendencia es mobile first (construir primero el diseño móvil e ir subiendo hasta pantallas de escritorios).
• Herramientas de desarrollo: A medida desarrollamos y construimos código, surgen la necesidad de usar herramientas que nos facilitan la escritura del mismo, poder guardar y compartir código, entre otros:

1. Editores de código: Aquí escribirás tu código, existen diversos accesorios que te facilitarán la vida. Actualmente el más popular es Visual Studio Code (vscode), pero claro también existen muchos de acuerdo a lo que necesites (Atom, sublime Text, Vim).
2. Editor de imágenes: De vez en cuando necesitarás editar las resoluciones de las imágenes para optimizarlas, recortes, etc. Tenemos Photoshop, Gimp, pain.net.
3. Diseño: Esto es opcional, pero si necesita hacer algún diseño y elaborar maquetas antes de llevarlo al código, conocer una de las siguientes herramientas no te caerá mal: Adobe XD, Figma, Sketch.
4. Repositorio: Muchas veces necesitaremos almacenar nuestro código de forma remota, es decir en otro lugar por si a nuestra computadora le ocurre algo (y suele pasar mucho). Además también al trabajar en equipo necesitará compartir tu código con tus colaboradores. Estos repositorios son esenciales para todo programador: GitHub, GitLab, Bitbucket.
5. Terminal: El uso de la terminal de comandos te ayudará bastante cuando no quieras usar la interfaz gráfica del sistema operativo. Cosas esenciales como: Copiar, pegar, crear archivos, moverse entre carpetas, eliminar archivos, buscar archivos ayudan mucho y ahorran tiempo.
6. Git: Esto es 100% requerido en todas las empresas. Ellos no te lo van a preguntar, ellos van a suponer que tú ya sabes manejar Git. Y ¿Qué es Git?, es básicamente un software para controlar las versiones de tus proyectos y así evitar duplicar carpetas cuando no queremos perder versiones.
7. Sistema de gestión de paquetes: Normalmente en tus proyectos necesitarás tener código de otras personas que hacen una funcionalidad específica y que este 100% probado. Esto nos ahorra tiempo y evita que reinventemos la rueda. Un gestor de paquetes nos ayuda a instalar o desinstalar los paquetes que necesitemos. Los más comunes para JavaScript: NPM, Yarn.

Una vez aprendido esto podemos subir un poco la dificultad con nuevas herramientas:

• Preprocesadores: Estas herramientas nos ayudan a simplificar el código, optimizar la cantidad de código escrito y ahorrarnos tiempo de trabajo. Existen preprocesadores de HTML (Pug) y preprocesadores de CSS (Sass el más conocido, Stylus, Less).

• Librerías y frameworks: Este punto es bastante importante y fundamental. Hoy día existen librerías de código hasta frameworks que nos proporciona toda la estructura de un proyecto. Esto nos facilita el uso de buenas prácticas, nos ahorran tiempo en escritura de código y muchas otras funcionalidades. Además estas tecnologías son muy demandadas hoy día y definitivamente debes conocer al menos uno para poder aplicar a algún trabajo en frontend: Angular, React, Vue, Svelte. Cada uno tiene su particularidad, popularidad, público, pero todas cumplen la misma función. Con que domines uno tienes para aplicar a algún trabajo.

• Testing: Por último, pero no menos importante, el testing es una parte fundamental en todo proyecto. Para esto tenemos las siguientes herramientas: Jasmine, Jest, Mocha, entre otros.

Como dije al inicio esto puede variar y es mi opinión. Aquí seguramente faltan temas por aprender, pero si sabes esto, en general te irá bien y conseguirás trabajo.

¿Qué más le agregarías? ¿Te gusta está ruta? Déjame saber tu opinión en los comentarios.