La Senda del Desarrollador Full Stack

Uno de los tópicos que más me consultan como profesor es “¿por dónde debería empezar?”. Hay muchas tecnologías y una demanda laboral muy alta que incrementó potencialmente estos últimos años.

Por eso decidí crear esta guía que va a aplanar el camino a todo el que se inicie como desarrollador en este mismo instante. También reforzará a los experimentados.

El Propósito

Lo primero que debes preguntarte es por qué quieres programar. Puede que simplemente quieras meterte en este mundo porque te atrajo lo que has escuchado.

O puede que te hayas decidido a programar web. O incluso te interesan las aplicaciones móviles. O quizá te quieres dedicar a crear aplicaciones para escritorio.

Cualquiera sea la razón, primero que nada bienvenido/a, pero necesitas algo más. Debes encontrar la utilidad en lo que vas a aprender. A fin de cuentas, serán más de 100 horas y meses entendiendo lógica de programación, flujos de comportamiento, buenas prácticas y demás.

Puede que no te lo hayas planteado o lo tengas muy claro, pero la realidad es que necesitas un propósito para programar. Porque sino crearás una calculadora, un ABM (Alta, Baja, Modificación) y alguna otra cosa más de tutoriales y ya no sabrás qué hacer.

Como pretendo cubrir todo lo necesario, te dejaré una serie de posibles proyectos que puedes plantearte como propósito para programar. Los he ordenado por nivel de complejidad, siendo el primero más sencillo y el último más complejo:

  • Calculadora: El ejercicio más común. Nos sirve para practicar operadores, uno de los primeros conceptos luego de entender qué son las variables y tipos de datos.
  • Elije tu Propia Aventura: Estamos hablando del juego que empezó con los libros del mismo nombre. Elijes un camino y tiene determinadas consecuencias. Con este proyecto podríamos aprender condicionales y bucles.
  • Sistema de Batallas: Ya sabemos operar valores numéricos y evaluar situaciones mediante condicionales. Entonces podemos crear un sistema donde un héroe ataca a un enemigo, éste pierde vida y viceversa.
  • Lista de Tareas: Nos sirve para manejar una interfaz gráfica y a la vez introducir conceptos de Bases de Datos. Crearemos una lista CRUD: Create, Read, Update, Delete. Un ejemplo real es Todoist.
  • Pokedex: Sabiendo hacer listas, creamos una que nos permita interactuar con la API de Pokemon y empezar a tener conocimientos sólidos en servicios.
  • Gestión de Empleados: Nuestro primer ABM. Usaremos nuestros conocimientos en Bases de Datos para crear, modificar y borrar empleados. Nos empezamos a acercar a sistemas comerciales que podremos vender a clientes reales.
  • Blog: Crear tu propio blog es un ejercicio complejo, pero ayuda a reforzar y aprender conocimientos de todo tipo. Un usuario puede publicar un artículo, modificarlo y borrarlo. También se puede comentar dentro de cada artículo. Todo esto implica una gestión de datos sólida, lo cual pondrá a prueba a cualquier desarrollador tanto experimentado como principiante.
  • API Blog: Imagina que ya tienes un blog funcional. Ahora piensa en la idea de que esos artículos se vean en tu dispositivo móvil. Podrías decirme, si sabes diseño web, que harías el blog con los principios de Responsive Design y Mobile First. Y eso está muy bien. Pero quiero llevarlo más allá: armar una aplicación para Android o iOS con un diseño personalizado para las dos y un sistema de alertas por cada artículo nuevo que sea publicado. Ahí es donde necesitarás una API.
  • Chatbot: Este proyecto se apoya sobre el conocimiento de todos los anteriores. Hoy día tenemos servicios como Discord, Telegram, Whatsapp, Slack, Twitch. Pero la interacción es humana en el mayor de los casos. Ahora armaremos un bot que mediante comandos conversacionales nos permita subir archivos, consultar nuestra API del Blog, quizá el pronóstico o mandar un mensaje masivo a nuestros compañeros. Las posibilidades son infinitas en este nivel.
  • Gestión de Turnos: Parece un proyecto simple pero no lo es. Crear un ticket para otorgar un turno que aparecerá en una pantalla es sencillo a esta altura. Pero armar un sistema de sockets donde dicha pantalla crea una conexión persistente y cada ticket nuevo aparecerá al instante requiere un nivel de complejidad elevado.
  • Red Social: En la época de mayor auge de Facebook, éste era el proyecto ambicioso de muchos aspirantes. No digo que sea imposible, pero cometerás un grave error si es tu primer proyecto. Crear una red social requiere muchos conocimientos técnicos y no solo de programación. Pero sigue siendo viable si has desarrollado los proyectos anteriores. Tendrás que lidiar con web sockets, bases de datos, un manejo de servidores resistente a caídas que tenga estrategias de balanceo, entre otros puntos que no alcanzaría el artículo entero a mencionar. No obstante, aprenderás mucho más de lo que imaginabas en un inicio. Y créeme, necesitarás compañeros de equipo, no es un proyecto de una sola persona.

