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)

FAQ

Matteo Frana es el fundador de React Bricks, una herramienta que facilita la edición visual de contenido en sitios web.

Desde escribir HTML y enviarlo mediante FTP hasta el uso de herramientas como Frontpage y CMS como WordPress y Joomla!, la creación de sitios ha evolucionado hacia interfaces más visuales y fáciles de usar, aunque con ciertas limitaciones en la edición visual que React Bricks busca superar.

Aunque ofrecen una buena experiencia de usuario, no son adecuados para sitios web corporativos que necesitan mantener una imagen corporativa precisa y ofrecen demasiada libertad que puede romper el diseño.

React Bricks permite crear bloques de contenido como componentes React que son visualmente editables y proporciona un sistema que evita que los editores rompan el diseño, manteniendo la integridad del estilo corporativo.

Giulio Michelon destaca la conformidad de React Bricks con el GDPR, su facilidad de uso y un equipo de soporte al cliente efectivo, lo que facilita la adopción de la herramienta en su agencia digital, Belka.

Para comenzar a usar React Bricks, solo es necesario crear una cuenta gratuita, ejecutar el comando CLI 'npx create Reactbricks app' en la última versión y seguir un tutorial paso a paso disponible en su sitio web.

El programa de socios de React Bricks está diseñado para agencias que desean colaborar y aprovechar las herramientas y soporte de React Bricks para desarrollar sitios web.

Matteo Frana
Matteo Frana
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.

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

Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.
Edición de video en el navegador
React Summit 2023React Summit 2023
24 min
Edición de video en el navegador
Top Content
La edición de video es un mercado en auge con influencers siendo toda la rabia con Reels, TikTok, Youtube. ¿Sabías que los navegadores ahora tienen todas las APIs para hacer edición de video en el navegador? En esta charla voy a darte una introducción sobre cómo funciona la codificación de video y cómo hacerla funcionar dentro del navegador. Spoiler, ¡no es trivial!

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
React Summit 2023React Summit 2023
71 min
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.
Curso intensivo sobre Astro y Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables.
En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza.
Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones.
- Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.