Yin y Yang de una aplicación: frontend y backend

2/12
Recursos

Aportes 36

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Esto me ayudó a entender como funcionan en conjunto HTML, CSS y JavaScript:

Pequeño aporte 😃

Diferencia entre Next.Js y Nest.Js
.
Next.Js: Es un framework de la librería React.js que nos hace la vida mucho mas fácil.
NestJs: Es un framework de Node.js (Es el que se especifico en el diagrama) este funciona para trabajar sobre Node.js que funciona del lado del servidor con Javascript.
.
¡Espero te sirva! ❤️

Lenguajes de Backend 😃

😎 Entusiasmado por este curso!

El front-end se lo puede denominar como la parte visual o con la que el usuario va a interactuar, este tiene tecnologías como lo son:
HTML, CSS y JavaScript. Entre estas tecnologías tenemos frameworks y librerías como: Foundation, Tailwino, Bootstrap (de parte de css), Angular, Vue, React y Svelte (de parte de JavaScript).
.

Antes de eso tenemos que tener una etapa de diseño donde se van a dar las pautas de diseño antes de ingresar a la etapa de coding de nuestra aplicación. En esta etapa tenemos al UI Desing y al UX Desing, en ellas encontramos tecnologías como Adobe XD, Sketch y Figma (que nos permiten trabajar con el UI Desing).
.

Pero para que una aplicacion sea dinamica y tenga esa parte con la que el usuario no interactúa, tenemos el backend que se puede implementar con diversos lenguajes (con su respectivo framework) como pueden ser: Go, Rust, Python(con Django, Flask o FastApi), JavaScript(con Node.js), Ruby (RubyonRails), Java(Sping), PHP(con Laravel), etc…
.

Jaajjaja un clasico

Las aplicaciones web se componen de

  • Frontend:
  1. Código
    HTML (HyperText Markup Language)
    CSS (cascade stylesheet)
    **JS **(Javascript)
    PHP(Hypertext Preprocessor) permite hacer algunas cosas.
  2. Diseño
    UX (Experiencia de usuario)
    UI (Interfaz del Usuario).
  • Backend:
    Javascript (Node.js)
    PHP
    JAVA
    GO
    Rust
    Ruby
    Python > Fast API, Flask y Django

Aporte

Les comparto mi explicación breve de frontend y backend.

Front End

Se puede entender el frontend como la interfaz de usuario, es decir, la parte de la aplicación con la que el usuario interactúa. El “Frontend” suele ser un conjunto de archivos (HTML, CSS, JS, entre otros) que un servidor nos envía cuando consultamos una dirección WEB, el servidor puede realizar esto gracias a aplicaciones que permiten exponer en red estos archivos.

También podríamos mencionar que el “Frontend” contiene toda la lógica de programación (JS) que se ejecutará del lado del cliente, es decir, cuando consultemos la página o aplicación web habrá código JS corriendo en nuestro navegador.

Backend

Contiene toda la lógica de negocio de nuestra aplicación, la cual se ejecuta dentro de un servidor WEB; como mencionaba el instructor, es el motor de nuestro proyecto.

Una de las tareas más comunes del backend es tratar con datos, por ejemplo:
Si tenemos una aplicación que muestra registros de productos en una página WEB, necesitaremos código en el servidor (Backend) que busque estos registros en una base de datos, los inserte en un template (HTML) y nos envíe a nuestro navegador por medio del protocolo HTTP, o si la dinámica es SPA, que nos envíe estos datos en formato JSON.

El fondo de goku, Omg, desde allí me gusto el video jaja

Esta clase es MAGISTRAL.

Excelente explicación, aquí dejo mi apunte =)

increíble todo el conocimiento con el que cuentan los full stack

2. Yin y Yang de una aplicación: frontend y backend

Existen tecnologías para frontend y para backend:

Derivados son llamados librerías y frameworks:

  1. Frontend:

HTML

CSS: Foundation, Bootstrap, Tailwind.