Habrás notado que la mayor parte de los proyectos están orientados a web, y dicha razón te la explicaré en las siguientes secciones.

La Plataforma

Todo lo que quieras programar debe estar asentado en una determinada plataforma o varias. Por ejemplo, Netflix tiene dos aplicaciones mobile en Android y iOS; una aplicación adaptable para TV; un sitio web y una o varias APIs. Esto es lo que se llama una solución.

Como desarrolladores full stack, seremos capaces de crear soluciones completas. Pero debemos empezar por apuntar a una plataforma y luego ir explorando la comunicación con el resto.

El desarrollo web es nuestra opción más flexible para centrarnos en una plataforma e ir mutando en otras. Librerías como Electron, nos permiten crear nuestra aplicación en Javascript (un lenguaje web) y exportarlo a una app de escritorio.

También puede que desarrollemos una API en PHP con Laravel, por ejemplo, y luego armemos una app nativa en Android y otra en iOS. No hay una regla que determine cómo queremos crear nuestra senda de creadores de soluciones.

Y esa es la parte mas interesante del camino. Porque significa que podemos elegir muchas opciones prefabricadas o armar nuestro propio set de tecnologías.

Pero es importante crear un ecosistema. Una plataforma debe comunicarse con la otra y todas deben compartir la misma información o al menos partes estratégicas de la misma.

Por ejemplo un diario debe tener su sitio web, una app donde ver las noticias que soporte tanto en un celular como en una tableta y quizá una app para la TV donde se reproduzcan vídeos destacados de informes porque leer noticias ahí no tiene mucho sentido.

Si tomamos siempre en cuenta este concepto, podremos crear soluciones mucho más solidas y modernas, dado que hoy día los productos mas grandes y medianos manejan esta dinámica constantemente.

Las Herramientas

Este punto es muy relativo a la tecnología que utilicemos, pero intentaré señalar una serie de herramientas que probablemente uses en la mayoría de ellas:

  • Una consola o terminal: La consola nos permitirá ejecutar una serie de tareas necesarias para compilar nuestras aplicaciones, generar ciertos archivos, descargar dependencias, etcétera. En Windows personalmente recomiendo Cmder. Para cualquier distribución Linux o MacOS, la terminal que traen por defecto es bastante funcional.
  • Un editor de texto: Necesitas escribir tu código en algun lugar. Algunas tecnologías como Android tienen su propio IDE (Android Studio) pero en general para desarrollar web necesitaremos un editor más general. Les dejo una lista de posibles editores confiables: Visual Studio Code | Notepad++ | Webstorm | Sublime Text.
  • Git: En cualquier momento requerirás trabajar en un sistema de versionado de código. El más usado hasta la fecha es Git. Si no me crees, date una vuelta por Github. Por cierto, tengo un curso de Git gratuito en Udemy :D.
  • Cliente para Git: Muchos prefieren usar sólo la consola que git trae por defecto, pero cuando se trata de resolver conflictos complejos, es mejor usar un cliente. Yo personalmente recomiendo GitKraken.

Si conoces alguna herramienta adicional que se podría agregar, no dudes en dejarlo en los comentarios y yo la incluiré a la lista.

