FrontEnd, Backend y FullStack developer

¿Qué es Frontend?

En una página web, el Frontend es la parte de un sitio web con la que los usuarios interactuan directamente (la interfaz visual).

El frontend, es lo que el usuario ve, con lo que el usuario interactúa. Ahora mismo tu eres un usuario de mi web y estás interactuando con ella. Esta interfaz con la que estás interactuando es la forma que tiene el navegador de interpretar el código HTML, CSS y Javascript que hay en ella. Si estás usando los navegadores firefox o chrome y pulsas ctrl + u, podrás ver el código fuente de estas tres tecnologías en esta página.

Si quieres ser un frontend developer, este es el orden de las tecnologías que debes aprender:

1. HTML y CSS

Estas dos tecnologías te permitirán desarrollar tus interfaces visuales. Con HTML podrás poner la información que le quieres mostrar al usuario en pantalla y con CSS podrás darle apariencia a esa información. El perfil profesional que domina estas tecnologías se llama Maquetador Web.

Aunque sólo con estas dos tecnologías podrás hacer interfaces visuales muy aparentes, lamentablemente es improbable que sean suficientes para que encuentres trabajo. Al menos en España, los cursos de formación ocupacional lanzan anualmente cientos de perfiles formados (aunque no necesariamente preparados) para cubrir vacantes de maquetador web. Esto hace que haya mucha más oferta de maquetadores web que la que demanda el mercado.

FrontEnd, Backend y FullStack developer 1

Cuando lo imparto presencialmente en el aula, mi curso de HTML y CSS tiene una duración aproximada de 80 horas. Todo lo que sé de maquetación web esta en este curso y si eres capaz de asimilar toda su información es mucho más de lo que necesitas para cubrir los requisitos exigidos a un maquetador web.

2. Javascript

Con Javascript, podrás hacer que las interfaces visuales que has creado con HTML y CSS puedan reaccionar a eventos del usuario (hacer click, escribir un valor en una caja de texto y validarlo, mostrar un popup al cabo de cierto tiempo…).

Aprender Javascript es notablemente más complicado que aprender HTML y CSS. Siempre hay excepciones y me he encontrado con alumnos a los que la maquetación web les resultaba más sencilla, pero en general hay un salto considerable en la dificultad.

Lamentablemente, en los cursos de formación ocupacional muchas veces es complicado impartir el nivel necesario de programación en Javascript para acceder a un puesto de trabajo. El alumnado tiene un perfil muy diverso en cuanto a habilidades e intereses e impartir el nivel que demanda el mercado a menudo es un proceso bastante conflictivo.

Por tanto, he aquí una oportunidad. Una vez das el paso a la programación con Javascript, todo el abanico de tecnologías que vendrá después será mucho más accesible para tí, y tendrás mucha menos competencia que si sólo te hubieses formado como maquetador web.

El curso que te Javascript que tienes en esta página cubre con todas las necesidades de un programador web. Llevo más de 14 años impartiéndolo y, pese a la dificultad que implica programar con Javascript, a través de gran cantidad de ejercicios cortos conseguiras adquirir las destrezas necesarias de manera muy paulatina.

3. Librerías, frameworks, preprocesadores

En este ecosistema de tecnologías que he resumido en tres grandes pasos, el más retador es el segundo: aprender Javascript. No obstante, una vez hayas completado con éxito el segundo paso, las cosas comienzan a ponerse un poco más sencillas. Será el momento de ampliar tus conocimientos con nuevas tecnologías. Esto te dará acceso a nuevas oportunidades laborales y te permitirá desarrollar de manera más rápida y efectiva, utilizando las últimas tendencias del mercado.

Si deseas profundizar en el desarrollo de aplicaciones con Javascript, las tres grandes opciones del mercado son estudiar React, Vue y Angular.

Por otro lado, si deseas profundizar en tus conocimientos de maquetación, es recomendable que aprendas Bootstrap, Foundation, Sass o Less.

Resumen de habilitades y tecnologías:

En esta infografía perfecta tienes un repaso de todo los que podría saber un buen front end. No hace falta aprenderlo todo, pero desde luego, atrás a quedado el tiempo en el que sabiendo una sola pastillita de las mostradas en la inforgrafía podías encontrar trabajo.

FrontEnd, Backend y FullStack developer 2

¿Qué es Backend?

Es la capa de acceso a datos de un software (por ejemplo, a la base de datos), que no es directamente accesible por los usuarios.

Hemos visto que el front end es accesible por el usuario. Puedes pulsar ctrl + u y ver el código fuente del frontend de cualquier página web. Sin embargo, con el backend pasa justo lo contrario.

Suponemos que facebook tiene 1000 millones de usuarios. Cuando un usuario intente loguearse en su cuenta de facebook escribiendo su nombre de usuario y contraseña, si estos datos estuviesen escritos en el front end, el código fuente tendría por lo menos 1000 millones de líneas.

Por un lado no sería sería muy seguro que el nombre de los usuarios y sus contraseñas estuviesen accesibles desde el navegador en el código fuente de una página web. Por otro lado, abrir una página web que tiene mil millones de líneas en su código fuente puede demorar unos días, así que la web no sería muy usable.

Por tanto, lo que realmente ocurre cuando un usuario se loguea es que los datos son enviados desde el ordenador del usuario a otro ordenador (el servidor) en el que hay una base de datos. Esta base de datos contiene todos los usuarios de la web. Se lanzará una consulta para ver si en la base de datos existe alguien que tenga las credenciales introducidas, y si existe se genera una respuesta que llega de nuevo al usuario.

El servidor, que es una aplicación capaz de responder a las solicitudes del navegador.

El código fuente que se encarga de consultar la base de datos y la propia base de datos son tecnologías del backend. Aunque en el backend pueden ocurrir muchas cosas, lo más importante que debe conocer un programador de backend son los lenguajes de programación para acceder y gestionar la base de datos.

Algunos de los lenguajes de programación para Backend son Python, Node.js, PHP, Java, Go, Ruby, C#…

Tal como ocurría con el frontend, todos estos lenguajes tienen diferentes frameworks que te permiten trabajar mejor según el proyecto que estás desarrollando, como Django, Flask, Spring, Spring Boot, Struts 2, JSF 1, JSF 2 y 2, Express.js, Laravel, Symphony Framework, Ruby on Rails y ASP.Net.

FrontEnd, Backend y FullStack developer 3
FrontEnd, Backend y FullStack developer 4

¿Qué es un Full Stack Developer?

Un full stack developer es la navaja suiza de los programadores. Es un programador solvente en todas las areas necesarias en el desarrollo de una aplicación. Sabe frontend y backend. No sólo eso, sino que también tiene conocimientos sobre arquitectura y administración de servidores.

En definitiva, es alguien a quien podrías preguntarle por qué el servidor se ha caído, o ponme una pasarela bancaria en la página, o quiero que los jueves mi página sea azul, y él debería poder hacerlo.