Platzi
Platzi

Suscríbete a Expert y aprende de tecnología al mejor precio anual.

Antes:$249
$209
Currency
Antes:$249
Ahorras:$40
COMIENZA AHORA
172

Qué es Frontend y Backend: diferencias y características - Platzi

15125Puntos

hace 4 años

Curso de Introducción a la Web: Historia y Funcionamiento de Internet
Curso de Introducción a la Web: Historia y Funcionamiento de Internet

Curso de Introducción a la Web: Historia y Funcionamiento de Internet

¿Te has preguntado como funciona la web? en este curso resolverás esa y muchas más preguntas. Aprenderás cómo es que la computadora interpreta toda la información que le enviamos para que nuestro navegador fucione permitiendo conectar con otras personas, desarrollar proyectos y dar vida a las aplicaciones que utilizamos cada día.

Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que está del lado del cliente. Backend es la parte que se conecta con la base de datos y el servidor que utiliza dicho sitio web, por eso decimos que el backend corre del lado del servidor. Estos dos conceptos explican a grandes rasgos cómo funciona una página web y son fundamentales para cualquier persona que trabaje en el mundo digital, ya sea en programación, marketing, diseño o emprendimiento.

Te explicamos más a detalle:

¿Qué es Frontend?

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

fronted developer.png

Para convertirte en Frontend Developer debes saber HTML y CSS, los lenguajes de maquetación que nos permiten definir la estructura y estilos de una página web. Y también JavaScript, un lenguaje de programación para definir la lógica de nuestra aplicación, recibir las solicitudes de los usuarios y enviárselos al backend. Conoce más a fondo cómo aprender arquitectura frontend.

¿Qué es HTML, CSS y JavaScript?

Dominando estas tecnologías puedes usar algunos frameworks, librerías o preeprocesadores que expanden tus capacidades para crear todo tipo de interfaces de usuario. Algunos de ellos son React, Vue, Angular, Svelte, Bootstrap, Foundation, Sass, Less, Stylus y PostCSS.

¿Qué es Backend?

Backend es la capa de acceso a datos de un software o cualquier dispositivo, que no es directamente accesible por los usuarios, además contiene la lógica de la aplicación que maneja dichos datos. El Backend también accede al servidor, que es una aplicación especializada que entiende la forma como el navegador solicita cosas.

Algunos de los lenguajes de programación para Backend son Python, Node.js, PHP, Go, Ruby y C#. Y así como en el frontend, todos estos lenguajes tienen diferentes frameworks que te permiten trabajar mejor según el proyecto que estás desarrollando, como Django, Flask, Express.js, Laravel, Symphony Framework, Ruby on Rails y ASP.Net. Cada uno lo hemos elegido sobre todo porque tienen una gran comunidad que los respalda.

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

Cómo funcionan el Frontend y el Backend

La web está compuesta de un montón de documentos que están conectados entre sí a través de enlaces. Cuando quieres entrar a Platzi escribes la URL www.platzi.com en la barra del navegador, eso quiere decir que estás solicitando que te muestren una página web.

F-B2.jpg

En el siguiente paso tu computador verifica qué servidor de software está corriendo el sitio. Ahí el servidor evalúa qué tipo de petición es la que estás haciendo. Si entras a www.platzi.com/cursos, el sitio web obtiene una petición GET, así que debe hacer una conexión a la base de datos para obtener el listado de cursos.

Algunas veces no se requiere conexión a la base de datos, por ejemplo, al entrar a www.platzi.com/login no hace falta, ya cuando inicias sesión se hace una petición POST que se conecta a la base de datos para validar los accesos y el tipo de cuenta o suscripción que tienes, con eso el Backend devuelve la respuesta al servidor para que la empuje al navegador.

Finalmente entra el Frontend, que recibe la información que le pasó el Backend y la acomoda 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.

Si estás aprendiendo a programar, seguramente vas a encontrarte con muchos de los términos de este artículo. Además, en algún punto vas a tener que decidir si prefieres el Desarrollo Frontend o el Desarrollo Backend, aunque es cierto que hay Desarrolladores FullStack que involucran las dos áreas.

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

Curso de Introducción a la Web: Historia y Funcionamiento de Internet
Curso de Introducción a la Web: Historia y Funcionamiento de Internet

Curso de Introducción a la Web: Historia y Funcionamiento de Internet

