Content Modeling for React Developers

Rate this content
Bookmark

In today's world, it's no surprise that "Content is King". It helps in telling a story and helping you reach out to more people. Most of the time, developers aren't the ones managing this content. Hence, modeling content efficiently becomes crucial. Doing it well makes the content delivery process smooth for the team. But how does one go on with modeling content? What are the things that one should take care of? I'll answer such questions in this talk, and share my approach to content modeling as a React developer.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Haushal is a Developer Advocate at Contentful. Originally from India, he now resides in Berlin and has been working with Contentful recently, experimenting with various technologies and frameworks.

During the Black Friday sale, Contentful observed a massive increase in API requests. GraphQL requests increased by 550%, and the content delivery API (CDA) saw a 73% increase.

Content modeling is a method used to structure and organize code, making it easier for content creators and designers, who may not have technical expertise, to manage and create content efficiently.

Haushal has recently taken up cooking as a hobby and is integrating this interest into his work by developing a web app for a Cookbook, where he is applying his skills in content modeling.

Haushal's content model for the Cookbook app includes types such as recipes, which consist of a title, description, images, ingredients, and cooking instructions. Ingredients are treated as a separate content type to enhance reusability and are linked to recipes.

Content governance involves setting up rules and policies that dictate how content is created, managed, and published within an organization, ensuring consistency and quality control across all content.

Haushal considers multiple platforms for deploying content, including web, mobile, and potentially voice-enabled applications, to ensure a broad and effective distribution of content.

It's acceptable to start with an incomplete content type because it allows for iterative improvements based on feedback and deeper understanding, leading to a more refined and effective content model over time.

Harshil Agrawal
Harshil Agrawal
7 min
23 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.

1. Introduction and Background

Short description:

Hi everyone, I'm Haushal, a Developer Advocate at Contentful. I have been exploring Europe and experimenting with different technologies and frameworks. Check out my projects on my website or connect with me on Twitter.

Hi everyone and thank you for joining. In my lightning talk, my name is Haushal and I work at Contentful. As I was saying I am originally from India but I live in Berlin for 15 months. Still exploring Europe. Still exploring or still trying to be a more Berliner. And I work as a Developer Advocate at Contentful. I recently joined Contentful. And it has been an amazing experience because I get to experiment a lot with different technologies and framework. And share with the wider community and I kind of love doing that and I be a bit very build a lot of year projects so you can check it out on my website or just hit me up on Twitter.

2. Content Modeling and Cookbook Web App

Short description:

Today, I will discuss content modeling and its importance in providing a great user experience. I will use my Cookbook web app as an example to explain how I am structuring and organizing the content. Starting with wireframing, I identified the key elements for the recipe content type, including title, description, images, ingredients, and instructions. To ensure consistency, I created a separate content type for ingredients. Let's dive into the details.

All right so today I'm going to talk about content because in the past two years the amount of content that we have generated is massive. I mean everyone out there has created content in some form or another. In November last year during the Black Friday sale we saw a massive increase in the API request that we got at Contentful APIs. For example the GraphQL requests were increased by 550% while the content delivery API or CDA was increased by 73%. And so as a developer I believe it is on us to make sure that we provide that amazing experience not just to our users but to our team.

But how do we do that and what is content modeling. So basically a content model allows you to structure and organize your code. Now remember as you have the technical expertise but not all your content creators, all your designers would have that technical expertise. So we need to make sure that we provide that value and we provide that easy workflow for them to create content.

So that's quite enough of theory let's get into action and I want to talk today about Cookbook because I have taken cooking as a hobby recently and I'm trying to create a web app because I am a programmer and I believe I can do that. But anyways, so in the couple of next slides I'm going to talk about my approach of how I am modeling my content for this particular application. So I've taken the top-down approach so that I can break down the elements into smaller pieces into smaller chunks which would basically help me to reiterate my content model over and over again. So I started out with wireframing. I'm terrible at design. Don't judge me on the design but this is what I envision my web app to be. So a simple web app which shows a list of recipes and each of these cards basically have an image, a title and a description.

So this simple wireframework gave me an idea of what information I need in my content type. So in Contentful, this is what my content model looks like for the recipe content type. So now I have the title, I have the description and I have images. But we are missing two important things. If I open each or any of those recipes, it has a title, it has the images, it has the description but it needs to have those ingredients as well as the instructions on how to cook them. Otherwise no one knows how to cook their particular recipe and it's going to be just a mess. So with this page I kind of realized, OK, I have a few of these information but I need the ingredients as well as instructions. And that's what I went ahead and added in Contentful. So I added two other fields. One is ingredients and the other one is instructions. Now in ingredients, if you see it, it says its reference because ingredients are going to be shared among other recipes as well. Hence I created a separate content type for ingredients and I'm going to show you just that. So this is my ingredient content type and it has a name and a type. I know there's too many types going on in this talk so I'm just gonna try to avoid using that word.

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

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced 2021React Advanced 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
TypeScript and React: Secrets of a Happy Marriage
React Advanced 2022React Advanced 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
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, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
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
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up