Want to make creations as awesome as this one?

Presentación para taller del AulaSL

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