Primer Etapa: El Desarrollo Frontend

Los diseñadores gráficos que estén en la sala no se ofendan por mi siguiente afirmación: El desarrollo front-end es el primer paso y más sencillo para iniciarnos como full stacks.

Y no, no estoy diciendo que es más fácil frontend que backend. De hecho yo personalmente no soy capaz de crear una plantilla CSS decente y llevo años en esto.

Pero la práctica dice que los resultados del lado de frontend son visibles apenas tiramos nuestras primeras líneas de código. Dicho esto, empecemos a recorrer esta etapa.

HTML es el punto de inicio

HTML es el lenguaje de marcado por definición que interpreta el navegador. Es el esqueleto de cualquier proyecto web que queramos iniciar. No debemos aprendernos las etiquetas de memoria, pero si saber donde buscarlas.

Para aprender HTML debemos hacer uso de su documentación oficial en W3Schools. Hoy día HTML está en su versión 5.

Las nuevas Etiquetas de HTML 5

Todos los que se hayan metido en este mundo hace unos años o los que inicien en este momento, asumen que HTML siempre fue así. La realidad es que la popularidad de este lenguaje explotó cuando pasó de su versión 4 a la 5. En este artículo puedes ver las principales diferencias entre versiones.

Si bien es cierto que existen muchos cambios, hay algunos que marcaron una diferencia abismal entre versiones. Por ejemplo la etiqueta Canvas: implementada para mostrar gráficos renderizados en tiempo real. ¿Qué significa esto? Videojuegos.

De hecho cuando comenzó el auge, Google hizo un par de juegos en HTML 5 muy interesantes. Demostró que la potencia de Canvas podía reemplazar a los sitios hechos con la vieja y ya enterrada tecnología Flash, la cual en sus mejores épocas dominaba el mercado del diseño web.

Mi consejo es: No menosprecies HTML porque sea un lenguaje de etiquetas. Tiene mucha potencia, y su última versión desplegó muchas funcionalidades que podrías estar perdiéndote por centrarte en estudiar lo mínimo y pasar a otra tecnología.

Hora del Maquillaje, CSS

CSS es un lenguaje de estilos que nos permitirá darle un diseño limpio a nuestras páginas en HTML. Por ejemplo si queremos que una página sea responsiva y se adapte a cualquier ancho de pantalla, necesitamos CSS.

No es un lenguaje complicado de entender, pero si puede ser complejo en proyectos grandes. Aquí es donde bifurca la senda, dividiendo a los diseñadores web de los programadores web.

  • Si quieres ser un diseñador web, aprende CSS a fondo.
  • Si quieres ser un programador web, aprende las bases de CSS.

Sea cual fuera tu inclinación, para aprender CSS puedes leer la documentación oficial en W3Schools al igual que con HTML. Hoy día CSS está en su versión 3.

LESS y SASS

Cuanto más estudies CSS, notarás que muchos atributos empiezan a repetirse en distintos lugares. Tendrás muchas clases que hacen cosas similares. Se volverá difícil de mantener en muchos aspectos.

La comunidad decidió que aún si amaba el lenguaje de plantillas, ciertas tareas se volvían engorrosas. Así que como nacieron dos tecnologías que aplicaban lógica a CSS: LESS y SASS.

Las dos hacen lo mismo, son pre procesadores de CSS. ¿Qué significa esto? Básicamente crean código CSS dinámico. Esto nos permite reducir las propiedades repetitivas de CSS en un archivo .sass o .less, a algo más parecido a un script que se ejecuta y genera otra plantilla que no necesitamos tocar.

Esto se llama Transpiling: Escribir un código que luego un pre procesador lo convertirá en otro.

Sass no compila, transpila. Compilar es convertir código escrito a código de máquina o binario. Transpilar es convertir código escrito en otro código de distinto lenguaje.

Nuestro navegador no compila, además, sino que interpreta. Esto quiere decir que lee el código tal cual es, y no lo convierte.

Para profundizar Sass, pueden leer este artículo que detalla las propiedades y cómo implementarlo.

Media Queries

