243

Qué es Frontend y Backend: características, diferencias y ejemplos

17567Puntos

hace 7 años

El frontend se refiere a la parte visible de un sitio web o aplicación con la que los usuarios pueden interactuar directamente. Es la cara del sitio, ubicada en el lado del cliente. Por otro lado, el Backend se encarga de la conexión con la base de datos y el servidor utilizado por el sitio web. Esta parte está situada en el lado del servidor.

Estos dos conceptos son fundamentales en el funcionamiento de cualquier sitio o aplicación web y son esenciales para aquellos que trabajan en el mundo digital. Sintetizando, el frontend es como la fachada y las partes visibles de una casa, mientras que el backend es la infraestructura interna que hace que todo funcione de manera eficiente y segura.

📌Para empezar en el mundo de la programación, te recomendamos revisar nuestra nueva Escuela de JavaScript 🚀

Entremos en más detalles sobre qué es front end y back.

Qué es frontend

Frontend es la parte de un programa, sitio web o dispositivo a la que un usuario puede acceder directamente. En el contexto de diseño web y desarrollo web, se refiere a todas las tecnologías que corren en el navegador y que se encargan de la interactividad con los usuarios.

El frontend es como la cara visible del sitio, donde se muestra:

  • El diseño
  • Los colores
  • Los botones
  • Todo lo que puedes ver en la pantalla

También se encarga de hacer que todo funcione correctamente y de responder a tus acciones, como hacer clic en un botón o desplazarte por la página.

¿Qué hace un desarrollador front end?

Los desarrolladores frontend son aquellos que crean los componentes visuales de un sitio web. Son los encargados de dar formato a:

  • Imágenes
  • Animaciones
  • Interactividad de un sitio web
fronted developer.png

Descubre también: qué hace un desarrollador web

¿Cuáles son los lenguajes más usados en el desarrollo front-end?

Estos lenguajes son los más utilizados y forman la base del desarrollo front-end. Te permiten crear páginas web interactivas y visualmente atractivas:

  • HTML (lenguaje de marcado de hipertexto)
  • CSS (lenguaje de diseño gráfico)
  • JavaScript (lenguaje de programación)

¿Cuáles son las herramientas más utilizadas en el desarrollo frontend?

Algunas herramientas populares utilizadas en el desarrollo frontend incluyen:

  • Visual Studio Code
  • Sublime Text
  • Git
  • Sass
  • Webpack

Estas herramientas ayudan a los desarrolladores a escribir y organizar su código de manera eficiente.

Interioriza estos y más conceptos con el curso web para developers.

Qué es Backend

El backend es la parte invisible pero esencial de un sitio, encargada de manejar la lógica y el procesamiento de datos necesarios para que todo funcione de manera correcta y segura.

El backend se ocupa de tareas como almacenar y recuperar datos de una base de datos, procesar formularios, autenticar usuarios y gestionar la seguridad del sitio. Es responsable de toda la “magia” que sucede detrás de la interfaz visible.

El Backend también accede al servidor, que es una aplicación especializada que entiende la forma en la que el navegador hace solicitudes.

¿Qué hace un desarrollador back end?

Los desarrolladores back-end se encargan de hacer que la lógica del sitio funcione correctamente, que la información se transmita de manera segura y que el rendimiento de la aplicación no afecte la experiencia del usuario.

¿Cuáles son los lenguajes de programación más utilizados en el desarrollo backend?

Algunos de los más populares y ampliamente adoptados son:

  • Python
  • JavaScript
  • Ruby
  • Java
  • PHP

Lee también: ¿Cuánto tiempo toma aprender Python?

¿Cuáles son las principales tecnologías utilizadas en backend?

El desarrollo backend utiliza una variedad de tecnologías para construir aplicaciones web robustas y escalables. Estas son algunas de las principales:

  1. Frameworks de desarrollo: como Django (Python), Ruby on Rails (Ruby), Laravel (PHP) y Express.js (JavaScript)
  2. Bases de datos: algunas bases de datos populares son MySQL, PostgreSQL, MongoDB y SQLite.
  3. Servidores web: como Apache, Nginx y Microsoft IIS.
  4. APIs: las APIs RESTful son comunes en el desarrollo backend y utilizan el protocolo HTTP para intercambiar información.
  5. Contenedores y orquestación: como Docker, y herramientas de orquestación, como Kubernetes, ha ganado popularidad en el desarrollo backend.

Guía descargable de lenguajes, frameworks y librerías backend

¿Cuáles son las diferencias entre frontend y backend?

La principal diferencia entre frontend y backend es que el desarrollo frontend se centra en la creación de la interfaz de usuario y la interacción con los usuarios, mientras que el desarrollo backend se enfoca en la lógica y el funcionamiento detrás de escena de una aplicación web.

