Headless - El Futuro de los CMS Está Aquí

Hola a todos, y bienvenidos a esta sesión relámpago sobre el mundo headless, sistemas de gestión de contenido, Jamstack y todo lo desacoplado en la web.

Mi nombre es Samuel Snapko y soy el jefe de relaciones con desarrolladores en Storyblock, que es uno de los CMS headless que existen, por supuesto, y también el orgulloso patrocinador del React Advance. Y estoy muy contento de que hayas encontrado tiempo para ver este video e invertir estos cinco o seis minutos para descubrir más sobre el futuro del sistema de gestión de contenido.

Entonces, ¿de qué se trata toda esta emoción por lo headless? Se trata de construir tu propio backend personalizado sin necesidad de codificar mucho. Así que puedes construir el sistema atómico como desees, configurar los diferentes componentes, todo eso. Pero por otro lado, puedes usar el marco de tu elección.

Si saltara aquí a la guía de inicio, podrías ver que puedes recorrer todo eso cosas. No tengo ninguna diapositiva, solo te muestro el sitio web donde puedes encontrarlo. Luego, por supuesto, configurarás y crearás el componente según el diseño atómico y todos tus enfoques que desees, similares a como lo haces en tu marco favorito, y luego puedes usarlo con el marco de tu elección. Así que aquí, por ejemplo, en estos ejemplos, tenemos diferentes ejemplos para NexGIS, Next, Gatsby, React. Por supuesto, Remix y todas esas cosas ya son compatibles, por lo que todos los principales marcos de React están disponibles. Simplemente puedes usar la misma configuración en el backend con múltiples marcos en el futuro, en el frontend, y elegir tu favorito. Y eso es todo lo que implica lo headless. Por supuesto, además de eso, el buen backend te ofrece flujos de trabajo, traducciones, sistema de aprobaciones, versiones y más cosas que necesitas para tus equipos de contenido y para tus comercializadores, para que puedan trabajar fácilmente con todo eso. Obtén más información en storyblock.com.

Pero, ¿de qué se trata exactamente? Así que si te registras e inicias sesión, llegarás a la aplicación de Storyblock, donde podrás elegir tus espacios favoritos. Puedes ponerlos, puedes administrarlos, pero también puedes crear fácilmente aquí una nueva demo, como React advanced. Acabo de crearla ahora mismo. Y en esta demo, luego puedes jugar con todas esas cosas. Entonces, ¿qué es posible con esto? ¿Por qué? ¿Y cómo? ¿Y por qué deberías hacerlo? Y te digo, obtendrás un editor visual con todas las funciones geniales de edición visual en tiempo real en React. Básicamente, tan pronto como escribas, verás el cambio. Así que sí, estas son todas las partes. Esta es la biblioteca de blogs, donde puedes definir todos los componentes. Y luego tenemos, por supuesto, el contenido, donde tienes un sistema basado en carpetas en el que crearás cosas diferentes. Aquí podemos ver ahora mismo, por supuesto, un proyecto de muestra. Y en el proyecto de muestra, tienes diferentes carpetas, puedes etiquetar cosas, tienes una biblioteca de activos con servicio de imágenes, donde puedes cambiar este tipo de imágenes. También puedes tener un editor de imágenes, donde puedes retocar tus imágenes directamente en el sistema. Por lo tanto, no necesitas tener una herramienta adicional. Por supuesto, aquí tienes una guía de inicio, tienes un panel de control donde verás una vista general de todo lo que sucede en tu sistema, donde verás todas tus últimas ediciones, las tareas pendientes para ti y otras cosas. Por supuesto, tienes configuraciones donde configurarás diferentes tokens, cómo obtener contenido de borrador para borrador o para el sitio web público.

Puedes tener múltiples entornos, puedes tener múltiples enlaces de vista previa, si estás haciendo un rediseño. Todo eso es posible directamente en Storyblock. Pero, ¿de qué se trata el contenido visual? Entonces, aquí, si entro en mi página de inicio, que en este caso representa la página de índice y como la hemos llamado inicio, verás que aquí ya veo una vista previa de mi sitio web. Y no es solo una vista previa aleatoria. Este es mi sitio web real que está conectado y se está ejecutando en este caso, en una de las plataformas como Versal, Netlify, AWS, o tu propio servidor. Y aquí puedes agregar múltiples enlaces de URL entre los que puedes cambiar y puedes construir las URL. Aquí, en el lado derecho, ves los componentes que defines, no nosotros. Tú definirás qué significa exactamente aquí. Entonces, en este caso, si voy y hago clic aquí, veo que tengo aquí múltiples pestañas y hay, por supuesto, campos como titulares, subtitulares, botones. Puedes definir las reglas entre ellos y todas esas cosas. También puedes ampliar y crear tus propios plugins personalizados para ello utilizando React o Vue, tú decides. Pero de lo que estaba hablando, esa parte de edición visual, así que aquí veo que si hago clic y voy aquí y cambio el título de la demo a React Advanced, entonces verás que en tiempo real, veo la vista previa. Lamento que mi computadora esté un poco lenta debido a OBS. Ahora puedes hacer más vistas previas, puedes desplazarte hacia abajo, puedes hacer clic en diferentes partes del sitio web, donde por ejemplo veo aquí que este es el banner y aquí se abre directamente el banner. Al hacer clic en los tres puntos, puedo mover los componentes e incluso tengo la posibilidad de cambiar los estilos, por ejemplo, aquí puedo cambiar el color del texto a oscuro y en segundos lo verás. Todas las configuraciones aquí. Eso no es responsabilidad nuestra. Pero tú, como desarrollador, tienes el poder de configurar todo esto, establecer todas estas configuraciones locas y realizar los cambios rápidamente. Por ejemplo, aquí hice un poco de desenfoque y también oscuro, y luego fui y cambié el estilo a, digamos, claro nuevamente y obtendrás esto como adyacente. Aquí, si quiero ir a mi contenido publicado, puedo ver qué tipo de borrador JSON o publicación obtendré de mi API y luego, utilizando las bibliotecas de npm, los puentes, cómo los llamamos puentes de JavaScript, los obtendrás del contenido. Por lo tanto, obtendrás el contenido en la estructura JSON como esta y según eso construirás exactamente el componente en tu producto final. ¿Cómo hacer eso? No tengo tiempo en siete minutos para hacerlo, por eso deberías ir definitivamente a los centros de tecnología de Storyblock que hemos creado y aquí tenemos tecnología para React donde ya puedes encontrar tutoriales para NexGIS, React, Gatsby, también Remix, solo ve y busca en el sitio web. Incluso hemos creado recientemente el NexGIS ultimate, donde ya hemos creado un artículo de cinco partes o los primeros cinco pasos sobre cómo construir todo desde cero hasta un sitio web internacional. Todo eso utilizando Storyblock y tu framework favorito NexGIS o React. Y todo eso, depende completamente de ti. Solo ve a storyblock.com, descubre más, síguenos en Twitter o sigue a uno de nuestros geniales desarrolladores como Facundo Giuliani u otros que se especializan en React y encontrarás aún más. Muchas gracias y nos vemos pronto en persona. Eso es todo de mi parte. Adiós.