CSS 3 fue creado pensando en las tecnologías móviles y las páginas web responsivas o adaptativas.

Uno de los principios básicos para manejar webs adaptativas, es trabajar con anchos por porcentaje. Por ejemplo: una columna no ocupa 120px sino que podría ocupar 33.33% del ancho. Es un ancho dinámico.

Pero esto no alcanza. Si sólo nos basamos en los anchos dinámicos, tendremos webs en miniatura mirándolo desde nuestros dispositivos móviles. Para eso existen las media queries.

Estos componentes nos permiten limitar ciertos comportamientos según determinado ancho del dispositivo donde se esté mirando.

Por ejemplo: En un celular los carruseles funcionan muy mal. Entonces podemos decir que si el ancho es menor a 240px, entonces removemos ese componente.

Otros comportamientos son cambiar el ancho de las imágenes al 100% para que todas aparezcan una debajo de otra; quitar la cabecera y reemplazarla por una mas limitada; crear un menú hamburguesa; quitar un estilo de color de fondo que sea muy agresivo visto en dispositivos chicos, etcétera.

Lógicamente, también podemos trabajar hacia arriba. Por ejemplo en una TV. La mayoría de las apps en las smart TV son en realidad sitios webs embebidos. Entonces podemos crear queries donde los anchos mayores a 1080px tengan una distribución de elementos mas espaciado, más grandes y mover la cabecera hacia el costado.

Media Queries cubre todo lo que simplemente no podemos resolver sólo con anchos dinámicos, pero se complementan. Ninguno reemplaza al otro.

Frameworks de Maquetado

Puede que ames maquetar web. Te sientas y dejas que tu código CSS baile sobre los elementos de HTML.

Pero a veces (o casi siempre), los tiempos son limitados. Necesitas desarrollar un sitio web que funcione bien a la primera. Agilizar tu código.

También puede que no te guste maquetar. Quizá quieras centrarte en desarrollar la parte lógica de la web y facilitar el maquetado de alguna manera.

Sea cual fuera tu camino, un framework de maquetado es la mejor opción. Entendemos al framework como un marco de trabajo (traducción exacta), un conjunto de reglas pre programadas que nos permiten evitar hacer todo de cero.

La potencia del framework es por ejemplo traernos toda la estructura de responsive design y media queries resuelta. No tendremos que preocuparnos por ajustar anchos y verificar que se vea bien en todos los dispositivos, porque ya lo programaron los desarrolladores del framework.

Los frameworks mas conocidos son:

Los puristas de CSS no se sienten cómodos con esto: dicen que te limita. Tienen razón. Un framework facilita el desarrollo pero a la vez limita la creatividad.

Por ejemplo, Bootstrap se basa en un sistema de grids donde creamos una web con filas y columnas mediante etiquetas divisoras. Si quisiéramos que un divisor se posicione sobre otro; genere una animación especial por scroll; o crear un maquetado más artístico, nos vemos limitados.

Esto es normal dado que depende de la necesidad que tengamos. Si nuestra web necesita un diseño que no se pueda adaptar al sistema de grids, no podremos usar la mayoría de los frameworks de maquetado.

Es importante entender este enfoque porque quizá al principio no lo notemos, pero cuando tengamos que hacer cosas mas específicas, veamos el limitante.

No obstante, es perfectamente posible tener una página con un diseño de Bootstrap y dentro un componente personalizado de nuestro propio CSS.

En mi Curso de Laravel, tengo una sección especializada para dominar el framework de maquetado Bootstrap.

Javascript, la lógica de la Web

Javascript es un lenguaje de programación que convierte páginas estáticas (solo html y css) en dinámicas. Sobre este lenguaje bifurcarán muchos caminos de nuestra senda, dado que su aceptación y potencia han generado frameworks y librerías tanto en frontend como backend.

Es un lenguaje del lado del cliente. Esto significa que su lógica puede verse desde cualquier navegador. Esto puede resultar negativo en su primer impresión, pero cuando hablemos de backend, verán que no es un motivo de preocupación.

Para aprender Javascript se puede seguir el curso de W3Schools nuevamente.

El DOM

