💥ROADMAP FRONTEND 2022💥
A continuación, una ruta cronológica de tecnologías Javascript para aprender frontend y saber en que lugar estás y en que podrías seguir enfocándote en aprender.
⚠ Disclaimer:
Cuida tus soft skills.
Es una ruta subjetiva.
1️⃣ Aprende bases y fundamentos de diseño web. Usa codepen para practicar, aprende HTML y CSS y adquiere las bases. Para ser más productivo, usa frameworks CSS como Bootstrap o Tailwind.
2️⃣ Aprende fundamentos de programación (carrera de fondo) y luego Javascript y la terminal. VSCode es el editor más usado. Aprende git (control de versiones)
3️⃣ Aprende a usar GitHub y a desplegar en GitHub Pages. Usa npm/yarn (o pnpm) para gestionar las dependencias de tu proyecto y aprende lo básico para usar un empaquetador como Vite (o webpack).
4️⃣ Si sabes programar, intenta mejorar como escribes código y usa linters: ESLint (JS) y StyleLint (CSS). Aprende cosas avanzadas como clean code, patrones, buenas prácticas de Javascript y echa un ojo a Typescript.
5️⃣ Hacer tests de código es una forma ideal de tener confianza en él y que no se romperá con el tiempo. Aprende las bases de Jest y si usas Vite, echa un ojo a Vitest. Plataformas como Netlify, Vercel o Heroku te pueden ayudar a desplegar tu código. GitHub Action mola mucho.
6️⃣ "Vuelve a aprender HTML y CSS". Con lo que sabes ahora, lo verás de otra forma y aprenderás muchas cosas: A11y, SEO, optimización, formas de mantener CSS, etc. Aprende Sass (o PostCSS) para escalar mejor, y echa un vistazo a WebComponents.
7️⃣ ¡Elige tu framework JS starter! Los más populares son:
💚Vue 3 + Pinia. Framework progresivo.
💙React (con hooks) + Styled Components.
🧡Angular + Typescript
💛Svelte: Compilador.
8️⃣ Usa Testing Library para testear desde un enfoque más "humano" y con Storybook revisar nuestros componentes. Por otro lado, Cypress, Puppeteer o Playwright nos ayudan con tests E2E y Loki y BackstopJS con los tests de regresión visual.
9️⃣ Por último, SSG / SSR.
💙¿Eres React? Next.js
💚¿Eres Vue? Nuxt
🧡¿No te convencen? Astro
💛¿Quieres enfoque más puro? 11ty
¡Sígueme! #html #css #javascript #programacion #desarrollo #frontend #manzdev
