Qué es un Front-End y un Back-End averígualo sin tanto tecnicismo

que es un front-end y un back-end

¿Qué es un front-end y un back-end? fue la pregunta que me hizo uno de mis suscriptores del newsletter hace un par de semanas atrás. Dicha pregunta venía acompañada de una propuesta, !por favor si puedes, que sea si tanto tecnicismo¡.

Asumido el reto, trate de responderle lo más tajante que pude para que pudiera dilucidar claramente lo que es un front-end y un back-end, que es lo que hace cada uno, y en qué se diferencia uno del otro.

El quedó muy satisfecho por la respuesta que le di, y debido a ello me decidí escribir sobre este asunto en el blog, así que, espero que tu también estimado lector quedes satisfecho.

Para hablar sobre que es un front-end y un back-end sin tecnicismo, es necesario que conozcas algunos términos que considero importante antes de seguir adelante, porque puede que salgas del post con la misma incertidumbre con la que has llegado.

Imagínate que entras buscando aclarar que es un front-end y te encuentras palabras como  “El front-end  debe diferenciar sobre Interfaz de Usuario (UI), Experiencia de Usuario (UX), Diseño de Interacción (IxD) y cómo las tecnologías del lado del cliente las interpretao.0

De hecho, el párrafo que he encerrado entre comillas lo he hecho solo para diferenciarlo y llamar tu atención ya que no se trata de una simple cita, ni mucho menos de una suposición, el front-end debe saber eso, aunque te encontrarás a muchos que te dirán que eso de la UI, UX, IxD es asunto meramente del Diseñador Gráfico/Web. !Ahora que te parece si vamos al grano¡. 🙂

Vamos a comenzar definiendo desde un principio que son las tecnologías o lenguajes del lado del cliente y del lado del servidor, lo haré así porque, así me apetece y punto…

Jajaja no me lo creas es solo broma para romper el hielo y despojarnos de formalidades, total aquí venimos a hablar sin tecnicismo. Lo que si no es broma es que, comenzaremos por lo de los lenguajes del lado del cliente y del servidor ya que de ellos provienen los términos front-end y back-end.

Tecnologías o lenguajes del lado del cliente.

que es un front-end y un back-end

Estas son las utilizadas por el front-end para la estructuración, maquetado y animación de páginas webs. HTML, CSS, JavaScript son algunos de estos lenguajes, de ellos solo JavaScript es considerado un lenguaje de programación.

HTML es un lenguaje de etiquetado o marcado para estructurar el contenido de la web y CSS un lenguaje de estilos, para darle estilos valga la redundancia a la estructura creada con HTML.

Se les llama lenguajes del lado del cliente porque estos son interpretados directamente desde el navegador web y no requiere que un servidor las interprete antes de enviarlas al usuario que la solicita. Es decir una página hecha en HTML puede interpretarse directamente en el navegador sin que esta esté dentro de un servidor.

Para comprobarlo puedes descargar este archivo HTML de ejemplo y ejecutarlo desde tu pc.

A estas páginas se les conoce como páginas estáticas ya que no almacenan datos dinámicos como formularios de registros, de usuario, inicios de sesión, carritos de compra, pasarelas de pago etc…

De las tecnologías o lenguajes del lado del cliente proviene el término front-end que podríamos traducir como lo que está al principio, que es visible y que interactúa con el usuario.

¿Qué es un Front-End?

Es la persona que se encarga del diseño del sitio web, desde la estética, bocetos y mockups, estructura, interfaz y usabilidad de usuario, colores, tipografías, animaciones y efectos, en sí todo lo que a la parte gráfica e interacción del usuario se refiere.

Pero OjO esto no quiere decir que el front-end solo está limitado a la parte gráfica de un sitio web, recuerda que, de los lenguaje del lado del cliente tenemos a Javascript que es un lenguaje de programación puro y duro que nos permite programar la interactividad de una web más allá de las animaciones.

Por ejemplo, con Javascript podemos validar formularios de contacto, enviar datos (No es recomendable hacerlo solo con Javascript), programar eventos y un sinfín de cosas que aunque tendrían cabida en este artículo rompería la intención del mismo, recuerda que el título del post es “Sin tanto tecnicismo”.

Lo que si te soltare es que Javascript ya no está solamente en la web, en la actualidad también es usado para programar la parte lógica de Drones.

Tecnologías o lenguajes del lado del servidor.

que es un front-end y un back-end

Son las que utiliza el back-end para crear o convertir páginas estáticas en dinámicas. PHP, Ruby On Rail, Django son algunos de estos lenguajes y todos ellos son considerados como lenguajes de programación que requiere de un servidor para ser interpretados antes de ser enviados al navegador web del usuario que la solicita.

Para comprobarlo puedes descargar este archivo de ejemplo y ejecutarlo desde tu pc, es el mismo archivo que el anterior pero en PHP, no te asombres si el resultado es una página en blanco.

Esto es así porque PHP requiere de un servidor para ser interpretado sin importar si su contenido es dinámico o no. A estas páginas se les conoce como páginas dinámicas porque pueden almacenar información en bases de datos, de usuarios, compras, registros y luego ser mostradas al usuario cada vez que éste las solicite, modifique o actualice.

