Si tu objetivo es aprender programación y te quieres centrar en el frontend, aquí tienes un roadmap o camino de aprendizaje para aprender Javascript desde sus bases hasta los frameworks más modernos:
- 1️⃣ Fundamentos
- 2️⃣ Estructuras
- 3️⃣ Programación orientada a objetos
- 4️⃣ Programación funcional
- 5️⃣ DOM y eventos
- 6️⃣ Módulos y paquetes
- 7️⃣ Asincronía
- 8️⃣ Calidad de código
- 9️⃣ Frameworks Javascript
- 🔟 Metaframeworks Javascript
En la parte inferior del roadmap, explicamos brevemente cada apartado.
1️⃣ Fundamentos
Como parece lógico, los fundamentos básicos se perciben como imprescindibles, y no se suelen obviar. Son muy importantes porque son necesarios para todo lo que viene después. Incluye temas como:
- Fundamentos de programación (desde un punto básico)
- ¿Qué es Javascript (desde un punto intermedio)
- ¿Qué son los tipos de datos? (y tocando temas más técnicos)
2️⃣ Estructuras
Las estructuras de datos son un tema muy importante de la programación, ya que son las estructuras donde se guarda la información. Preparar y planificar donde vas a guardar la información siempre es una excelente forma de prepararse para resolver un problema de la mejor forma posible. Paradójicamente, en estos temas no se suele profundizar mucho, y es de los temas que más refuerzan tus conocimientos.
3️⃣ OOP: Programación orientada a objetos
La programación orientada a objetos (abreviada como OOP o POO) es una forma de programar, que hoy en día -sobre todo en el frontend- se suele obviar en favor de la programacion funcional, la cuál es más directa y suele tener una curva de aprendizaje más simple. Por esta razón, muchos desarrolladores tienen un gran hueco en el desconocimiento de este paradigma de programación.
4️⃣ Programación funcional
La programación funcional es otra forma de programar que nos permite basarnos en la idea de que todo lo que hacemos se puede representar como una función. Es una forma muy cómoda de programar que ha tenido mucha aceptación en los últimos años en el entorno del frontend.
5️⃣ DOM y eventos
El DOM es la forma que tiene el navegador de controlar un documento HTML, sus etiquetas, atributos y contenidos y modificarlos desde Javascript. Es uno de los pilares fundamentales de una web, que conviene aprenderlo para tener una buena base, aunque los frameworks Javascript lo oculten con sus abstracciones.
Por otro lado, los eventos son una forma de enviar información o confirmación de ciertas acciones que suceden en una parte de la página, hasta otra parte diferente.
6️⃣ Módulos y paquetes
Los módulos son la forma oficial de crear código que se va a compartir entre diferentes partes de la aplicación. Esto ayuda a que sea mucho más fácil de gestionar nuestro código y reutilizarlo. Eso se une a gestores de paquetes como NPM o pnpm, y automatizadores como Vite.
- Módulos ECMAscript (forma de "empaquetar" partes de nuestro código)
- NPM (gestor de librerías o paquetes externos)
- pnpm (Alternativa más rápida y eficiente a npm)
- Vite (Automatizador Javascript)
7️⃣ Asincronía
La asincronía es la capacidad que tiene Javascript de ejecutar tareas sin bloquear la ejecución del resto de nuestro código, resultando en un lenguaje no bloqueante. Cuando empezamos a programar en Javascript solemos trabajar de forma síncrona, pero a medida que avanzamos, necesitamos trabajar de forma asíncrona, y los mecanismos de asincronía nos ayudan a entender estos temas.
8️⃣ Calidad de código
Una vez aprendes a programar y a controlar mejor el desarrollo de funcionalidades, empiezas a preocuparte por otros temas relacionados que también son muy importantes, como hacer tu código legible y mantenible, seguro frente a errores, etc. Esto se suele denominar calidad de código o crear código limpio.
9️⃣ Frameworks
Una vez tenemos las bases y fundamentos anteriores fuertes, nos toca saltar a un framework de Javascript, que nos permitirá ir más rápido. Es muy importante entender la problemática de que muchas personas comienzan a aprender en este punto, saltándose todo lo anterior para ahorrar tiempo o simplemente porque no se pide lo anterior en ofertas de trabajo. Realmente, lo que ocurre es que en ofertas de trabajo se asume que todo lo anterior ya se conoce y se domina, por lo que si empiezas desde este punto sin conocer lo anterior, te vas a atascar y frustrar.
En este punto, lo importante es decidir un ecosistema concreto y comenzar a aprenderlo y trabajar con él:
- React (De los más populares y con más demanda)
- VueJS (Muy flexible y con una curva de aprendizaje sencilla)
- WebComponents (Nativo, sólo para usuarios avanzados)
🔟 Metaframeworks
Una vez comprendemos todo lo anterior, existen ciertos metaframeworks (frameworks de frameworks) que nos permiten gestionar todo lo anterior de una forma más cómoda, fácil y rápida. Cada uno de ellos tiene una filosofía diferente, por lo que lo ideal es buscar uno que encaje con el framework que usas o es tu preferido.
