Tweet
Tweet

Slide 1

Slide 1 text

Sitios estáticos con Gatsby y WordPress WordPress San José Alfredo Bonilla @brolag

Slide 2

Slide 2 text

HOLA Soy Alfredo Bonilla. Desarrollador Web. Colaborador en Angular Costa Rica y GDG Pura Vida. Entusiasta de las tecnologías de código abierto. Quejas y sugerencias -> @brolag

Slide 3

Slide 3 text

¿QUÉ ES GATSBY? • Generador de sitios estáticos que utiliza Node.js, GraphQL y React…

Slide 4

Slide 4 text

¿QUÉ ES GATSBY? • Generador de sitios estáticos que utiliza Node.js, GraphQL y React…

Slide 5

Slide 5 text

¿QUÉ ES GATSBY? • Generador de sitios estáticos que utiliza Node.js, GraphQL y React…

Slide 6

Slide 6 text

¿Sitios estáticos? • Regresemos un poco en la historia…

Slide 7

Slide 7 text

2016

Slide 8

Slide 8 text

2019

Slide 9

Slide 9 text

2019

Slide 10

Slide 10 text

¿Por qué Gatsby?

Slide 11

Slide 11 text

¿Por qué Gatsby? - Arquitectura • Arquitecturas desacopladas. • Arquitectura JAM Stack. • Componentización. • Separación de intereses. • Seguridad. • Aprovechamiento de especialidades y fortalezas del equipo de desarrollo.

Slide 12

Slide 12 text

¿Por qué Gatsby? – Desarrollo • Virtual DOM. • One Way Data Binding. • Hot Reloading. • Tecnologías modernas (ES6, ES7). • Bajo acoplamiento con el DOM.

Slide 13

Slide 13 text

¿Por qué Gatsby? – Desempeño • Capacidades offline. • Alto rendimiento. • Predicción de las páginas más utilizadas. • Performance Budget. • Mejor usabilidad.

Slide 14

Slide 14 text

¿Por qué Gatsby? – Datos

Slide 15

Slide 15 text

¿Por qué Gatsby? – Ecosistema • Excelente documentación. • Ambiente local amigable. • Apoyo a la comunidad.

Slide 16

Slide 16 text

¿Cómo funciona Gatsby?

Slide 17

Slide 17 text

¿Cómo extendemos la funcionalidad?

Slide 18

Slide 18 text

¿Cuándo utilizar Gatsby? • Evitar antipatrones metodológicos • Martillo de oro. • Cuando necesitemos server side rendering. • Cuando necesitemos un sitio de contenido con un gran desempeño. • Cuando nuestro contenido no va a actualizarse muy a menudo. • Cuando nuestro equipo de desarrollo es fuerte en JavaScript, React y GraphQL.

Slide 19

Slide 19 text

¿Cuándo NO utilizar Gatsby? • Cuando no necesitemos SSR o mejoras en SEO. • Cuando necesitemos desarrollar una aplicación web con alto índice de ingreso de de contenido (muchos formularios o entradas de datos). • Cuando nuestro equipo de desarrollo no es fuerte en JavaScript.

Slide 20

Slide 20 text

¿Qué podemos utilizar como back end?

Slide 21

Slide 21 text

¿Cuándo utilizar WordPress? • Cuando queremos que nuestros clientes tengan una experiencia de usuario fácil y familiar. • Cuando queremos aprovechar el modelado de datos que nos ofrece WordPress.

Slide 22

Slide 22 text

Gatsby + WordPress: ¿Qué necesitamos? WordPress • WordPress REST API o WPGraphQL. • ACF to REST API • WP REST API Menus Gatsby • gatsby-source-graphql • gatsby-source-wordpress

Slide 23

Slide 23 text

¿Dónde desplegar nuestro código? WordPress • Siteground. • WPEngine. • Google Cloud. • Pantheon. Gatsby • Netlify. • Cloud storage.

Slide 24

Slide 24 text

Demo

Slide 25

Slide 25 text

Muchas Gracias. WordPress San José Alfredo Bonilla @brolag