El desarrollo de front-end es el proceso de hacer que un sitio web funcione y se vea bien en un navegador. Por lo general, lo realizan diseñadores y desarrolladores, a veces con aportes del personal de marketing. Los desarrolladores front-end pueden codificar en HTML, CSS y JavaScript para integrar el diseño del cliente con una aplicación, o pueden trabajar con frameworks como AngularJS.

Conoce más sobre: ¿Qué es Angular?

El desarrollo de back-end es el proceso de administrar el almacenamiento de datos y acceder a ellos en una base de datos para mostrarlos en una página web, para que los usuarios puedan consumirlos desde cualquier dispositivo.

Los desarrolladores de back-end a menudo deben ser fuertes en habilidades como Java, C++, Ruby on Rails, PHP o Python. Los desarrolladores de front-end también pueden necesitar conocer algunos de estos lenguajes, pero a menudo utilizan herramientas o frameworks como Bootstrap o Tailwind, que les permiten crear sus interfaces web de forma rápida y sencilla.

¿Cómo funciona el desarrollo frontend y el backend? Ejemplo en un sitio web

La web está compuesta por un conjunto de documentos que se conectan entre sí mediante enlaces. Cuando deseas ingresar a Platzi, escribes la URL www.platzi.com en la barra del navegador. Esto significa que estás solicitando que se te muestre una página web.

En el siguiente paso, tu computadora verifica qué servidor de software está corriendo el sitio web. Luego, el servidor evalúa qué tipo de petición estás haciendo. Si entras a www.platzi.com/cursos, el sitio web recibe una petición GET, por lo que debe establecer una conexión con la base de datos para obtener el listado de cursos.

En algunas ocasiones no es necesario tener conexión con la base de datos. Por ejemplo, al ingresar a www.platzi.com/login, no es necesario tener conexión, ya que cuando inicias sesión, se hace una petición POST que se conecta a la base de datos para validar el acceso y determinar el tipo de cuenta o suscripción registrada. Posteriormente, el Backend devuelve la respuesta al servidor para que este la envíe al navegador.

Finalmente entra el Frontend, que recibe la información que le pasó el Backend y la dispone en la interfaz del sitio, lo que en este caso sería el perfil del usuario. Esto es lo que finalmente se muestra en el navegador.

La siguiente imagen muestra el camino que realizamos para ver cómo funciona el back end y el front end.

ejemplo como funciona backend y fronted.png

Cómo convertirte en desarrollador frontend

Para convertirte en Frontend Developer, es necesario conocer HTML y CSS, los lenguajes de maquetación que nos permiten definir la estructura y los estilos de una página web, y también JavaScript, un lenguaje de programación que nos permite definir la lógica de nuestra aplicación, recibir las solicitudes de los usuarios y enviarlas al backend.

Conoce más sobre: cómo aprender arquitectura frontend

En Platzi puedes iniciar con el Curso de Frontend Developer que te pondrá al día en todo lo que necesitas aprender para empezar tu camino en esta ruta tan apasionante.

Dominar estas tecnologías te permite utilizar algunos frameworks, librerías o preprocesadores que amplían tus capacidades para crear una amplia variedad de interfaces de usuario. Algunos de ellos son:

Cómo convertirte en desarrollador backend

Algunos de los lenguajes Backend son Python, Node.js, PHP, Go, Ruby y C#. Al igual que en el frontend, cada uno de estos lenguajes tiene diferentes frameworks que te permiten trabajar mejor según el proyecto que estás desarrollando.

Algunos ejemplos son Django y Flask para Python, Express.js para Node.js, Laravel y Symphony Framework para PHP, Ruby on Rails para Ruby, y ASP.Net para C#. Elegimos cada uno de ellos principalmente porque tienen una gran comunidad que los respalda.

Dependiendo de las tecnologías que pretendas aprender, existen varias rutas que puedes tomar, como se muestra en esta infografía:

ruta backend.png

Sin embargo, un verdadero programador backend no está casado o casada con un solo framework o lenguaje de estudio de programación. Por el contrario, siempre intenta aprender más y conocer mejor las novedades que van apareciendo para así mantenerse a la vanguardia de su profesión.

Lo más importante no es el lenguaje, sino el entendimiento profundo de por qué las cosas están funcionando de una manera u otra.

¿Qué es un desarrollador fullstack?

Los desarrolladores full stack son profesionales que se encargan tanto de la parte técnica como de la parte creativa (frontend y backend). El término “stack” (pila o montón, en inglés) hace referencia al grupo de tecnologías que componen un sitio web en todos sus aspectos, desde la base de datos hasta el manejo lógico y la interfaz visual.

