El camino a ser un Full Stack Developer

El mundo del desarrollo web ha crecido y ahora requiere de nuevas especializaciones: Frontends, Backends, Wide Receivers, DevOps, ShortstOps, etc. y estoy seguro que si trabajan en la industria web tienen alguna de estas responsabilidades. Como developer serio uno no debe quedarse encasillado y es buena práctica buscar habilidades fuera de nuestra especialización y entender un poco sobre el proceso como parte de la mejora continua en nuestro trabajo y la manera en la que nos relacionamos con el resto del equipo. La habilidad de hoy: el concepto del developer Full Stack!

¿Qué es un developer Full Stack?

Se que el termino suena imponente, pero en realidad es fácil si lo tomamos parte por parte: primero veamos que significa “Full Stack”: Full es la palabra en inglés para lleno, y Stack significa pila, pero ojo, no se refiere una pila AA o LiPo. ¡Eso sería ridículo! Cuando hablamos de pila en el contexto full stack nos referimos a un tipo de estructura de datos abstracta también conocido como LIFO (Last In, First Out)

Foto de algo que sería ridículo en este contexto por Rob Nunn.
“¡Eso sería ridículo!”

Creo que para este punto ya saben a donde va esto, pero por si aún no han hecho el salto: ¡un developer Full Stack es un developer que trabaja enteramente con pilas! ¿Por Qué? El hecho de que sea una estructura de datos abstracta, significa que lo puedes usar en todos lados sin preocuparte por las dependencias. Por ejemplo, react solo sirve en el navegador, node solo en la línea de comandos y jQuery no funciona en ningún lado. En cambio si sustituyes todo por stacks, el mismo código que escribas en el front puede funcionar en el back o en tus recetas de aprovisionamiento para tus servers.

¿Cómo me convierto en un developer Full Stack?

Ahora que sabemos lo que es un developer full stack, debemos estudiar las pilas o “Montones”: En una pila, lo último que entra es lo primero que sale, y si eres un buen developer full stack puedes ser el último en entrar al trabajo y el primero en salir gracias a todo el tiempo que te ahorrarás ;).

Imagina que tienes una página web que debe reaccionar a cambios de datos en un modelo de la base de datos para mostrar siempre en vivo el último snapshot y mandar los cambios hechos en su cliente a los demás (fig 1.). Este es un caso muy común para sitios modernos complejos como sitios de marketing estáticos y es un ejemplo sencillo para empezar a entender los conceptos.

fig 1. La comunicación que debemos tener en vivo entre el navegador y la base de datos.

Si tomas un paso atrás al concepto abstracto de lo que queremos hacer, cada vez que hay cambios tienes datos que debes poner en “un montón”, y si analizas en que es lo primero que debe ver el usuario, es evidente que hay que meter eso al final de la pila (Recuerda, las pilas son LiFo). En este caso, siendo un ejemplo sencillo, podemos tener una sola pila de datos (en el caso de una aplicación compleja tendríamos una pila distinta por cada “montón” de datos y habría una pila coordinadora de pilas, pero ese ya es un tema avanzado). Cuando alguien mete datos a la pila, los saca el renderer y así infinitamente. ¡pan comido!. Si transmites la pila por internet puedes mantener todas las pilas sincronizadas garantizando que todos tus usuarios ven lo mismo. ¡Listo! Te acabas de ahorrar tener que instalar angular, react, rails, express, koa, go, gulp, npm, chrome y underscore! (Por cierto, si no entiendes como cambiamos todo esto por una pila, tal vez debas volver al link provisto arriba y estudiar un poco más sobre como funcionan las estructuras LIFO, esto debería ser obvio después de unos minutos de leerlo)

fig b. La misma aplicación ahora diseñada con pilas incluyendo la capa opcional de peristencia (solo si quieres que tu aplicación sea persistente)

Recuerda que esto debe estar en el cliente y en el servidor. Pero como la pila es abstracta la puedes correr en los dos lados, efectivamente cortando la cantidad de código que debes escribir en dos (¡Lifehack!). No deberías tener bugs en este punto: un verdadero developer full stack NO tiene bugs, porque solo son pilas. Los bugs son introducidos por dependencias (por eso hay que tener dependencias de tipo opuesto para cancelarlas), el tener todo en pilas evita que puedan entrar bugs. Esto se conoce como el principio “open-closed” (como en cerrado contra bugs) y es una parte muy importante de la arquitectura de sistemas.

Deployment y aprovisionamiento

Bueno, ahora tenemos una aplicación funcional y libre de bugs y tenemos que subir esto a la nube de alguna forma. Lo que tienes que hacer es crear una pila con cada versión de tu aplicación y usar las herramientas de los proveedores para “empujar” esa pila: Puedes hacer una pila a heroku, amazon, geocities, digitalocean, etc. Y la última versión que pongas en la pila (la más nueva) es la primera que sale en el navegador gracias al principio de LIFO! No podría ser más fácil.

Foto de una pila probablemente usada por nuestros ancestros ca. 1946 por Ryan Harvey

Ejercicios y siguientes pasos

Bueno, hacer una simple página no te convierte en un Full Stack developer, y es algo que requiere muchos años de trabajo. Abajo hay ejercicios para que vayas tomando los primeros pasos para cambiar tu modo de trabajo a una pila (Recuerda usar este artículo y los ejemplos como apoyo)

• Cambia tu terminal por una pila (el bloat de bash y zsh es mucho de todos modos y los devops NO utilizan estas herramientas)
• Guarda tus assets en línea en una pila
• Usa una pila como tu base de datos
• Implementa relaciones y joins en una pila
• Sustituye Photoshop por una pila de procesamiento de imágenes
• Usa una pila para editar texto (dile adiós al bloat de vim y notepad++)
• Crea una pila de monitoreo
• Vive dentro de una pila
• Sé la pila
• Si tienes una familia, sustituye tu familia por una pila (suena difícil de hacer, pero al final lo agradecerás)
• ¡Sigue descomponiendo páginas en pilas!
• Usa pilas para version control (BONUS: como hacer revert en una pila)

Espero que esto haya sido de ayuda, y esperamos pronto tener una guía más práctica con ejemplos de código sobre como hacer un sitio portable y moderno con la metodología FullStack™

Preguntas y discusión favor de enviarlas a twitter. (Bonus fact: twitter es literalmente una pila)

Show your support

Clapping shows how much you appreciated Ruben B’s story.