CMS visual... ¿genial para desarrolladores de React? ¡Ahora es el momento!

Rate this content
Bookmark

1. Una breve historia de la gestión de contenido web desde 1996, con herramientas de código y visuales alternativas:
   - La era del "FTP": Editores de código > FrontPage/Dreamweaver
   - La era "monolítica": CMSs simples de CGI/ASP/PHP con tablas grises > WordPress visual > WordPress con ACF
   - La era "actual": CMSs headless <> Herramientas visuales como Wix y WebFlow
2. Por qué ahora es el momento de necesitar un nuevo tipo de CMS
3. ¿Qué es React Bricks?
4. La experiencia para los editores de contenido (explicada por un editor de contenido de un cliente)
5. La experiencia para los desarrolladores (explicada por un desarrollador web de una agencia colaboradora)

8 min
06 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla aborda la necesidad de un producto revolucionario que cambiará la forma en que las personas editan sitios web. Destaca los desafíos enfrentados en la edición visual y las limitaciones de los CMS existentes. La charla también enfatiza los beneficios de los CMS headless para los desarrolladores, pero reconoce el sacrificio de la edición visual. En última instancia, se busca una solución que satisfaga tanto a los editores de contenido como a los desarrolladores.

Available in English

1. La Evolución de la Gestión de Contenido

Short description:

Soy Matteo Frana, fundador de React Bricks. Permíteme mostrarte por qué necesitamos un producto revolucionario que cambiará la forma en que las personas editan sitios web. En 1996, crear sitios web era un proceso diferente. Se introdujeron Frontpage y CGI, pero se perdió la edición visual. CMS como Joomla! y WordPress trajeron de vuelta la edición visual, pero aún enfrentamos desafíos. Wix y Webflow ofrecen una gran experiencia de usuario para la edición visual, pero no son adecuados para sitios web corporativos. Necesitamos una solución que proporcione una imagen corporativa perfecta en píxeles y restricciones para los editores de contenido.

Hola a todos. Bienvenidos a mi charla. Soy Matteo Frana, fundador de React Bricks, y les contaré la historia de la gestión de contenido desde el principio. Así que prepárense y les mostraré por qué necesitamos hoy un producto revolucionario que cambiará la forma en que las personas editan sitios web.

Regresemos a 1996 cuando comencé a crear sitios web, usabas una herramienta como esta para escribir HTML que enviarías a un servidor a través de FTP, ¿y fue un dolor? No. Fue genial, tenía 17 años y tenía clientes que me pagaban por escribir este extraño código, pero la verdad es que esas páginas nunca cambiaron. Así que comencemos nuestro viaje desde HTML.

Cuando surgió la necesidad de editar páginas, apareció Frontpage. En el CD decía sitios web profesionales sin programación. Microsoft ya había agregado GPT, ¿no? Pero podías editar de forma visual con la ventaja adicional de tener temas hermosos pero inutilizables. Así que teníamos edición visual, pero el código que se creaba era un desastre. Por cada cosa que tocabas, agregabas cuatro niveles de tablas anidadas dentro de tablas. Y luego, los clientes querían editar el contenido por sí mismos. Pero si les dabas Frontpage, destruirían el sitio web antes de que pudieras decir Frontpage. Y así llegó CGI. Escribías programas en Perl, ejecutados en el servidor, que escribirían el código HTML por ti. Así que podías crear una interfaz hermosa para permitir que los clientes editaran el contenido en una database y luego leer de esta database y crear HTML, lo cual es poderoso. Y ASP y PHP lo hicieron aún más fácil con el lenguaje de plantillas.

Pero como ves, se perdió la edición visual de Frontpage. Y había otro problema. Estábamos reinventando la rueda cada vez. Así que se crearon CMS, Joomla!, luego WordPress, y volvimos a tener edición visual. Básicamente, HTML guardado en una database, y los usuarios podían escribir el título grande en comic sans verde sobre un fondo rojo. Así que agregamos campos personalizados a WordPress para recuperar nuestros queridos formularios grises. Toda la estructura, todo bien. Y perdimos la edición visual una vez más. Pero la necesidad de edición visual está ahí, por lo que Wix y Webflow la satisfacen con una gran experiencia de usuario. El problema es que no son adecuados para sitios web corporativos porque no necesitamos una plantilla que nos guste, sino la imagen corporativa perfecta en píxeles. Y también necesitamos buenas restricciones para los editores de contenido para asegurarnos de que el design no se pueda romper. Tan pronto como los editores entienden cómo modificar los márgenes y rellenos en Webflow, pueden usar su creatividad para romper el design.

