Desarrollador front-end vs desarrollador back-end: definición y significado en la práctica

¡Los sitios web y las aplicaciones son complejos! Los botones y las imágenes son solo la punta del iceberg. Con este tipo de complejidad, necesita personas para administrarlo, pero ¿de qué partes son responsables los desarrolladores de front-end y back-end?

  • Las muchas capas del desarrollo
  • Pero no estamos todos llenos
  • Entonces, ¿cuál es la diferencia entre el desarrollo front-end y el desarrollo back-end?
  • ¿Qué es el desarrollo front-end?
  • ¿Qué es el desarrollo back-end?
  • Donde las cosas se ponen borrosas
  • Recursos para aprender

Las muchas capas del desarrollo

Ya sea que esté trabajando en un sitio web o en una aplicación nativa de iOS, todos los entornos de desarrollo comparten un tema común: hay un front-end para una aplicación y un back-end.

Esta línea puede volverse borrosa, especialmente dado el auge de javascript y el mundo sin servidor. Con las herramientas algo fusionándose, a veces nos preguntamos si somos un desarrollador de pila completa.

Desarrollador “Fullstack”. pic.twitter.com/yfymQmJJgq

- Brian Holt (@holtbt) 24 de marzo de 2018

Pero no estamos todos llenos

Por mucho que todos queramos ser, no todos somos desarrolladores de pila completa. Personalmente, me encuentro capaz de ser productivo en el back-end de una aplicación, pero no es mi fortaleza y prefiero estar de cabeza construyendo UI.

Y algunas personas son lo opuesto, donde son más fuertes al lidiar con la creación de API en el back-end de una aplicación y, aunque pueden crear una interfaz de usuario, podría ser más una experiencia de prototipo que una aplicación completa.

Entonces, ¿cuál es la diferencia entre el desarrollo front-end y el desarrollo back-end?

Incluso si es un desarrollador de pila completa, eso no significa que no haya una división de responsabilidades.

Entonces, ¿cómo se ven esos?

¿Qué es el desarrollo front-end?

El front-end de una aplicación generalmente se refiere a la capa que representa la IU (interfaz de usuario). Esto puede incluir cualquier cosa, desde un sitio estático con HTML y CSS hasta una aplicación React completa que impulsa la interfaz de usuario.

¿Cómo era tradicionalmente el desarrollo de front-end?

Actualmente, Javascript gobierna la web front-end, pero no siempre fue así. Si bien podría haberse utilizado para agregar pequeños fragmentos de interacción a un sitio, por lo general, las interfaces se representaban utilizando lenguajes de plantillas del lado del servidor como PHP impulsado por marcos y Template Toolkit (Perl).

Esto se volvió muy popular en la práctica con marcos o herramientas locales como Wordpress que usaban PHP para impulsar una comunidad masiva de desarrolladores que construían sus sitios web con esas herramientas.

La forma en que funcionó fue que el lenguaje de plantillas pudo obtener sus datos directamente del servidor a medida que se procesaban. Cuando un navegador solicita la página directamente desde el origen (el servidor mismo), cualquier dato que necesite la plantilla, la lógica de la aplicación proporcionará en ese momento.

Algunas de las herramientas frontales más tradicionales incluyen:

  • Bibliotecas como jQuery o MooTools
  • Marcos de sitios web como Wordpress
  • CSS simple
  • Uso abundante de elementos de la tabla

Pero a medida que pasaba el tiempo, javascript se volvió más maduro como lenguaje y los navegadores se volvieron más poderosos, lo que llevó a la idea de que podríamos mover más de ese trabajo al navegador para crear experiencias más rápidas e interactivas.

¿Cómo se ve el desarrollo de front-end ahora?

Ahora es común ver sitios web y aplicaciones con mucho javascript construidos con marcos de interfaz de usuario como React, Vue y Angular. Estas herramientas proporcionan abstracciones que permiten a los desarrolladores crear interfaces de usuario complejas con patrones reutilizables como componentes.

Cuando el navegador carga la página, la página recibe un documento HTML inicial que también incluye la etiqueta de script en el javascript (igual que siempre). Pero una vez que se carga JavaScript, llega a las API mediante solicitudes del navegador que, cuando se completan, actualizan la página para completar cualquier tipo de datos dinámicos que normalmente obtendría junto con ese primer documento HTML.

Si bien suena como más pasos, comúnmente proporciona una carga y procesamiento de la página inicial más rápidos, sin mencionar que tiene una gran experiencia de desarrollador. Al entregar menos en esa primera solicitud y priorizar lo que se carga después de eso, generalmente termina como una mejor experiencia de usuario.

Algunas de las herramientas de front-end que son más comunes y están ganando popularidad incluyen:

  • Marcos de interfaz de usuario como React o Vue
  • Marcos web como Gatsby
  • Compiladores como Babel
  • Paquetes como Webpack
  • Herramientas CSS como Sass

Pero esas API, ya sea que paguemos o creemos nosotros mismos, deben construirse en alguna parte . Ahí es donde entra la parte trasera.

¿Qué es el desarrollo back-end?

