Spanish Translation of the summary of the talk “Asko Soukka: Plone and Volto in a Jamstack project” at Plone Conference 2020, taken from Maurits van Rees‘ Weblog.
Traducción del resumen de la charla “Asko Soukka: Plone and Volto in a Jamstack project” en Plone Conference 2020, tomado del Weblog de Maurits van Rees.
Plone and Volto in a Jamstack project
Acerca de Asko Soukka
Soy arquitecto de software en la Universidad de Jyväskylä en Finlandia. He estado usando Plone desde 2004 y GatsbyJS desde 2018.
En el comienzo…
La universidad quería que un sistema de gestión de información de estudiantes los gobernara a todos, pero… cada organización debe hacer sus propias integraciones, utilizando API REST granular con respuestas JSON profundas. Y debería haber guías de estudio de marca, que elaboramos con GatsbyJS. Pero esto no fue suficiente para la parte de Open University. Realmente necesitaban un CMS.
Solución: Guía de Estudio para Open University de la University of Jyväskylä
- GatsbyJS como frontend, ya tenemos 6000 páginas HTML.
- Multiplicado por dos idiomas (Ingles y Finés).
- De las cuales 760 son páginas con Volto CMS.
Backend: Plone & Volto
Usamos Plone en la versión 5.2 y Volto CMS como backend. Con Plone podríamos extender los tipos de contenido sin necesidad de realizar ninguna codificación, en el editor de campo de tipos de contenido. En Volto CMS agregamos widgets de autocompletar con vocabularios personalizados.
Frontend: GatsbyJS JAMStack
En el lado de GatsbyJS, consultamos las páginas conectadas con GraphQL. A continuación un ejemplo fragmento de código fuente Javascript de las consultas con GraphQL:
Renderizamos diseños de Volto CMS con componentes de ReactJS, renderizando bloques individuales. A continuación un ejemplo fragmento de código fuente Javascript de Volto CMS:
JAMStack es una arquitectura moderna para crear sitios web y aplicaciones. El JAMStack significa Javascript , API y HTML marcado. A diferencia de los sitios web creados con WordPress o Drupal, los sitios JAMStack no requieren una base de datos. Incluso puede omitir el servidor web y optar por alojar su sitio utilizando un servicio de almacenamiento de objetos y una red de distribución de contenidos (o CDN).
¿Por qué elegimos GatsbyJS?
Es un generador de sitios basado en ReactJS. Al ser estático, es muy rápido. Puede utilizar varias fuentes como entrada, utilizando una arquitectura de complemento. La búsqueda de datos se realiza con GraphQL. Es fácil comenzar, con documentación completa.
Fui mentor de dos proyectos de Google Summer of Code para el complemento gatsby-source-plone de GatsbyJS. Admite tipos de contenidos predeterminados y la mayoría de tipos de contenidos TTW (through the Web, es decir, personalizados a través de la web usando el editor de tipos de contenidos Dexterity), también bloques Volto CMS. Puede hacer actualizaciones incrementales por fecha de modificación, por lo que es realmente rápido.
La experiencia GatsbyJS
No todo es fácil, se requiere mucha práctica. Desea reemplazar imágenes y enlaces en línea con imágenes y enlaces de GatsbyJS, reemplazar enlaces de archivos con descargas directas.
Usar @plone/volto como dependencia para renderizar bloques parecía una buena idea, pero requería que las sobrescrituras de paquetes web fueran impartibles y no se podían usar para imágenes y enlaces.
No solamente Arcoíris y Unicornios
Las partes más feas de GatsbyJS son:
- El complemento de origen GraphQL no puede almacenar en caché.
- La compilación puede tardar horas y varios gigabytes de memoria.
- El resultado de la compilación es de solo lectura.
- Para mí es difícil seguir el desarrollo de GatsbyJS, especialmente los complementos individuales, porque usan un monorepo.
Los editores pueden trabajar en el sitio durante el día y luego reconstruir el resultado durante la noche.
Referencias
- Asko Soukka: Plone and Volto in a Jamstack project — Maurits van Rees.
- Plone and Volto in a Jamstack project — Plone Conference Online 2020, December 5-13, 2020.
- Dispoasitivas de la charla “Plone and Volto in a Jamstack project” en Github.
¡Haz tu donativo!
Si te gusto este articulo, por favor, ayúdame a seguir escribiendo este tipo de articulo, haciendo donativos en Dólares vía el servicio Paypal haciendo clic aquí o en la siguiente imagen.
También puede realizar su donativo con Bitcoin (BTC) en escaneando el siguiente código QR:
O usando en la siguiente dirección:
bitcoin:13uZUXXqLP3Ct3ksWHXnDqSrbMbhDV9hGz