De las tecnologías del lado del servidor proviene el término back-end que podríamos traducir como lo que está al final, que no es visible y responde a las peticiones de la interacción del usuario.

¿Qué es un Back-End?

Es el encargado de la parte lógica del sitio web, que se encargará de programar las funciones que tendrá el sitio, o sea nada de interfaces gráficas, programación pura y dura, base de datos, administrar el sitio y su respectivo sistema, procesar datos etc… Y aquí voy con otro OjO, esto no quiere decir que el back-end no sepa como trabajar con HTML o CSS, de hecho este debe saber su estructura al igual que el front-end debe saber los fundamentos o lógica de la programación.

Ahora que ya sabemos que es un front-end y un back-end y de donde provienen dicho términos es hora de dilucidar qué hace cada uno en un proyecto web, aunque estoy seguro que, con lo que has leído hasta ahora “ya debes haberte hecho una idea concisa sobre el tema“.

Hagámonos la idea de que, tu y yo, tenemos un estudio de diseño y programación web, en dicho estudio tenemos dos áreas de producción que debe recorrer nuestro producto para su elaboración, el de frond-end y el de back-end.

Entonces llega el cliente y nos dice que quiere un producto con las siguientes características: tienda on line, con colores amarillo, azul y rojo, que se adapte a todos los dispositivos (responsive), con registro de usuarios, carrito de compras, pasarela de pago y que tenga un blog en donde el pueda hacer sus propias publicaciones.

¿A donde debemos enviar primero la propuesta?. Exacto al área de front-end. Entonces vamos allá.

Área de Front-End.

El front-end reunirá todos los detalles que le haya dado el cliente sobre cómo quiere su sitio web, y este se encargará de llevarlos a un prototipo o wireframe, estos suelen hacerse en papel y lápiz o algún software como Balsamiq, esto para tener una primera idea de como irá el sitio pero sin interpretarlo como diseño final, luego con lo anterior pasará a crear un boceto o mockup  haciendo uso de algún software como photoshop o sketch.

En donde ya plasmara colores, iconos, ubicación de los menú, del botón del carrito de compra y el de registro de usuario, las diferentes páginas de productos y ventas con sus respectivas medidas etc…

Si el cliente está contento y aprueba el diseño es hora de pasar todo a HTML para estructurar la información del sitio, luego con CSS darle los estilos necesarios, tamaños, posiciones, colores, botones, animaciones y con Javascript programar los eventos e interactividad que hubiera a lugar.

Área de Back-End.

El back-end se pondrá manos a la obra con los lenguajes del lado del servidor PHP, Ruby On Rail, Django etc… para programar el dinamismo del sitio, recuerda que el cliente nos pidió una tienda on line, así que el back-end se encargará de crear la lógica para la pasarela de pago, el carrito de compras, registro de usuario y establecerá las conexiones a la base de datos que almacenará toda la información de la tienda on line.

Existe otra figura que literalmente aniquila el proceso que acabamos de realizar en nuestro estudio ficticio de diseño y desarrollo web, me refiero al Full Stack Developer, estos [email protected] son los Einstein, el alfa y omega, el amanecer y atardecer, para para para… Con el Einstein es suficiente.

Bueno fuera de chiste los full stack developer son personas con un conocimiento muy alto en front-end y back-end, fue Laurence Gellert en el año 2012 en hablar con propiedad sobre esta figura, de hecho los términos front-end y back-end también son relativamente nuevos y ambos nacieron como expresiones técnicas e incluso a la fecha no se tiene claro la manera correcta de escribirlos si Front-End, Front End o Frontend lo mismo para el Back-End.

Cabe recalcar que dichos términos sólo aplican para el idioma inglés.

Bien, así vamos llegando al final de este artículo, esperando de mi parte que el mismo te sea de ayuda y haya podido sacar la espinita sobre que es un front-end y un back-end. Recuerda que un poquito más abajo está el área de comentarios por si tienes alguna otra inquietud.

Nos vemos Chauuu! 😉

Lenin Peña

Venezolano hasta los tuétano del 80 pa' acá, papá geek de dos hermosos [email protected], me dedico al Desarrollo y Diseño Web, la asesoría de las TIC, al maravilloso mundo del Blogging, el SEO y el Social Media.

También te podría gustar...

  • Ubaldo Castillo

    Buenas, buen artículo separaste las capas de manera sencilla, lo único es que django y ruby on rail no son lenguajes son framework, django hecho en phyton que si es un lenguaje y ROR (ruby in rail) en ruby

    • Hola Ubaldo, ¿Qué tal está todo?. Si tienes toda la razón, y estoy al tanto de lo que planteas, incluso en el borrador local en vez de los framework tenía los lenguajes, pero como me enfoque en tecnologías web para redactar el artículo al publicarlo decidi cambiarlo. Saludos y un abrazo.

  • Nancydelíz Aristimuño

    Buen artículo, me gusta lo que hace el frontend sin embargo he visto en varias ofertas de trabajo que dicen: Frontend pero colocan además que maneje áreas que son del Backend, lo que veo es que te ofrecen pagarte como sólo Frontend pero te piden que seas un Full Stack Developer :/