Cuando trabajamos solo con HTML, tenemos una serie de etiquetas que se representan visualmente en el navegador.

Pero JS no lo ve de la misma manera. Toma todo el código en HTML y lo convierte en un objeto que lo puede acceder cuando lo necesite. Esto parece complejo pero nada más lejos de la realidad.

A éste método se le llama Document Object Model (DOM). Esta es la forma en que JS (Javascript) se comunica con HTML. Si comprendemos este concepto, tendremos el panorama completo de como funcionan las webs dinámicas.

Una documentación interesante sobre el funcionamiento del DOM está en la web de MDN.

Basta de Vanilla por hoy

Por si no lo aclaré antes, se le dice Vanilla a todo lo se programe sólo con el lenguaje y sin librerías. Por ejemplo, JQuery es una librería de JS que simplifica algunas funcionalidades que se hacen en el DOM.

Si trabajamos sólo con JS, hablamos de código Vanilla JS. Pero si usamos JQuery, ya no es Vanilla, sino que nos apoyamos sobre una librería.

La realidad es que programar todo de cero es en cierto punto placentero, pero inviable. Hay librerías que nos facilitan muchas tareas y son mantenidas por la comunidad de forma constante.

No nos embarcaremos en analizar la infinidad de librerías que existen, pero si me interesa tratar los medios por los cuales se pueden importar.

Importación Manual y Gestores de Dependencia

Importar una librería en web es más sencillo que en cualquier otra tecnología. Es tan simple como agregar etiquetas link (si se trata de un css) o script (si es un archivo en JS) o ambas, y ya debería funcionar.

Por ejemplo, para agregar JQuery debemos incluir en nuestro HTML:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Y con esto ya deberíamos poder usar nuestra librería sin problemas.

Pero hay una forma más óptima inclusive: Se trata de los gestores de dependencia. Esto nos permitirá manejar un flujo de múltiples dependencias sin que debamos preocuparnos.

Por ejemplo Bootstrap tiene su dependencia CSS y JS, pero requiere otras librerías como JQuery y Popper para funcionar correctamente.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Con un gestor de dependencias como NPM (Node Package Manager), podríamos simplicarlo a:

npm install bootstrap

El funcionamiento de NPM es sencillo: Nosotros le decimos la librería que requerimos mediante el comando de arriba, y el gestor se encarga de bajar sus dependencias y sub dependencias necesarias. Todo esto se descarga en una carpeta llamada node_modules.

Tener un gestor de dependencias nos permite mantener un orden y una coherencia en nuestras librerías, evitando así importaciones innecesarias o fallos por falta de dependencias.

[Artículo en construccion!]

¡Deja un comentario!

Artículos relacionados

Cómo Migrar WordPress y Woocommerce con Azure

Las migraciones en WordPress siempre fueron un tema difícil de tratar. Las guías se centran en los backups locales pero no tanto en las restauraciones del lado del servidor. Los plugins en general tampoco ayudan demasiado: Apenas instalamos alguno, el backup es gratuito, pero la migración requiere un servicio premium. Por eso decidí armar esta guía, para resolver el dilema de una sola vez. Aclaro que si bien vamos a trabajar con Azure del lado del servidor, se puede hacer con cualquier otro VPS o Hosting siempre y cunado este nos permita una instalación previa de WordPress.

Mi experiencia con WordPress

Mi 2020 arrancó de una manera muy intensa. Debido a que me eligieron para preparar un programa académico de esta tecnología, reforcé mis conocimientos actuales y me introduje de lleno en nuevos e interesantes conceptos que trae esta plataforma de blogging y un poco más.

Como popular una tabla en base a un servicio con Jquery

La idea es crear una tabla donde tengamos la lista de personajes de StarWars (obtenido con SWAPI) y podamos eliminar uno a uno. Lo primero que vamos a hacer es crear nuestro html e incluirle Bootstrap (Framework de maquetado) y Jquery

Como llamar a una API desde Jquery

Como llamar a una API desde Jquery

Jquery es una librería que nos ayuda a simplificar muchas funcionalidades que existen en Vanilla Javascript pero que son mas complicadas de implementar en esta última.