La capa de back-end suele ser donde ocurre la lógica empresarial. Esto puede ser muy complejo como las reglas que determinan los ingresos de una empresa de comercio electrónico o algo más común como un perfil de usuario.

¿Cómo era tradicionalmente el desarrollo de back-end?

Los back-end de las aplicaciones se construyeron históricamente utilizando lenguajes del lado del servidor como PHP o Ruby. La idea es que tenga un servidor en el que necesite realizar operaciones complejas, por lo que la forma de hacerlo es con un lenguaje que el servidor entienda.

En cada solicitud al servidor, el backend realizaría la pila completa de operaciones, incluida la representación del front-end. Mediante el uso de marcos o arquitecturas de bricolaje, el back-end aceptaría la solicitud, averiguaría qué debería hacer con esa solicitud, ejecutaría cualquier lógica empresarial necesaria con la solicitud y proporcionaría al front-end cualquier dato que necesitaría para mostrar una respuesta. esa solicitud.

Algunas de las herramientas de back-end más tradicionales incluyen:

  • Servidores administrados en las instalaciones o de forma remota como Rackspace
  • Servidores HTTP que utilizan Apache
  • Bases de datos como MySQL
  • Lenguajes del lado del servidor como PHP o Perl
  • Marcos de aplicación como Ruby on Rails

¿Cómo se ve el desarrollo de back-end ahora?

Las pilas de back-end se ven algo similares a la forma en que lo hacían antes, aparte de los patrones de código más nuevos, excepto que más a menudo verá que los back-end proporcionan datos a través de API a través de solicitudes HTTP en lugar de directamente a las plantillas en las que el equipo de front-end está trabajando.

Si bien la base no es muy diferente, en realidad se vuelve cada vez más compleja, ya que tiene que lidiar con diferentes implicaciones de seguridad que podrían comprometer su sistema si no se configura correctamente, como dejar una API abierta al público que devuelve datos confidenciales del usuario.

Pero también el funcionamiento del servidor puede ser completamente diferente. Si bien antes podíamos ejecutar nuestro python en nuestro propio servidor administrado (todavía podemos), ahora podemos hacer uso de funciones sin servidor con herramientas como AWS Lambda que simplifican la forma en que administramos el código.

Si bien "sin servidor" no significa necesariamente que literalmente no haya servidores, significa que, como servicio, el desarrollador no tiene que preocuparse por el mantenimiento de ese servidor y, en cambio, puede concentrarse en el código que necesita para ejecutar.

Algunas de las herramientas de back-end que son más comunes y están ganando popularidad incluyen:

  • Servidores en la nube como AWS EC2
  • Servicios sin servidor como AWS Lambda
  • Bases de datos NoSQL como MongoDB
  • Idiomas como Python o javascript a través de NodeJS
  • Marcos de aplicaciones web como Serverless Framework

Donde las cosas se ponen borrosas

Parte del giro con los backends es que ahora puedes escribir tu backend con javascript. Con el inicio de Node.js, a los desarrolladores se les dio la capacidad de usar su idioma de navegador favorito para hacer la mayoría de las mismas cosas a las que estaban acostumbrados y familiarizados, pero ahora en un servidor.

Si bien no a todos les gusta ejecutar javascript como lenguaje del lado del servidor, se volvió un poco más fácil usar el mismo lenguaje para escribir la pila completa de una aplicación. Esto cambió un poco el juego en lo que respecta a los front-end y back-end.

Pero también ha comenzado a cerrar el círculo en el que ahora ve sistemas que crean API justo al lado de la interfaz, similar a lo que podría ver en una pila tradicional.

Front End vs Back End

Independientemente de la pila, siempre habrá una separación de preocupaciones. La interfaz de usuario y toda la interacción, ya sea renderizada en el servidor o en el navegador, es lo que hace que el front-end sea el front-end y los datos y la lógica empresarial, ya sea que provengan del servidor en el armario de su empresa o de una función administrada, es lo que hace que la parte trasera sea la parte trasera.

Ya sea que prefiera trabajar en las funciones orientadas al usuario o crear la lógica que les permita hacer cosas, hay muchos recursos para comenzar.

Recursos para aprender

Interfaz

  • Freecodecamp.org Certificación de diseño web adaptable (freecodecamp.org)
  • Javascript para principiantes (beginnerjavascript.com - Wes Bos)
  • Tutorial de React para principiantes (youtube.com - Programación con Mosh)
  • Maestros frontend (frontendmasters.com)

Back end

  • Certificación de microservicios y API de freecodecamp.org (freecodecamp.org)
  • Inicio súper simple sin servidor (kentcdodds.com)
  • AWS Certified Cloud Practitioner Training 2019: un curso de video gratuito de 4 horas (freecodecamp.org)
  • Introducción a la informática de CS50 (edx.org)

Todo lo anterior

  • Cómo convertirse en un desarrollador web Full Stack en 2020 (colbyfayock.com)
  • Egghead.io (egghead.io)
  • 100 días de código (100daysofcode.com)
  • El Bootcamp para desarrolladores web (udemy.com - Colt Steele)

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín