¡Por el poder de Headless!

Rate this content
Bookmark

Se me revelaron fabulosos poderes secretos el día que descubrí Jamstack y dije "¡Por el poder de Headless, tengo el poder!"


Descubre las características clave de cualquier CMS y por qué Headless es la nueva palabra de moda que todos quieren usar. Te llevaré en un viaje a través de la tierra de los CMS headless y te mostraré por qué deberías considerar un CMS headless para tu próximo proyecto.

8 min
14 May, 2021

Video Summary and Transcription

Los CMS headless ofrecen libertad de elección en los frameworks de front-end y las APIs de backend, centrándose en la experiencia del usuario y la integración con soluciones de terceros. Proporcionan una buena experiencia para los desarrolladores y son una parte importante del ecosistema web. Un CMS headless permite la estructuración del proyecto, la selección de tecnología/API y la extensión de la interfaz de usuario. Considera características como la traducción, la configuración del flujo de trabajo, la programación de contenido, la experiencia de edición y las capacidades de integración al elegir un CMS.

Available in English

1. Introducción a los CMS sin cabeza

Short description:

Los CMS sin cabeza son desacoplados, lo que te brinda libertad de elección en los frameworks de front-end y las API de backend. Se centran en la experiencia del usuario y permiten la integración con soluciones de terceros. Brindan una buena experiencia para los desarrolladores y se están convirtiendo en una parte importante del ecosistema web. Los CMS sin cabeza son el siguiente paso en la evolución del desarrollo web, ofreciendo las características deseadas sin dictar cómo construir un sitio web. Storyblock, un CMS sin cabeza, se centra en el usuario y no está limitado a los desarrolladores. Permite la libertad de elegir la pila tecnológica.

Hola a todos, espero que estén disfrutando de la conferencia hasta ahora. Mi nombre es Samuel Snowcombe y estoy aquí para hablar sobre Headless, un fabuloso secreto poderes que me fueron revelados el día que descubrí el JAMstack y el Headless. Y básicamente este es el subtítulo de esta charla donde hablaré sobre los Headless CMS y si tienen alguna pregunta en el futuro pueden seguirme en Twitter y preguntar en cualquier momento.

Entonces, ¿qué son los CMS sin cabeza y cuál es la diferencia con los CMS monolíticos? Para resumirlo en 3 puntos, diría que están desacoplados, por lo que no te dicen qué framework de front-end debes usar y qué API debackend debes consumir. Te brindan libertad de elección y libertad en tus decisiones y en lo que te gusta. Además, no estás limitado a las integraciones que ofrecen, sino que puedes integrar tu aplicación, sitio web, cualquier cosa que desees, con soluciones de terceros. También se centran en el sistema de gestión de contenido y en la gestión, por lo que pueden centrarse en la experiencia del usuario. Están construyendo una aplicación en la que estás construyendo y colaborando en tu contenido. Y esta aplicación se actualiza diariamente y hacen una nueva iteración que la mejora cada vez más sin ningún requisito de tiempo por parte de los desarrolladores. Y además de eso, te brindan una muy buena experiencia para los desarrolladores ya que puedes utilizar cualquier API de gestión de contenido o cualquier API que desees y luego trabajar con las herramientas que te gustan y con las que quieres trabajar. Y también el punto válido es que los CMS tradicionales ya se están moviendo en esta dirección también. Así que están demostrando que los Headless realmente son una cosa y creo que serán una parte muy importante del ecosistema web en los próximos al menos 10 años.

Eso me lleva a la evolución. En mi opinión, el CMS sin cabeza es nuestro próximo paso en la evolución, que también es un poco un retroceso, pero finalmente está haciendo lo correcto. Finalmente hacemos bien la web. Con el JAMstack y todas esas cosas, el CMS sin cabeza es la parte que faltaba que queríamos ayudar para el framework como NakedJS o LinuxJS. Entonces, al principio solo teníamos un archivo. Lo colocamos en el servidor directamente a través del protocolo FTP y luego creamos algún tipo de sistema de versiones para colocar el contenido directamente en el sitio web o de alguna manera versionarlo y luego también tenemos estos poderosos CMS monolíticos que se colocaron en sus propios servidores. Luego finalmente tienen características como la autoridad de contenido, simulación de internet, incluso los modos de vista previa y diferentes cosas. Pero al final solo queríamos esas características. No queríamos que esos CMS me dijeran cómo debería construir mi sitio web. Esto es lo que hacen los CMS sin cabeza. Te brindan toda la libertad de esas características. Son necesarias para los editores de contenido, pero aún te brindan la libertad de un desarrollador para elegir y construir un sitio web con lo que necesitas. Entonces, no es, y Storyblock no es un CMS sin cabeza y no es una solución base de datos. No es solo para desarrolladores. Está muy enfocado en el usuario y los editores de contenido, los especialistas en marketing. Todos ellos son los usuarios finales de Storyblock en algún momento. Entonces, no se trata de elegir tu pila tecnológica. No te está limitando.

