Headless - El Futuro de los CMS Está Aquí

Rate this content
Bookmark

Descubre por qué el headless es la nueva palabra de moda que todos quieren usar. Te llevaré en un rápido recorrido por Storyblok, el primer CMS headless con Visualización en Tiempo Real. ¡Aprenderás por qué miles de usuarios lo aman y qué beneficios te brinda - la comunidad REACT!

8 min
24 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta sesión relámpago presenta el concepto de CMS headless y los beneficios de construir un backend personalizado sin programación extensa. Storyblok ofrece un editor visual con edición visual en tiempo real en React, junto con características como flujos de trabajo, traducciones y versiones. También permite la personalización mediante la definición de componentes, reglas y la construcción de complementos personalizados utilizando React o Vue. La API proporciona acceso al contenido en formato JSON, y se pueden utilizar puentes de JavaScript para incorporar componentes en el producto final.

Available in English

1. Introducción a Headless CMS y Storyblock

Short description:

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. 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. Puedes usar el marco de tu elección. Además, el backend de Storyblock te ofrece flujos de trabajo, traducciones, sistema de aprobaciones, versiones y más cosas que necesitas para tus equipos de contenido y comercializadores. Obtén más información en storyblock.com. Regístrate, inicia sesión y obtén un editor visual con edición visual en tiempo real en React. Esta es la biblioteca de blogs, donde puedes definir todos los componentes. También tienes una sección de contenido con un sistema basado en carpetas, una biblioteca de activos con servicio de imágenes, un editor de imágenes, una guía de inicio, un panel de control y configuraciones.

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.

2. Contenido Visual y Personalización en Storyblock

Short description:

En Storyblock, puedes tener múltiples entornos, enlaces de vista previa y realizar cambios en tiempo real en tu sitio web. Define componentes, reglas e incluso crea plugins personalizados utilizando React o Vue. Accede al contenido en formato JSON a través de la API y utiliza puentes de JavaScript para construir los componentes en tu producto final.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 
React Summit 2022React Summit 2022
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

Slides & more
React Finland 2021React Finland 2021
24 min
React Bricks: a CMS with visual editing based on React components
Headless CMSs are great for developers, but not for content creators.
React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works!

Workshops on related topic

React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
WorkshopFree
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Crash Course into Remix & Storyblok
WorkshopFree
You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: - Introduction to Remix, atomic design & the headless world- Environment setup- Creating pages and understanding how the dynamic routing splat routes works- Future tips and Q&A
Prerequisite(s): Node.js installed, GitHub account.
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
WorkshopFree
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.