DE 0 A DESPLEGAR TU WEBAPP

DE 0 A DESPLEGAR TU PRIMERA WEBAPP

En este curso podrás aprender desde las bases de la programación web hasta el conocimiento necesario para tener tu aplicación desplegada en la web.

index

INTRO

BACKEND DEV

PROD

WEBAPP

FULLSTACK

A PROGRAMAR

SEPARACIÓN F/B

HTTP

¿Y Después?

BASES DE DATOS

FRONTEND DEV

FIN

¿Cómo funcionan?

01

Introducción

02

¿Qué es una WebApp?

• Diferenciar una WebApp de una normal
• WebApp o Aplicación de escritorio
• ventajas de cada una

aplicación software alojada en un servidor remoto a la cual podemos acceder mediante un buscador web.

03

¿Separación del Frontend y Backend?

Frontend

Backend

• Base de datos, Lógica, Triggers
• Gestión y creación de APIs
• Seguridad, Rendimiento
• ...

• Estructura de la página
• Estilos, animaciones, Responsive
• Botones, Carruseles, formularios
• Recepción de datos mediante APIs
• Accesibilidad
• ...

¿Por qué separarlos?

Hoy en día reina la especialización, el desarrollo web es mucho más amplio de lo que parece, y tener profesionales muy buenos sobre todas las áreas, es muy complicado, si no imposible. También evitamos malas prácticas evitando usar los datos privados desde el Frontend que es lo que maneja el usuario, por lo que además ganamos seguridad (SQL-Injection).

04

¿Qué implica ser Frontend Dev?

<Piramide Del Front/>

03

01

02

¿CÓMO TRABAJA?

El Frontend dev puede sentirse identificado con el diseño de la interfaz y pensar como estructurar la APP, estilos, colores, animaciones... Pero de pendiendo de la metodología, tamaño y presupuesto, el papel del desarrollador Frontend se dividie en tres profesionales diferentes:

hOY EN DÍA

¿QUÉ NECESITA SABER?

• Recibir y enviar información al Backend (Protocolo HTTP)
• Formularios
• Parsear datos
• Preprocesadores CSS (SASS)
• Modularización en componentes
• Rendimiento
• Programación (webs dinámicas)
• Accesibilidad

• Frameworks
• buenas prácticas
• Clean code
• Clean architecture
• metodologías de desarrollo TDD, BDD, DDD
• Fundamentos de la web
• Posicionamiento SEO
• control de versiones como git, Github

• Diseñador UX
• Maquetador
• Desarrollador

03

01

02

05

¿Qué Implica ser backend dev?

Pilares del Backend actual

01

03

02

ESCALABILIDAD

DATA

SEGURIDAD

• Minimizar la redundancia.
• Eliminar la inconsistencia.
• Minimizar cualquier tipo de pérdida de datos.

• Arquitectura del Software.
• Patrones de diseño.
• Código limpio.
• TEST, TESTS, TESTS.

• Facilidad para ampliar el producto.
• Desacomplamiento en la medida de lo posible.
• *Cloud, IoD (Infra on Demand)*.

• Middlewares de authenticación.
• Encriptación.
• Protección de datos.

01

03

02

06

FULLSTACK === ¿TOdo en uno?

Quien mucho abarca poco aprieta.

Si quieres ir rápido ve solo, si quieres llegar lejos ve acompañado

07

HTTP, eL whatsapp de las webApps

PROCESS REQUEST

REQUEST

BACKEND

FRONTEND

RESPONSE

PROCESS RESPONSE

STATUS

MÉTODOS

HEADERS

Diferentes ATRIBUTOS de las RESPUESTAS

Diferentes ATRIBUTOS de las PEticiones

DATA

BODY

PARAMS

08

Bases de datos

RELACIONALES

NO RELACIONALES

1. Mayor rendimiento en operaciones CRUD.

1. Mayor facilidad para establecer relaciones entre entidades.

2. Documentos individuales.

2. Organización de tabla de excel.

3. Adaptabilidad.

3. Robustez, consistencia.

MongoDB, Redis, Elasticsearch

mySQL, MariaDB, PostgreSQL

ORM, ODM

DRIVERS NATIVOS

• Facilidad de USO
• Integraciones con FRAMEWORKS
• MAYOR ROBUSTEZ

• Más FIELES A LA BASE DE DATOS
• MAYOR RENDIMIENTO EN OPERACIONES BÁSICAS

09

DOCKER, DESPLIEGUE, PRODUCCIón

EN MI ORDENADOR FUNCIONABA...

• Virtualización de aplicaciónes
• No tener la necesidad de tener las bases de datos corriendo en segundo plano.
• Robustez, consistencia.

DESPLEGAR, PRODUCIón, EL MUNDO REAL

• Automatización
• PaaS, IaaS
• Problemas del Mundo Real

Despliegua tus aplicaciones free

Las manos van al pan, ¡A PROGRAMAR!

¡La mejor forma de aprender a solucionar problemas es enfrentandose a ellos tú mismo!

¿Qué hay después?

Arquitecturas

Patrones de diseño

Buenas prácticas

Otras tecnologías

roadmap.sh/frontend

roadmap.sh/backend

GRACIAS POR ASISTIR

Aula de Software Libre

@AulaSL

JUANJO TRENADO

Adrián Leiva

Coordinación del ASL Frontend Developer Student

Delegado de Infrastructura del ASL Backend Developer Trainee at Genially

@Juanjotrenadoz

@leivaa21_