A nadie le importa tu modelo o arquitectura de IA si tu interfaz de usuario es fea.
Introducción
Cuando decimos "Soy ingeniero de IA/ML", generalmente significa que somos ingenieros backend que trabajamos con modelos de IA. Sí, ese es nuestro rol en el sistema de aplicación real. Seamos honestos: a la mayoría de los ingenieros de IA no les gusta el desarrollo frontend, y yo solía ser uno de ellos. Durante cuatro años de mi trayectoria como programador, me centré únicamente en IA y aprendizaje automático. Me sentí gratificante, pero después de conseguir un trabajo y adquirir experiencia en un área, vi el valor de explorar también otras habilidades tecnológicas. Para los ingenieros de IA (o ingenieros de ML; los términos suelen ser los mismos), aprender desarrollo frontend puede ser realmente valioso. En este artículo, te mostraré cómo aprender desarrollo frontend desde la perspectiva de un aficionado a Python y un ingeniero de IA que piensa que el frontend es bastante simple.
¿Por qué Next JS?
Streamlit puede parecer un proyecto de juguete para prototipos rápidos, pero si te tomas en serio la creación de aplicaciones de interfaz de usuario (UI) de calidad y excepcionales, es hora de aprender un framework de UI práctico como Next.js. Entonces, ¿por qué Next.js es el mejor framework del mercado? Es especial porque aprovecha la potencia de React.js, una biblioteca popular para crear interfaces de usuario dinámicas, y la potencia con funciones como renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y un sistema de enrutamiento integrado, todo listo para usar.
A diferencia de React.js, que es solo una biblioteca enfocada en la capa de vista, Next.js es un marco completo que simplifica el desarrollo al manejar optimizaciones, SEO y rendimiento sin necesidad de unir innumerables herramientas de terceros.
Quizás te preguntes: si React.js existe, ¿por qué molestarse con Next.js? La respuesta es simple: React.js te ofrece un lienzo en blanco, pero Next.js te ofrece una obra maestra estructurada, que te ahorra tiempo y esfuerzo, a la vez que te permite crear aplicaciones más rápidas y escalables. Es la diferencia entre ensamblar un auto desde cero y conducir uno nuevo, optimizado para velocidad y confiabilidad. Por eso, Next.js se destaca como la opción predilecta para los desarrolladores modernos.
¿Por dónde empezar?
¡Sé que la mayoría de los desarrolladores de IA odian trabajar en el frontend! Podemos entender fácilmente aspectos complejos como la arquitectura de los transformadores —algunos incluso podemos crearla desde cero—, pero seguimos pensando que HTML y CSS son las partes más difíciles y aburridas (sobre todo CSS). Admito que, incluso ahora, no disfruto aprendiendo propiedades CSS. Pero gracias a herramientas como ChatGPT, Claude y otras, escribir scripts CSS se ha vuelto mucho más fácil.
Hoy en día, no es necesario aprenderlo todo de principio a fin. Basta con tener una idea básica de cómo funciona una aplicación. Dedica de 3 a 4 horas este fin de semana a ver un vídeo sencillo. HTML y CSS pueden resultar aburridos al principio, pero una vez que empieces a aprender un lenguaje como JavaScript (JS), te encantará trabajar con él. No se parece en nada a un script de Python: ¡es emocionante y divertido!
¿Sabes qué tienen en común los desarrolladores de JavaScript y Python? Ambos odian Java.
Aprender JavaScript es una de las mejores inversiones que puedes hacer ahora mismo: ¡es como invertir en oro! Internet funciona con JavaScript. Puedes leer un documento sencillo para aprender sobre la sintaxis de JavaScript y todo lo que quieras saber. Creo que usar herramientas de IA es una mejor manera de aprender cualquier lenguaje que pasar horas viendo vídeos de YouTube o leyendo documentación extensa.
Así que, después de pasar dos fines de semana aprendiendo HTML, CSS y JS, es hora de sumergirse en la mejor biblioteca de JS disponible: ¡React.js! React.js es donde realmente deberías centrar tus esfuerzos de aprendizaje. Para empezar con React.js. Intenta crear dos o tres proyectos pequeños que abarquen desde conceptos básicos hasta avanzados en React.js. Tu objetivo es simple: entender cómo funcionan las cosas y cómo conectar los puntos para crear una aplicación de IA completa. Una vez que completes este paso, ¡es hora de pasar a Next.js!
Próximo ecosistema JS
Después de aprender JavaScript, dedica un día o menos a TypeScript (TS), un superconjunto de JS con tipado adicional. Domina sus conceptos básicos, como tipos e interfaces, en pocas horas. Después, explora Tailwind CSS, un framework orientado a la utilidad para un estilo eficiente, y prueba ShadCN UI para componentes de interfaz de usuario personalizables desarrollados con Tailwind. Esto te dará un inicio rápido y sólido en TS y herramientas frontend modernas.
- TypeScript
- TailwindCSS
- Shadcn/UI
No necesitas dominarlo todo; solo intenta comprender qué son TypeScript, Tailwind CSS y ShadCN UI y cómo funcionan. Tu objetivo es integrarlos con Next.js.
¡Ahora es momento de sumergirnos en Next.js, un potente framework!, explorar sus funciones, como el enrutamiento basado en aplicaciones, y aprender la diferencia entre páginas y diseños. Esto te dará una idea clara de Next.js y sus bibliotecas relacionadas.
La verdadera diversión comienza aquí: ¡aproveche la IA para gestionar la codificación y la depuración con indicaciones, lo que le ahorrará horas de esfuerzo!
Magia de V0
Vercel lanzó recientemente v0, un revolucionario motor de interfaz de usuario que genera interfaces de usuario con Next.js, basándose en simples indicaciones. Esta herramienta es revolucionaria y ahorra a los desarrolladores incontables horas al eliminar la necesidad de crear proyectos desde cero. Incluso con la versión gratuita, los usuarios obtienen una generosa cantidad de solicitudes de indicaciones, suficientes para crear estructuras básicas, secciones, páginas y barras de navegación adaptables. v0 genera archivos TypeScript (.tsx) que utilizan ShadCN y Tailwind CSS, lo que permite a los desarrolladores centrarse en comprender la funcionalidad en lugar de lidiar con la sintaxis. Una vez que el proyecto esté listo, puede clonarlo localmente fácilmente con un solo comando npm; puede encontrar más información a través del modo de búsqueda de ChatGPT o en la documentación oficial de Vercel.
Más en Next JS
Next.js ofrece una impresionante gama de funcionalidades, mucho más allá de las que inicialmente exploté. Hasta ahora, solo lo he usado para crear una landing page empresarial, pero ahora estoy profundizando en su potencial para desarrollar aplicaciones o plataformas basadas en IA. Mi objetivo es integrar mi backend FastAPI, que potencia las funcionalidades de IA, con un frontend de Next.js para crear una interfaz de usuario fluida. Next.js incluso incluye herramientas como NextAuth.js para la autenticación, lo que lo convierte en una opción versátil para el desarrollo integral. A medida que exploro estas capacidades, me entusiasma ver cómo Next.js puede conectar mi backend de IA con un frontend dinámico e intuitivo.
Si usas Figma, simplemente carga tu archivo de Figma en la plataforma v0 de Vercel y esta generará una interfaz de usuario automáticamente. Esta integración agiliza el proceso, convirtiendo tus diseños en interfaces funcionales con el mínimo esfuerzo.
Reflexiones finales
Como ingeniero de IA especializado en el entrenamiento de modelos de aprendizaje automático y la creación de aplicaciones multiagente, he llegado a apreciar el valor de una interfaz de usuario limpia y funcional. Más allá de mis propios proyectos, me he dado cuenta de que puedo apoyar a pequeñas empresas creando páginas de destino optimizadas para SEO para impulsar su crecimiento online. Si bien la IA y el aprendizaje automático siguen siendo mis principales pasiones, Next.js se ha convertido en una poderosa habilidad secundaria. Ya no dedico horas a programar desde cero, sino que aprovecho las herramientas de IA existentes para generar sitios web en cuestión de minutos. En el mundo de la IA, nada parece inalcanzable; todo se reduce a tu interés y compromiso. ¿Mi consejo? No te limites a una sola pila tecnológica; aprovecha la flexibilidad de explorar y adaptarte.
Explora nuevas tecnologías y recuerda: Concéntrese en comprender el flujo de trabajo e identificar dónde es necesario, no en memorizar la sintaxis.
Fuente: traducido al español y tomado de Medium.com en inglés ->
https://medium.com/gitconnected/every-ai-engineer-should-learn-next-js-554f634a5f47
Escrito por:
Karan Shingde