¿Te has preguntado como funciona la web? en este curso resolverás esa y muchas más preguntas. Aprenderás cómo es que la computadora interpreta toda la información que le enviamos para que nuestro navegador fucione permitiendo conectar con otras personas, desarrollar proyectos y dar vida a las aplicaciones que utilizamos cada día.
Nicole
Nicole
maldeadora

15125Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
11
7302Puntos

Excelente post, explica de forma breve y hasta grafica los conceptos de Backend y Frontend. Una vez terminada la carrera de fundamentos, creo que me ire por JS con React para Apps hibridas complementandolo con Marketing Basado en Datos.

7
15125Puntos
4 años

Genial. En Platzi amamos React 😃 y la carrera de Marketing Basado en Datos está muy buena.

1
3 meses

gracias por aportar tu ruta de aprendizaje, creo que tambien me es importante complementar con marketing baasado en datos… saludos 😄

4

Podrían agregar un boton para agregar algunos post a favoritos? Como suede con los videos porfa. La ausencia de este feature me da la necesidad de improvisarlo en Mural.ly siendo esta una 3ra persona aqui.

2
15125Puntos
4 años

Si! Es la estrellita que está arriba. Saludos!

2
12173Puntos

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

1
32923Puntos

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
9405Puntos

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

1

Excelente, aclare mis Dudas gracias por explicar 😃

1
530Puntos

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

1
23Puntos

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

1

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

1
2299Puntos

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
15604Puntos

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
7928Puntos

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
12Puntos

una buena explicación.

1

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

1
35817Puntos

Muy buena explicación, Gracias Nicole.

1
10824Puntos

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
5367Puntos

Gracias Nicole.

1
5768Puntos

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
1249Puntos

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

1

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

1
6037Puntos

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

1
129490Puntos
2 años

Depende de tu definición de Full Stack. Pero en resumidas cuentas, el gran poder de JavaScript es que lo puedes usar en cualquier parte: frontend (navegadores web o aplicaciones móviles), backend, robots con arduino, videojuegos, etc.

👉 https://platzi.com/escuela-js

1
3Puntos

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

1
8714Puntos

Muy buen post Nicole!

¿Te puedo hacer una pregunta?

Soy Full-Stack en varias tecnologias pero si tubiera que elegir eligiria Front-End porque me parece mas dinamico y divertido. Mi problema es que apesto completamente en el area de diseño.

Se me da mal, y casulamente me desenvuelvo mucho mejor en la parte logica. Mi pregunta es,

¿Puedo considerarme Front-End si no hago diseño?

PD: Eso no quiere decir que no sepa usar SASS o LESS… simplemente yo y los colores y diseños no somos buenos amigos

PD2: Me encanta el area de diseño… Pero no importa cuanto me esfuerze no soy bueno.

1
15125Puntos
4 años

Puedes trabajar de la mano de un buen diseñador, al final la idea es que puedas replicar sus diseños con código. Importante que tu y este diseñador tengan buenos conocimientos de UX.

1
237Puntos

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

0
9405Puntos

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

1
15125Puntos
2 años

Gracias Sergio! Un saludo.

0
245Puntos

Me gusto bastante el post, no hace mucho asisti a una charla sobre angular en el que usaban estos terminos y la verdad es que al principio no entendia bien de que iba cada cosa. En mi carrera me enseñan C++, aunque yo por mi cuento estuve aprendiendo Java, Python y JavaScript ( que me esta gustando mucho ).

0
15125Puntos
4 años

Genial, qué carrera estás estudiando?

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
35Puntos

Muy buena explicación, estoy iniciando en este universo y este tipo de artículos van despejando mis dudas. Gracias

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
129490Puntos
2 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

Que buen post!, explicaciones simples, claras y con ejemplos reales 😄.
Eso quiere decir que para ser FullStack tengo que saber en profundidad sobre Frontend y Backend?

1
15125Puntos
4 años

Exactamente eso es. Tenemos un par de cursos que involucran Frontend y Backend 😉

0
2555Puntos
4 años

Cuales exactamente Nicole? Gracias.

1
15125Puntos
4 años

Por ejemplo el Curso de MEAN y el Definitivo de JavaScript.

0
4120Puntos

<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
11673Puntos

Excelente explicación me quedo todo muy claro, Yo me estoy sumergiendo en el mundo de Javascript, luego aprenderé react.js y angular 4, terminando con node.js. También me gusta mucho Java con Spring. Saludos!

0
15125Puntos
4 años

JavaScript y Java, genial!! Saludos 😉

0
5843Puntos

Útil y didático como siempre, Nicole!