Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sitios web estáticos con Gatsby y WordPress

Sitios web estáticos con Gatsby y WordPress

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

August 28, 2019
Tweet

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…

  7. 2016

  8. 2019

  9. 2019

  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