DE 0 A DESPLEGAR TU WEBAPP
New Team
Created on October 17, 2022
Presentación para taller del AulaSL
More creations to inspire you
TALK ABOUT DYS WITH TEACHER
Presentation
CIRQUE DU SOLEIL
Presentation
LAYOUT ORGANIZATION
Presentation
TALK ABOUT DYS TEACHER-TEACHER
Presentation
PRODUCT MANAGEMENT IN MOVIES & TV SHOWS
Presentation
ESSENTIAL OILS PRESENTATION
Presentation
VEGETARIANISM
Presentation
Transcript
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.
DE 0 A DESPLEGAR TU PRIMERA WEBAPP
index
FIN
¿Y Después?
A PROGRAMAR
PROD
BASES DE DATOS
HTTP
FULLSTACK
BACKEND DEV
FRONTEND DEV
SEPARACIÓN F/B
WEBAPP
INTRO
¿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.
- Base de datos, Lógica, Triggers
- Gestión y creación de APIs
- Seguridad, Rendimiento
- ...
Backend
Frontend
- Estructura de la página
- Estilos, animaciones, Responsive
- Botones, Carruseles, formularios
- Recepción de datos mediante APIs
- Accesibilidad
- ...
¿Separación del Frontend y Backend?
03
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).
¿Por qué separarlos?
04
¿Qué implica ser Frontend Dev?
<Piramide Del Front/>
- Diseñador UX
- Maquetador
- Desarrollador
03
02
01
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:
¿CÓMO TRABAJA?
03
- 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
¿QUÉ NECESITA SABER?
02
- 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
hOY EN DÍA
01
05
¿Qué Implica ser backend dev?
03
- Middlewares de authenticación.
- Encriptación.
- Protección de datos.
SEGURIDAD
03
Pilares del Backend actual
02
01
- Minimizar la redundancia.
- Eliminar la inconsistencia.
- Minimizar cualquier tipo de pérdida de datos.
DATA
02
- 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)*.
ESCALABILIDAD
01
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 RESPONSE
PROCESS REQUEST
RESPONSE
REQUEST
BACKEND
FRONTEND
HEADERS
STATUS
DATA
Diferentes ATRIBUTOS de las RESPUESTAS
BODY
MÉTODOS
PARAMS
Diferentes ATRIBUTOS de las PEticiones
08
Bases de datos
MongoDB, Redis, Elasticsearch
3. Adaptabilidad.
2. Documentos individuales.
1. Mayor rendimiento en operaciones CRUD.
mySQL, MariaDB, PostgreSQL
3. Robustez, consistencia.
2. Organización de tabla de excel.
1. Mayor facilidad para establecer relaciones entre entidades.
NO RELACIONALES
RELACIONALES
DRIVERS NATIVOS
ORM, ODM
- Más FIELES A LA BASE DE DATOS
- MAYOR RENDIMIENTO EN OPERACIONES BÁSICAS
- Facilidad de USO
- Integraciones con FRAMEWORKS
- MAYOR ROBUSTEZ
09
DOCKER, DESPLIEGUE, PRODUCCIón
- Virtualización de aplicaciónes
- No tener la necesidad de tener las bases de datos corriendo en segundo plano.
- Robustez, consistencia.
EN MI ORDENADOR FUNCIONABA...
- Automatización
- PaaS, IaaS
- Problemas del Mundo Real
DESPLEGAR, PRODUCIón, EL MUNDO REAL
Despliegua tus aplicaciones free
¡La mejor forma de aprender a solucionar problemas es enfrentandose a ellos tú mismo!
Las manos van al pan,¡A PROGRAMAR!
¿Qué hay después?
roadmap.sh/backend
Otras tecnologías
roadmap.sh/frontend
Patrones de diseño
Buenas prácticas
Arquitecturas
GRACIAS POR ASISTIR
@AulaSL
@Juanjotrenadoz
Coordinación del ASLFrontend Developer Student
JUANJO TRENADO
@leivaa21_
Aula de Software Libre
Delegado de Infrastructura del ASLBackend Developer Trainee at Genially
Adrián Leiva