Windsurf: descubrimientos y transformaciones

Cómo un IDE me hizo repensar mi relación con las IA

Walter Gandarella • 18 de diciembre de 2024

¿Conoces ese momento mágico en el que descubres una herramienta que cambia completamente tu forma de trabajar? Eso fue exactamente lo que me ocurrió (y al equipo también) al conocer Windsurf, la más reciente creación de Codeium que está revolucionando la forma en que desarrollamos software.

Confieso que siempre he sido uno de esos desarrolladores un poco escépticos con esta historia de "dejar que la IA haga todo". Usábamos ChatGPT y Claude.ai directamente, pero siempre como socios para mejorar código ya existente, resolver errores o aprender algún concepto nuevo. La idea de simplemente lanzar un prompt y pedir "crea una app para mí" me causaba un cosquilleo en la conciencia de programador. Como si estuviera haciendo trampa en el juego, ¿saben? Pero luego, como todo buen terco que eventualmente aprende una lección, me di cuenta de que estaba perdiendo una oportunidad increíble de elevar mi trabajo a otro nivel. Y fue ahí cuando Windsurf entró en juego.

Voy a compartir con ustedes nuestra experiencia con esta increíble herramienta que ha hecho que nuestros días de codificación sean mucho más productivos y, sinceramente, más divertidos.

¿Qué es esto de Windsurf?

Windsurf es mucho más que solo otro editor de código. Representa una evolución significativa en el concepto de IDEs con inteligencia artificial integrada. Es prácticamente tener un asistente que no solo completa tu código, sino que comprende profundamente el contexto de tu proyecto y colabora contigo de manera casi telepática.

Codeium ha creado aquí algo verdaderamente especial. Windsurf se construye sobre una base sólida (sí, es un fork de VS Code, pero no se dejen engañar - va mucho más allá de eso) e introduce un concepto revolucionario llamado "AI Flows". Esto hace que el IDE esté en sincronía con tu proceso de desarrollo, anticipando tus necesidades y ofreciendo soluciones incluso antes de que te des cuenta de que las necesitas.

Primeros pasos: Instalar y configurar

Comencemos por lo básico. La instalación de Windsurf es sorprendentemente simple. Puedes descargarlo directamente desde el sitio de Codeium y la configuración inicial es prácticamente autoexplicativa. Lo interesante es que si ya usas VS Code, incluso puedes importar tus configuraciones actuales y continuar en tu zona de confort.

Descarga de Windsurf

Para instalar:

  1. Accede al sitio oficial de Codeium
  2. Descarga la versión para tu sistema operativo
  3. Ejecuta el instalador
  4. En la primera ejecución, serás guiado por un proceso de onboarding super tranquilo

Un consejo de oro: durante la configuración inicial, presta especial atención a las opciones de tema y a los atajos de teclado. Windsurf ofrece tanto bindings por defecto de VS Code como de Vim, así que elige el que mejor se adapte a tu estilo. Opté por instalar una extensión de VS Code (sí, soporta la mayoría de ellas) para implementar los atajos de teclado de WebStorm.

El diferencial de Cascade: Tu nuevo mejor amigo

La estrella del espectáculo aquí es definitivamente el Cascade, que es como si fuera una evolución turboalimentada del chat que encuentras en otros IDEs con IA. La diferencia es que Cascade realmente entiende lo que está sucediendo en tu proyecto.

Déjame contar mi experiencia práctica: estaba trabajando en un proyecto con varias dependencias y APIs diferentes. Normalmente, sería un dolor de cabeza configurar todo. ¡Cascade no solo me ayudó a identificar las dependencias necesarias, sino que también sugirió y ejecutó los comandos de instalación automáticamente!

Lo más impresionante es cómo mantiene el contexto de las conversaciones. No es necesario explicar todo de nuevo en cada interacción. Recuerda las decisiones anteriores y va construyendo un entendimiento cada vez más profundo de tu proyecto.

Selección de modelo

Y hay aún más, si tienes una cuenta premium de Codeium, ¡las cosas se vuelven más interesantes! Además de Cascade, puedes optar por trabajar con Claude 3.5 Sonnet de Anthropic o con GPT-4 de OpenAI. Tienes un equipo de expertos a tu disposición, cada uno con su propio estilo de resolver problemas. Me gusta particularmente hacer un "test drive" con diferentes modelos según el tipo de tarea: a veces Claude da esa respuesta más detallada que necesitas, otras veces GPT-4 viene con una solución más creativa que ni siquiera habías imaginado.

Recursos que hacen la diferencia

En el día a día, algunas funcionalidades de Windsurf destacan absurdamente:

El SuperComplete es una funcionalidad que va más allá del autocompletado tradicional. No solo sugiere el siguiente fragmento de código, sino que comprende la intención detrás de lo que estás haciendo. ¡Prácticamente lee tu mente!

La integración con terminal es otro punto alto. Windsurf puede detectar cuándo necesitas ejecutar comandos específicos e incluso sugerir correcciones cuando algo sale mal. ¡Se acabaron esos momentos de andar buscando en Google mensajes de error! Integración con terminal

