Asko Soukka: Plone y Volto en un proyecto Jamstack

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

Asko Soukka: Plone and Volto in a Jamstack project Slides

Asko Soukka: Plone and Volto in a Jamstack project Slides

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.

Universidad de Jyväskylä

Universidad de Jyväskylä

Solución: Guía de Estudio para Open University de la University of Jyväskylä

Guía de estudio para Open University de la Universidad de Jyväskylä

Guía de estudio para Open University de la Universidad de 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.

Backend con Plone y Volto

Backend con Plone y Volto

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:

Consultar páginas GatsbyJS conectadas con GraphQL

Consultar páginas GatsbyJS conectadas 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:

 

Renderizar diseños Volto con Componentes ReactJS

Renderizar diseños Volto con Componentes ReactJS

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.

Volto CMS y GatsbyJS

Volto CMS y GatsbyJS

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

¡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.


PayPal - The safer, easier way to pay online!


También puede realizar su donativo con Bitcoin (BTC) en escaneando el siguiente código QR:

¡Ayúdame a continuar Blog de lcaballero.wordpress.com!

O usando en la siguiente dirección:

bitcoin:13uZUXXqLP3Ct3ksWHXnDqSrbMbhDV9hGz

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s