Un desarrollador full stack es capaz de manejar la pila completa de un sitio, lo que implica que tiene conocimientos tanto de frontend como de backend y también del manejo de su base de datos.

Conoce más en la Escuela de Desarrollo Web de Platzi

¿Te parece difícil estudiar programación o estás aprendiendo a programar? Seguramente vas a encontrarte con muchos de los términos de este artículo.

Te invito a que sigas aprendiendo en la Escuela de Desarrollo Web, dónde encontrarás diferentes rutas de aprendizaje que te guiaran en tu camino para ser frontend, backend o full stack developer.

¡Cuéntame en los comentarios si te queda alguna duda, si estás aprendiendo a programar y cuáles son tus lenguajes favoritos!

Nicole
Nicole
maldeadora

17567Puntos

hace 7 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
5261Puntos

Había leído varios artículos y seguía con mis dudas entre las diferencias de Backend y Frontend. Pero en este articulo estuvo super clara la forma en la que lo explicaste, aclaraste muchas dudas que tenia, gracias.

3
643Puntos

Muy interesante post!!! Deja muy en claro los conceptos de ambos dos.

3
5187Puntos

Excelente post!, da conceptos claros de lo que es un Front-end y Back-end, así como sus diferencias. Regresando a la fuente. Retomando programación. Gracias Platzi.

3
1869Puntos

Muchas Gracias, por este informe tan completo y el video tan bien explicado.
Un placer estudiar así.
Un saludo para toda la comunidad de Platzi!!!.

2
24765Puntos

wow!!! 🤯no me había quedado claro hasta que leí tu post

1

Fue muy educativo induciendo con aprecio al mundo de la programación.

1
3Puntos

Gracias!! Nicole… Me ayudo bastante la publicación, ahora lo entiendo mejor ya que tenia muchas dudas sobre estos temas.

1
557Puntos

excelente me ayudaste a entender mejor, tenia dudas pero me quedo mas que claro

1
19404Puntos

Hola! siemore tuve dudas entre la diferencia de php y javascript. La respuesta es entonces que el primero es lenguaje de bakcend y el segundo lenguaje de frontend?
Tienen sintaxis muy parecidas verdad? tal vez eso es lo que me hizo siempre equivocar

1
105Puntos

Muy iluminadora tu aportación. Excelente para neófitos, como yo.
Gracias y saludos.

1
2698Puntos

Al entrar a platzi escuchaba FRONTEND y BACKEND seguido y no sabia a que se referian, al buscarlo en google me muestra que las respuestas estaban ahi mismo en PLATZI, QUE BELLEZA

1
12Puntos

una buena explicación.

1
25732Puntos

Desde siempre he tenido la curiosidad por estudiar el desarrollo web. Empecé en Platzi hace dos meses para estudiar marketing digital. Ahora incluyo un poco de frontend y de todas las escuelas en realidad jajaja

1

Me sirvió mucho el post ya que actualmente estoy estudiando la carrera de ISC y en los últimos meses he escuchado mucho estos dos términos (Frontend y Backend) me gusta mucho la manera en que esta explicado.

1
22165Puntos

Hola Nicole!!

Excelente artículo, me sirvió mucho para saber por dónde empezar, si por Back o Front o si arrancar de lleno con el Full Stack, gracias por esta artículo de orientación.

Muchas gracias!

1
6225Puntos

Gracias, está genial, el aporte es un post muy claro, el tema me interesa mucho, en lo personal complicada la decisión, porque las dos ramas me gusta, me atrae mucho crear y diseñar, pero también Python y Django. 😮

1
530Puntos

Genial esto se lo mandare a un amigo que me dijo que explicara 😄 gracias platzi

1
47936Puntos

Hola aunque este post es antiguo, espero me ayuden con mi duda.
Estoy aprendiendo Java y a la vez Javascript, con dirección a poder desarrollar para web y también de escritorio por lo que tengo entendido se usa mas Java. Voy en buena dirección? Siento que ver dos tecnologias quizá distintas no me ayuden mucho en mi aprendizaje.

1
21947Puntos

nicole, me parece que tuviste una excelente manera de explicar esta temática, aunque ya tenia conceptos claros, me gusto tus ejemplos.
😃

1
6035Puntos

es posible que con JavaScript pueda ser un desarrollador Full Stack?

1

Esto es solo para desarrolladores web o es transversal para quienes trabajan con datos o IA?

1
9685Puntos

Disculpen, alguien podría a qué es (Modelo, patrón de diseño, aqruitectura, etc. ¿O solo es una concepción?) frontend-backend y cuál es su diferencia con la arquitectura cliente-servidor?

1