Y también está el sistema de créditos. En la versión gratuita, ya tienes acceso a funcionalidades increíbles, pero los planes de pago (Pro y Pro Ultimate) desbloquean aún más posibilidades. La idea es que puedes comenzar con el plan gratuito e ir evolucionando según tu necesidad.

Enfrentar el temido código legado (¡y sobrevivir para contar la historia!)

¿Alguna vez has tenido la sensación de abrir un proyecto antiguo y sentir ese frío en el estómago? Así es, todo desarrollador ha pasado por eso. Cuando empecé a utilizar Windsurf, confieso que estaba escéptico sobre cómo se comportaría con nuestros proyectos más... digamos... "experimentados". Pensaba que sería genial solo para proyectos nuevos, creados desde cero, todos bonitos y organizados. ¡Pero mira, qué buena sorpresa tuve!

Como el día en que abrimos un gran proyecto legado, de esos que miras y piensas "Dios mío, ¿por qué hicimos esto?". Era un monstruo con código repetido, variables con nombres misteriosos y una arquitectura que parecía más un plato de espaguetis. ¿Sabes lo que hizo Windsurf? No solo comprendió toda esa confusión, ¡sino que además nos ayudó a navegar por ella!

El Cascade, principalmente, nos dejó boquiabiertos. No solo logró entender la lógica detrás del caos, sino que también comenzó a sugerir mejoras de una manera respetuosa para el código existente. Es como si dijera: "Mira, sé que esto está un poco desordenado, pero vamos a resolver un problema a la vez, ¿vale?".

Una cosa que nos impresionó mucho fue la forma en que pudo mantener la coherencia con el estilo del proyecto original (incluso cuando ese estilo no era gran cosa). Cuando necesitábamos añadir nuevas funcionalidades, el Cascade sugería código que parecía haber sido escrito por el mismo equipo, solo que más organizado y con buenas prácticas sutilmente incorporadas.

¿Y las refactorizaciones? Un día, le pedimos que echara un vistazo a un módulo particularmente problemático. No solo identificó los problemas, sino que sugirió una serie de mejoras graduales que podían implementarse sin romper nada. Ahora teníamos un consultor senior sentado a nuestro lado, pero este consultor tiene una paciencia infinita y no cobra tan caro.

Y para colmo, nos ayudó a documentar algunas partes oscuras del código. A veces, solo al explicarle lo que intentaba entender, ya venía con ideas como: "Ah, parece que este fragmento está haciendo X por causa de Y, y podría mejorarse así...". Sin ese juicio que solemos recibir cuando pedimos ayuda a otros desarrolladores.

Ejemplo práctico: Creación de una Lista ToDo

¡Vamos a ponernos manos a la obra! No hay mejor manera de comprender el poder de Windsurf que creando un proyecto real. Vamos a mostrar cómo crear una aplicación de Lista de Tareas utilizando el Cascade.

Nuestra App ToDo List

El primer paso es abrir el Cascade (CTRL+L o haciendo clic en el ícono) e iniciar una conversación natural:

"Quiero crear una aplicación de Lista de Tareas utilizando Javascript puro, HTML y CSS que guarde los datos localmente."

Prompt en Cascade

Es entonces cuando el Cascade comienza a trabajar. No solo genera el código, sino que explica cada decisión y permite hacer ajustes en el camino. Crea la estructura del proyecto, sugiere buenas prácticas e implementa funcionalidades extra que tienen sentido para una Lista de Tareas.

Por ejemplo, cuando mencionamos que queríamos agregar animaciones para las acciones de completar y eliminar tareas, el Cascade no solo implementó las animaciones, sino que sugirió mejoras en la experiencia del usuario que ni siquiera había pensado.

Agregar animaciones

Puedes descargar el código de este ejemplo y probarlo localmente haciendo clic aquí.

El impacto en la productividad

Después de algunas semanas utilizando Windsurf, notamos (yo particularmente) un buen cambio en la productividad. Tareas que antes tomaban horas, ahora se resuelven en minutos. Pero no se trata solo de velocidad, también se trata de calidad.

Windsurf nos ayuda a mantener un código más limpio y consistente. Sus sugerencias están basadas en buenas prácticas de programación, y el feedback en tiempo real sobre posibles problemas nos ayuda a evitar errores antes de que ocurran.

Otro aspecto interesante es la forma en que nos ayuda a aprender. Al explicar sus sugerencias y decisiones, Windsurf termina funcionando como un mentor, presentándome nuevos patrones y técnicas que podemos aplicar en proyectos futuros.

El futuro del desarrollo de software se está moldeando claramente en torno a herramientas como Windsurf. La combinación de un IDE poderoso con inteligencia artificial ya no es solo una conveniencia, se está convirtiendo en una necesidad para mantenerse competitivo y eficiente en el desarrollo moderno. Si aún no has probado el Windsurf, te recomiendo encarecidamente que le des una oportunidad. Comienza con la versión gratuita y ve por ti mismo cómo puede transformar tu forma de programar. Como dije al principio, fui el último (de mi equipo) en adoptarlo, aquí en Yes Marketing prácticamente toda la gente ya utilizaba esta herramienta en su flujo de trabajo, ¿realmente quieres quedarte atrás?


Últimos artículos relacionados