WordPress headless: Un enfoque dinámico

by César J. Aquino Maximiliano

Slide 1

Slide 1 text

Usando Angular con WordPress Headless: Un enfoque dinámico César Aquino Maximiliano @cesjam7 Ng Conf Perú 2024

Slide 2

Slide 2 text

Un poco sobre mi - Software developer especializado en desarrollo web - Trabajo diariamente con WordPress y Laravel - En el backend uso PHP y NodeJS y en el frontend uso Angular - En desarrollo mobile hago apps híbridas con IONIC - Profesor de diseño web y programación - Bombero voluntario con grado de Teniente - Papá de 2 hermosos hijos - He sido danzante y ahora intento ser deportista En resumen: Un nerd chévere

Slide 3

Slide 3 text

Optional tag here ¿WordPress Headless?

Slide 4

Slide 4 text

El CMS guarda la información Cuenta con sus propias plantillas Carga la información directamente del admin a la plantilla El CMS guarda la información No se usa la plantilla de WordPress El frontend (desarrollado en Angular u otro) lee la información mediante un api WP Normal WP Headless WordPress normal y headless

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Ya, pero ¿por qué WordPress?

Slide 8

Slide 8 text

WP REST API WordPress ofrece nativamente la posibilidad de crear un API para compartir su información con otra aplicación. Así hacen funcionar su editor en bloques Gutenberg https://developer.wordpress.org/rest-api/ JSON desarrollado con estudiantes para proyecto con IONIC

Slide 9

Slide 9 text

● Flexibilidad en el Diseño ● Componentización ● Rendimiento Optimizado ● Mejor Uso de APIs ● Actualización Asincrónica ● Escalabilidad y Modularidad Ventajas de usar WP con Angular

Slide 10

Slide 10 text

Ahora sí veamos ese enfoque dinámico

Slide 11

Slide 11 text

Imagina seguir usando las plantillas y rutas de WordPress pero con Angular

Slide 12

Slide 12 text

- Ya no usamos API para leer la información - Seguimos usando nuestros archivos del template de WordPress - Los plugins podrán seguir trabajando con nuestro front para ingresar data (como SEO) - Las rutas no las maneja Angular. Seguiremos trabajando con el potente manejo de rutas de WP. - Es una forma divertida de aprender ambos mundos: Armar vistas en Angular y crear plantillas en WP Qué es un WordPress Headless dinámico

Slide 13

Slide 13 text

Aquí irá nuestro Angular

Slide 14

Slide 14 text

¿Y cómo le pasamos la información?

Slide 15

Slide 15 text

{ "tipo": "home", "general": { "titulo": "Blog Ng Conf", "url": "http://localhost:10019" }, "articulos": [] }

Slide 16

Slide 16 text

home.component.ts data: any = {}; constructor() { const dataElement = document.getElementById('app-data'); this.data = JSON.parse(dataElement.textContent || '{}'); } home.component.html

Slide 17

Slide 17 text

{ "tipo": "single", "articulo": {} } No usamos el index.html compilado sí no: - index.php - archive.php - single.php - page.php - 404.php - Author.php etc!