Por lo general, se dividen en un frontend y un backend separados. El frontend maneja lo que ve el usuario, mientras que el backend maneja toda la lógica y el procesamiento. Esta es una separación natural de preocupaciones que la mayoría de las plataformas simplemente utilizan porque funciona bien.
Sin embargo, cuando realiza cambios en su aplicación, a menudo necesita realizar cambios tanto en el frontend como en el backend. Aquí es donde entran los ingenieros full-stack: ingenieros que trabajan tanto con el frontend como con el backend.
Sin embargo, trabajar tanto con el frontend como con el backend puede ser un desafío debido a múltiples razones:
A menudo están escritos en diferentes lenguajes: frontend con TypeScript y backend con Python. Tienes que lidiar con permisos y autenticación, y lidiar con desafíos como errores CORS. Están en diferentes repositorios y se implementan por separado.
Con el lanzamiento de agentes de codificación, trabajar con código frontend y backend al mismo tiempo se ha vuelto más sencillo. En este artículo, le brindaré una descripción general de alto nivel de cómo trabajo diariamente con el código frontend y backend, y me aseguraré de que los dos sistemas se integren a la perfección.
¿Por qué trabajar tanto con frontend como con backend?
La razón por la que trabaja con código frontend y backend al mismo tiempo es simplemente por necesidad. Supongamos que desea agregar una nueva función en su aplicación, donde un usuario puede almacenar sus conversaciones de chatbot de IA y acceder a ellas más tarde.
Esta característica simplemente requiere cambios tanto en el frontend como en el backend. Debe actualizar la interfaz para mostrar las conversaciones anteriores y necesita el backend para manejar el almacenamiento y la recuperación de las conversaciones. Por lo tanto, no tiene la opción de trabajar con el código del frontend y del backend.
Además, como ingeniero, suele ser más eficaz trabajar tanto con el frontend como con el backend. Imagínese si tuviera que implementar la función de conversaciones del chatbot de IA y solo estuviera trabajando en la interfaz. Luego tendría que implementar la parte frontal del curso y luego coordinar con otro ingeniero de backend cómo almacenar las conversaciones. Tendrías que dedicar tiempo a discutir:
El esquema para almacenar conversaciones ¿Qué datos deben incluirse? ¿Cómo debería llamarse el punto final?
Esto lleva mucho tiempo. Si alguna vez ha trabajado en un entorno de ingeniería de software procesional, sabe cuánto tiempo lleva.
En cambio, si haces el trabajo solo, no tendrás que hacer ninguna coordinación y podrás moverte a una velocidad mucho mayor.
Técnicas para trabajar eficazmente con código frontend y backend
En esta sección, cubriré algunas técnicas que utilizo para trabajar de manera efectiva con código tanto de frontend como de backend. Con el lanzamiento de un agente de codificación súper efectivo, esto se ha vuelto mucho más simple y no es necesario tener una amplia experiencia tanto en el código frontend como en el backend para ser efectivo.
Usar espacios de trabajo
Los espacios de trabajo son una característica increíblemente poderosa cuando se trabaja en múltiples repositorios. Puede hacer esto con Cursor usando “Agregar espacio de trabajo” o con cualquier herramienta CLI simplemente apuntando el agente a los repositorios con los que desea trabajar. Ahora el modelo tendrá el contexto de ambos repositorios relevantes y así podrá implementar una solución completa de una sola vez.
Los espacios de trabajo son increíbles. Antes de descubrirlo, solía trabajar con dos pestañas de cursor separadas, una con el código de interfaz y otra con el código de fondo. Luego haría un cambio en la interfaz y actualizaría manualmente el backend para aceptar este nuevo cambio.
No es de extrañar que me haya llevado años publicar las funciones. Ahora, simplemente le solicito a mi agente que actualice el frontend de acuerdo con algunas instrucciones, y automáticamente actualiza el backend con el código correspondiente para aceptar los cambios del frontend. Por supuesto, esto también funciona al revés.
Monorepos
Los monorepos también son superpoderosos. Lo opuesto a un monorepo es tener todo el código distribuido en diferentes repositorios (generalmente denominados microservicios). En mi experiencia, esto no funciona muy bien, ya que simplemente hace que sea más difícil para usted y sus agentes de codificación realizar un seguimiento de dónde está todo.
En su lugar, recomiendo mover todo a un monorepo, donde tiene todo su código en una base de código. Ahora puede crear fácilmente reglas, como enlaces de confirmación previa, que se aplican a todo su código y no es necesario replicarlos en varios repositorios. Además, puede tener fácilmente archivos AGENTS.md que cubran y expliquen todo el repositorio, para que los agentes puedan realizar un seguimiento de dónde está todo fácilmente.
Si todo su código está en un monorepo, tampoco necesitará espacios de trabajo, como lo describí en la última sección. Sin embargo, es bastante común tener un monorepo para el código frontend/API y luego un repositorio separado que maneja procesamiento más complejo, como ejecutar agentes o procesar documentos. Por lo tanto, a menudo tendrás que utilizar espacios de trabajo de todos modos.
AGENTES.md como contexto
Otro consejo muy importante es utilizar y actualizar activamente AGENTS.md. Existen muchas alternativas a AGENTS.MD, como CLAUDE.md, WARP.md o .cursorrules. Sin embargo, según mi experiencia, todos los agentes de codificación leen AGENTS.MD, sin importar cuál utilice.
Por lo tanto, recomiendo usar AGENTS.md porque si alguna vez cambia de agente en el futuro, o si sus compañeros de trabajo usan agentes diferentes, todos pueden beneficiarse por igual.
Puede tener un archivo AGENTS.md en la raíz de su repositorio que proporciona una descripción general de alto nivel del repositorio, algo así como un README. Esto puede explicarle al agente qué carpetas contienen qué lógica, lo que le facilita la navegación por el código.
Además, también puede tener AGENT.md en todas las subcarpetas. Por ejemplo, si tiene un servicio en una carpeta, podría tener un archivo AGENTS.md allí que explique cómo funciona el servicio o cualquier peculiaridad que deba tener en cuenta.
También quiero agregar que siempre que realice cambios en su código, asegúrese de actualizar AGENTS.md. Puede, por ejemplo, pedirle a su agente de codificación que actualice los archivos AGENTS.md relevantes por usted, teniendo en cuenta lo que aprendió en su última sesión, y automáticamente agregará notas importantes. Por supuesto, asegúrese de implementar estos cambios también en GitHub, para que sus colegas puedan beneficiarse del conocimiento que ha adquirido.
Conclusión
En este artículo, analicé cómo trabajar eficazmente con código tanto de frontend como de backend. Comencé explicando por qué es importante saber cómo trabajar tanto con el frontend como con el backend, destacando que suele ser una forma más efectiva de hacer las cosas. Además, expuse algunas técnicas que utilizo para trabajar eficazmente con frontend y backend, cubriendo el uso de Workspaces, monorepos y AGENTS.md. Creo que en el futuro todos seremos ingenieros completos, considerando lo efectivos que son los agentes de codificación. El trabajo de un ingeniero humano será simplemente coordinar a todos sus agentes de la manera más efectiva posible, para poder resolver los problemas más importantes, de la mejor y más eficiente manera.
👉 Mi libro electrónico y seminario web gratuitos:
🚀 10 veces su ingeniería con LLM (curso gratuito por correo electrónico de 3 días)
📚 Obtenga mi libro electrónico gratuito sobre Modelos de lenguaje de visión
💻 Mi seminario web sobre modelos de lenguaje de visión
👉 Encuéntrame en las redes sociales:
💌 Subpila
🐦X/Twitter