Gracias por este post. Estoy iniciando en el mundo de la programación, apenas iniciaré ruta de Javascript!

1
35721Puntos

Muy buena explicación, Gracias Nicole.

1
13733Puntos

Gracias Nicole.

1

Excelente, aclare mis Dudas gracias por explicar 😃

1
5926Puntos

@Nicole,

Muchas gracias por dedicar tiempo a enseñarnos de manera general este mundo tan cotidiano, pero que para muchos de nosotros, es enteramente nuevo.

PD. Parece que el hipervinculo registrado en las palabras “desarrolladores fullstack”, tiene un inconveniente, es decir, no se refleja contenido alguno al abrirlo (4 años después de la publicación).

1
3167Puntos

Que buen post!!! no tenía idea por donde comenzar, y ahora si.

1

Estoy iniciándome en el mundo de la programación.
JavaScript, con lo que entiendo estoy en Frontend…, el tiempo dirá, pero me parece un sector, el de la programación, con demanda y futuro.

1
1114Puntos

Información valiosa. De profesión soy economista, y a lo largo de mi carrera he tenido la oportunidad de enfocarme en la optimización de procesos, pero mucha de las iniciativas que tenia en mente eran posibles con componentes tecnológicos. Por eso decidí involucrarme más a fondo en este mundo, quiero en algún momento poder desarrollar las ideas que siempre he tenido. Se que aprenderlo todo al 100% es casi imposible, pero tengo más claro el panorama de cual es el enfoque que debería tener.

1

Es fascinante cómo un tema te lleva a investigar otros de otras áreas. La verdad no paro de aprender con Platzi, gracias

1
5Puntos

Saludos, hoy me inicio en este mundo, es decir esta es mi primer lectura con intenciones de entender los terminos mas comunes en el mundo IT.
Felicitaciones, me parecio muy claro y directo sin vueltas que no aportan al objetivo.

1
944Puntos

¡He debido abstenerme de hacer clic en los hipervínculos porque no puedo con tanta curiosidad!.. Aunque ya sabía lo que era frontend y backend, sí que he aprendido nuevas cosas en este artículo. ¡Gracias!

1
1542Puntos

Al fin ya la tengo clara, puedo decir que ya se que hace un frontend y un backend!

1
3Puntos

__Muy buen post, muy claro y bien redactado !

motivada para lo que se viene ```
_
1

Excelente, me acabas de aclarar el panorama para iniciar esta carrera! ¡Muchas gracias!

1
2717Puntos

Para los conocedores del tema que especialidad es mas demandada la del Desarrollo Frontend o el Desarrollo Backend?

1
2717Puntos

Gracias Nicole, por esta guía para iniciar como desarrollador fullstack.

1
1382Puntos

Muy buena lectura, ahora que estoy comenzando me están quedando más claro todo lo que conlleva ser un desarrollador.

1
1451Puntos

Excelente explicación de los dos conceptos, me encanto tu post

0
806Puntos

Hola espero puedan responderme esta duda lo agradecería mucho, yo actualmente estudio en la preparatoria, estudio una carrera técnica en el área de informática y quería complementar mis estudios con platzi , me gusta mucho la programación y me gustaría aprender sobre el backend y el fronted pero mi duda radica en querer saber por cual me recomendarían empezar?

1
216877Puntos
5 años

Cualquiera de los dos. Realmente no importa. Lo que sí importa es que no te quedes solo con uno, sino que aprendas de todo un poco.

0
5211Puntos

<html>
<head>
<title>El título del post</title>
<link rel=“stylesheet” href= “css/estilos.css” />
</head>
<body>
<div id=“container”>
<div id=“cabecera”>
Hyperblog <span id= “tagline”>Tu blog de confianza</span>
</div>
<div id=“post”>
<h1> Este es ek titulo atractivo e interesante del
post</h1>
<p>Y este es el parrafo de
inicio donde vamos a explicar
las cosas increibles que se
pueden hacer con ramas</p>
<p>Los blogs son la mejor
forma de compartir
informacion y tus ideas
Mucho mas que ir a
conferencias o salir en Youtube.
Excepto si eres un rockstar. Pero
estadisticamente no lo eres… por ahora </p>
</div>
</div>
<body>
</html>

0

Gracias por el post, me quedo super claro las diferencias de un Backend y Frontend ya me esta empezando a gustar mi carrera ajaja lol estoy siguiendo desarrollo de software 😃

0
21947Puntos

nicole, me parece que tuviste una excelente manera de explicar esta temática, aunque ya tenia conceptos claros, me gusto tus ejemplos.
😃

1
17567Puntos
5 años

Gracias Sergio! Un saludo.

0
17287Puntos

Útil y didático como siempre, Nicole!