JS: React.js (librería), Angular, Svelte, Vue.

Tenemos que pasar por la etapa de diseño antes de ir a por el frontend, UI/UX Design —> Adobe XD, Sketch, Figma

UI Design: Rama de diseño donde creamos la interfaz, creamos todo.

UX Design: No nos fijamos en formas y colores, sino dónde para que sea fácil de usar

  1. Backend:
  • JavaScript: Node.js, Next
  • PHP: Laravel
  • Java: Spring
  • Go
  • Rust
  • Ruby: Ruby on Rails
  • Python: Fast API, Flask, Django

Corazoncito si te gustan las habilidades artísticas de Facundo

En programación nosotros denominamos a la carrocería o cara visible como el Frontend y al Motor o la Lógica que hace que todo funcione como el Backend, al unir frontend y backend obtenemos el producto completo.

Me gusto mucho la idea del auto para comprender ambos lados del desarrollo, carrocería / Frontend y motor / backend
A seguir

Mis notas de esta clase 😄

Link de Repo

Resumend de la clase:
Nociones:

  • Si pensamos en el carro: la carrocería y el motor.
  • La carrocería es la parte visible
  • El motor le da funcionamiento.
  • Las apps web son como los vehículos anteriormente mencionados, tienen una carrocería y un motor.
  • En programación, al campo de la carrocería se conoce como frontend y el campo del motor se le conoce como backend.
  • Al unir el frontend y el backend obtenemos al app web completa.

Tecnologías frontend:

  • HTML: el lenguaje de marcado de hipertexto
    Define la estructura de la app web.
  • CSS: las hojas de estilo en cascada
    Define los estilos, la presentación del app web.
  • JS: JavaScript

Define la lógica a la hora de interactuar.
Todas estas tecnologías poseen librerías y frameworks, código hecho por otros para hacer el desarrollo más sencillo.
Frameworks de CSS:

  • Fundation
  • Bootstrap
  • Tailwind
    Frameworks de JS:
  • React.js
  • Angular
  • Svelte
  • Vue

Diseño:
Antes de programar frontend existe la etapa de diseño.

  • UI: interfaz de usuario
    Establecemos colores, tamaños, etc.
  • UX: experiencia de usuario
    Donde debe estar ubicado cada elemento}

Tecnologías backend

  • JavaScript: Node
  • PHP: Laravel
  • Java: Sprint
  • Go
  • Ruby
  • Python: Django

Frontend

  • HTML HyperText Markup Language

  • CCS Cascading Style Sheets

  • JS JavaScript

Los cursos son geniales, pero tambien seria conveniente que hubiera paralelamente al video, el texto del contenido o la lección, ya que en paises menos desarrollados las velocidades de internet son deficientes, una clase de 7 minutos, puede ser vista en 20 minutos porque el video no carga con fluidez!

¡Aguante Balsamiq!

Por si quieren profundizar en los Roles de frontend
Y en los Roles de backend

Hola profe, mil gracias por esta explicaciòn facil de enteder este campo del desarrollo. Estoy iniciando,

Como siempre, este profesor es definitivamente de los mejores de Platzi, no se hace bolas enseñando no necesita de videos de 20 minutos para explicar algo simple.

He diseñado este gráfico, bastante completo más no exhaustivo de lo que hay alrededor de desarrollo web. Discusiones a la mesa. Se vale debatir y cualquier error: mea culpa y a corregirlo si lo amerita.

cómo me inspira a querer más, un profe muy ejemplar

Frontend : Es la interfaz, donde hay consumo de API’s, validaciones, aquí interactúa el usuario final.
Backend : Donde esta la seguridad, database, rendimiento, servers, es lo que el usuario final no ve y es donde todo se corre (“el motor”) para que funcione el website

Vamos a hacer ese Backend con Python en cualquiera de sus tres variables (METELE FACU A ACTUALIZAR ESOS CURSOS DE DJANGO Y DE FLASK)

Aca hay un meme muy explicativo y es totalmente la realidad jejejej
![](