2. Beneficios de un CMS sin cabeza

Short description:

Un CMS sin cabeza te brinda la libertad de estructurar tu proyecto como necesites, elegir tu tecnología o API, y extender la interfaz de usuario. Te permite enfocarte en la experiencia del usuario sin preocuparte por la seguridad, las actualizaciones de la interfaz de usuario o el rendimiento de la base de datos. Al elegir un CMS, considera características como la traducción, la configuración del flujo de trabajo, la programación de contenido, la experiencia de edición y las capacidades de integración. Únete a mi masterclass para aprender cómo construir un sitio web con un CMS sin cabeza, React y Next.js, y experimentar la edición y traducción en tiempo real.

Si alguien te está limitando, no es el CMS sin cabeza. Y no requiere de ti ninguna actualización. Por lo tanto, tendrás una actualización de tu aplicación y de la herramienta que estás utilizando para la gestión del contenido casi todas las semanas o días.

Entonces, los storyblocks como el CMS sin cabeza te brindan la libertad de estructurar tu proyecto como necesites. Si necesitas una estructura plana o una estructura de carpetas, si necesitas diferentes diapositivas y quieres construirlo a partir del principio del diseño atómico como un principio o estructura contextual, depende de ti. Elegirás tu tecnología o API. Incluso puedes extender la interfaz de usuario. Por lo tanto, no solo restringe las características que ofrecen, sino que ofrecemos.

Y finalmente, tienes tiempo para invertir todos los recursos de los clientes en la solución. En lugar de construir el ecosistema alrededor de la solución, puedes centrarte realmente en la experiencia del usuario de tu sitio web o aplicación. Entonces, storyblock, en lugar de eso, se encarga incluso de más cosas como la seguridad, actualizando la interfaz de usuario a las últimas tendencias, actualizando el rendimiento de la base de datos, que básicamente obtienes de forma gratuita sin ni siquiera darte cuenta porque no necesitas cambiar nada. No hay cambios estructurales y de repente obtienes un sistema más rápido porque la actualización ya se entregó.

Entonces, si estás eligiendo un nuevo CMS, definitivamente debes elegir algunas características. Y debes pensar en el futuro y en las características que necesitarás en tu sistema. Por ejemplo, cómo lo traducirás. Entonces, qué tipo de estrategias tienes para la instalación. ¿Qué tipo de flujo de trabajo puedes configurar? ¿Tienes algún evento correcto? Puedes restringir algunas áreas. ¿Puedes programar contenido para el futuro o un conjunto de contenido juntos? ¿Puedes crear pipelines donde haya un contenido congelado para poder hacer algunas ediciones y haya una etapa donde el contenido esté congelado y estés 100% seguro de que todo es correcto. ¿Cómo es la experiencia de edición? ¿Hay alguna forma de previsualizar tu contenido en borrador? ¿O tienes algún contexto para tu experiencia de edición en tiempo real? ¿Cómo puedes integrar y extender las cosas? Y esta lista continúa y continúa y continúa.

Entonces, si quieres saber más sobre cómo construir algo con el CMS sin cabeza y React y Next.js juntos, visita mi masterclass el próximo lunes donde construiremos un sitio web utilizando Storyblock. Y podrás descubrir cómo crear una experiencia de edición en tiempo real donde puedes hacer clic y cambiar las cosas. Puedes copiar y pegar. Y cómo funciona esto dinámicamente sin presionar el botón de guardar. Y cómo puedes traducir y construir el sitio web juntos. Entonces, cómo puedes construir tu primer sitio web con CMS sin cabeza, con Next.js, y eso será cubierto en mi masterclass que puedes visitar de forma gratuita en React Summit Remote el próximo lunes después de esta charla. Nos vemos allí, y espero que hayas disfrutado de la charla relámpago y espero que revises los CMS sin cabeza y también Storyblock. Eso es todo. ¡Nos vemos! Disfruta de la conferencia.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn