Sitios web estáticos con Gatsby y WordPress

Transcript

1. Sitios estáticos con Gatsby y WordPress WordPress San José Alfredo Bonilla @brolag
2. 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
3. ¿QUÉ ES GATSBY? • Generador de sitios estáticos que utiliza Node.js, GraphQL y React…
4. ¿QUÉ ES GATSBY? • Generador de sitios estáticos que utiliza Node.js, GraphQL y React…
5. ¿QUÉ ES GATSBY? • Generador de sitios estáticos que utiliza Node.js, GraphQL y React…
6. ¿Sitios estáticos? • Regresemos un poco en la historia…
10. ¿Por qué Gatsby?
11. ¿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.
12. ¿Por qué Gatsby? – Desarrollo • Virtual DOM. • One Way Data Binding. • Hot Reloading. • Tecnologías modernas (ES6, ES7). • Bajo acoplamiento con el DOM.
13. ¿Por qué Gatsby? – Desempeño • Capacidades offline. • Alto rendimiento. • Predicción de las páginas más utilizadas. • Performance Budget. • Mejor usabilidad.
14. ¿Por qué Gatsby? – Datos
15. ¿Por qué Gatsby? – Ecosistema • Excelente documentación. • Ambiente local amigable. • Apoyo a la comunidad.
16. ¿Cómo funciona Gatsby?
17. ¿Cómo extendemos la funcionalidad?
18. ¿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.
19. ¿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.
20. ¿Qué podemos utilizar como back end?
21. ¿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.
22. 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
23. ¿Dónde desplegar nuestro código? WordPress • Siteground. • WPEngine. • Google Cloud. • Pantheon. Gatsby • Netlify. • Cloud storage.
24. Demo
25. Muchas Gracias. WordPress San José Alfredo Bonilla @brolag