Visual CMS… cool for React devs? Now’s the time!

Rate this content
Bookmark

1. A brief history of web content management since 1996, with alternating code and visual tools:
   - The “FTP” era: Code editors > FrontPage/Dreamweaver
   - The “monolithic” era: CGI/ASP/PHP simple CMSs with gray tables > WordPress visual > WordPress with ACF
   - The “current” era: Headless CMSs <> Visual tools like Wix and WebFlow
2. Why now’s the time we need a new kind of CMS
3. What is React Bricks
4. The experience for content editors (explained by a customer’s content editor)
5. The experience for developers (explained by a partner agency’s web developer)

8 min
06 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Talk discusses the need for a revolutionary product that will change the way people edit websites. It highlights the challenges faced in visual editing and the limitations of existing CMSs. The Talk also emphasizes the benefits of headless CMSes for developers but acknowledges the sacrifice of visual editing. Ultimately, a solution is sought that caters to both content editors and developers.

Available in Español

1. The Evolution of Content Management

Short description:

I am Matteo Frana, founder of React Bricks. Let me show you why we need a revolutionary product that will change the way people edit websites. Back in 1996, creating websites was a different process. Frontpage and CGI were introduced, but visual editing was lost. CMSs like Joomla! and WordPress brought visual editing back, but we still faced challenges. Wix and Webflow offer great UX for visual editing, but they are not suitable for corporate websites. We need a solution that provides a Pixel Perfect corporate image and constraints for content editors.

Hello, everybody. Welcome to my talk. I am Matteo Frana, founder of React Bricks, and I'm gonna tell you the story of content management since the very beginning. So get ready and I will show you why we need a revolutionary product today that will change the way people edit websites.

Back to 1996 when I started creating websites, you used a tool like this to write HTML that you would send to a server via FTP and was it a pain? No. It was great, I was 17 and they had customers who paid me to write this strange code, but the fact is those pages never changed. So let's start our journey from HTML.

When the need to edit pages became a thing, Frontpage appeared. On the CD you read professional websites without programming. Microsoft added GPT already, no? But you could edit in a visual way with the added bonus of beautiful unusable themes. So we had visual editing, but the code created was a mess. For anything you touched, you added four levels of nested tables inside of tables. And then, customers wanted to edit the content by themselves. But if you gave them Frontpage, they would destroy the website before you could say Frontpage. And so came CGI. You wrote programs in Perl, executed on the server, that would write the HTML code for you. So you could create a beautiful interface to let customers edit content on a database and then read from this database and create HTML, which is powerful. And ASP and PHP just made it easier with the templating language.

But you see, the visual editing of Frontpage was lost. And there was another problem. We were reinventing the wheel every time. So CMSs were created, Joomla!, then WordPress, and we had visual editing again. Essentially, HTML saved on database, and users could write the big green comic sans title over red background. So we added custom fields to WordPress to get back our beloved gray forms. All structure, all good. And we lost visual editing once again. But the need for visual editing is there so Wix and Webflow satisfy it with a great UX. The problem is that they are not suitable for corporate websites because we don't need a template we love, but the Pixel Perfect corporate image. And we need also good constraints for content editors to be sure that the design can't be broken. As soon as editors understand how to touch margins and paddings in Webflow they can use their creativity to break the design.

2. The Challenge of Headless CMSes

Short description:

Headless CMSes provide freedom for developers on the frontend and structured data on the backend. However, visual editing is sacrificed, making it a nightmare for editors. We need a solution that benefits both content editors and developers.

So we have great visual editing, but we need to move away from it. And so we come to headless CMSes, a dream for developers because we are free to do whatever we want on the frontend and we have structured data on the backend. But guess what? We are back to great forms and bye-bye to visual editing. Oh yeah, we have the instant preview which is like writing a Word or Pages document in a sidebar form and see the preview on the page. You think it's a great UX? Well, if this is a dream for developers it is surely a nightmare for editors. This is why we need something new which is finally good for both content editors and developers.

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.