2. El Desafío de los CMS sin Cabeza

Short description:

Los CMS sin cabeza brindan libertad a los desarrolladores en el frontend y datos estructurados en el backend. Sin embargo, se sacrifica la edición visual, lo que lo convierte en una pesadilla para los editores. Necesitamos una solución que beneficie tanto a los editores de contenido como a los desarrolladores.

Así que tenemos una gran edición visual, pero necesitamos alejarnos de ella. Y así llegamos a los CMS sin cabeza, un sueño para los desarrolladores porque somos libres de hacer lo que queramos en el frontend y tenemos datos estructurados en el backend. Pero adivina qué? Volvemos a tener grandes formularios y adiós a la edición visual. Oh sí, tenemos la vista previa instantánea que es como escribir un documento de Word o Pages en un formulario de barra lateral y ver la vista previa en la página. ¿Crees que es una gran experiencia de usuario? Bueno, si esto es un sueño para los desarrolladores, seguramente es una pesadilla para los editores. Por eso necesitamos algo nuevo que sea finalmente bueno tanto para los editores de contenido como para los desarrolladores. Bienvenidos a React Bricks. Creas bloques de contenido como un componente React y los haces editable visualmente usando los componentes de React Bricks como ImageText, ReachText, Repeater y obtienes una edición visual en línea. Y para las otras props que necesitas, por ejemplo, cambiar el padding o elegir el color de fondo, puedes asignar props a controles cibernéticos, solo las props que deseas con los valores que deseas y que forman parte del sistema de diseño. Para cada texto, solo las funciones de renderización de ReachText que deseas habilitar para cada estilo, y tienes JSON estructurado guardado en esa bahía. Los editores de contenido utilizan tus bloques de contenido tipo Lego, lo cual es divertido y no pueden romper el diseño, y no se pierden entre entidades y relaciones abstractas, ven páginas, crean páginas, este es un concepto simple y claro. Entonces, los editores no necesitan nuestro apoyo porque es fácil, tiene Word o Pages, ya saben cómo usarlo. Y no nos olvidamos de incluir funciones de colaboración, multilingüismo, permisos detallados, capacidad para reutilizar contenido en páginas cruzadas, usar datos de fuentes externas como Shopify y mucho más. Pero no me creas a mí, aquí tienes a Giulio Michelon, fundador de la agencia digital Belka. Soy Giulio, el fundador de Belka. En Belka, desarrollamos productos digitales para otras empresas y recientemente tuvimos el placer de trabajar con uno de los principales bancos italianos. Evaluamos diferentes herramientas como Headless o Puerto, pero al final decidimos quedarnos con Reactbricks por un par de razones. La primera es la conformidad con el GDPR, una plataforma completamente europea y la segunda ha sido la facilidad de uso de la herramienta. No esperábamos que fuera tan fácil de adoptar. Tenemos buena experiencia con React, lo cual ayudó, pero al final, el equipo de soporte al cliente fue de gran ayuda para adoptar esta nueva solución. El equipo de marketing de nuestros clientes también está muy contento debido a la facilidad de uso de la herramienta. Es realmente fácil componer páginas, así que al final puedo recomendar realmente Reactbricks como una herramienta para desarrollar nuevos sitios web. Bien, se acabó el tiempo. Estás a solo un minuto de probar Reactbricks. Solo necesitas una cuenta gratuita y ejecutar el comando CLI npx create Reactbricks app en la última versión, y en el sitio web encontrarás un tutorial paso a paso con gamificación para convertirte en un experto de Reactbricks en un par de horas. Por último, acabamos de abrir nuestro programa de socios para agencias, así que contáctame, por favor. Gracias. Gracias. ¡Hagamos que la edición de contenido sea divertida de nuevo!

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
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.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
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
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.