Modelado de Contenido para Desarrolladores de React

Rate this content
Bookmark

En el mundo de hoy, no es sorprendente que "El contenido es el rey". Ayuda a contar una historia y te ayuda a llegar a más personas. La mayoría de las veces, los desarrolladores no son los encargados de gestionar este contenido. Por lo tanto, modelar el contenido de manera eficiente se vuelve crucial. Hacerlo bien facilita el proceso de entrega de contenido para el equipo. Pero, ¿cómo se modela el contenido? ¿Qué cosas se deben tener en cuenta? Responderé a estas preguntas en esta charla y compartiré mi enfoque para el modelado de contenido como desarrollador de React.

Harshil Agrawal
Harshil Agrawal
7 min
23 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Haushal, un Defensor del Desarrollador en Contentful, habla sobre el modelado de contenido y su importancia para proporcionar una gran experiencia de usuario. Utiliza su aplicación web Cookbook como ejemplo para explicar cómo estructura y organiza el contenido. El modelo de contenido general enfatiza la reutilización y consideraciones para la gobernanza del contenido y la selección de plataforma. El modelado de contenido es un proceso iterativo, y Haushal proporciona recursos para seguir aprendiendo y desarrollándose.

Available in English

1. Introducción y Antecedentes

Short description:

Hola a todos, soy Haushal, un Defensor del Desarrollador en Contentful. He estado explorando Europa y experimentando con diferentes tecnologías y frameworks. Echa un vistazo a mis proyectos en mi sitio web o conéctate conmigo en Twitter.

Hola a todos y gracias por unirse. En mi charla relámpago, mi nombre es Haushal y trabajo en Contentful. Como estaba diciendo, soy originario de India pero vivo en Berlín desde hace 15 meses. Todavía estoy explorando Europa. Todavía explorando o tratando de ser más berlinés. Y trabajo como Defensor del Desarrollador en Contentful. Recientemente me uní a Contentful. Y ha sido una experiencia increíble porque puedo experimentar mucho con diferentes tecnologías y frameworks. Y compartirlo con la community en general y me encanta hacer eso y Construyo muchos proyectos durante el año, así que puedes verlos en mi sitio web o simplemente contáctame

2. Content Modeling and Cookbook Web App

Short description:

Hoy hablaré sobre la modelización de contenido y su importancia para brindar una excelente experiencia de usuario. Usaré mi aplicación web Cookbook como ejemplo para explicar cómo estoy estructurando y organizando el contenido. Comenzando con el diseño de wireframes, identifiqué los elementos clave para el tipo de contenido de recetas, incluyendo título, descripción, imágenes, ingredientes e instrucciones. Para garantizar la consistencia, creé un tipo de contenido separado para los ingredientes. Vamos a profundizar en los detalles.

sígueme en Twitter. Muy bien, hoy hablaré sobre el contenido porque en los últimos dos años la cantidad de contenido que hemos generado es enorme. Quiero decir, todos han creado contenido de alguna forma u otra. En noviembre del año pasado, durante la venta del Black Friday, vimos un aumento masivo en las solicitudes de API que recibimos en las APIs de Contentful. Por ejemplo, las solicitudes de GraphQL aumentaron un 550%, mientras que la API de entrega de contenido o CDA aumentó un 73%. Como desarrollador, creo que es nuestra responsabilidad asegurarnos de brindar esa experiencia increíble no solo a nuestros usuarios, sino también a nuestro equipo. Pero ¿cómo lo hacemos y qué es la modelización de contenido? Básicamente, un modelo de contenido te permite estructurar y organizar tu código. Ahora recuerda que tú tienes la experiencia técnica, pero no todos tus creadores de contenido, ni tus diseñadores tienen esa experiencia técnica. Así que debemos asegurarnos de proporcionar ese valor y ofrecer un flujo de trabajo sencillo para que puedan crear contenido. Suficiente teoría, vamos a la acción y hoy quiero hablar sobre Cookbook porque recientemente he tomado la cocina como un hobby y estoy tratando de crear una aplicación web porque soy programador y creo que puedo hacerlo. Pero de todos modos, en los próximos slides voy a hablar sobre mi enfoque de cómo estoy modelando mi contenido para esta aplicación en particular. He adoptado un enfoque de arriba hacia abajo para poder descomponer los elementos en piezas más pequeñas, en fragmentos más pequeños que básicamente me ayudarán a iterar sobre mi modelo de contenido una y otra vez. Comencé con el diseño de wireframes. Soy terrible en design. No me juzgues por el design, pero esto es lo que imagino que será mi aplicación web. Una aplicación web sencilla que muestra una lista de recetas y cada una de estas tarjetas tiene una imagen, un título y una descripción. Este simple wireframe me dio una idea de qué información necesito en mi tipo de contenido. Entonces, en Contentful, esto es lo que se ve mi modelo de contenido para el tipo de contenido de receta. Ahora tengo el título, tengo la descripción y tengo imágenes. Pero nos faltan dos cosas importantes. Si abro cualquiera de estas recetas, tiene un título, tiene imágenes, tiene la descripción pero también necesita tener esos ingredientes y las instrucciones de cómo cocinarlos. De lo contrario nadie sabrá cómo cocinar esa receta en particular y será un desastre. Con esta página me di cuenta de que necesito los ingredientes y las instrucciones. Así que fui y los agregué en Contentful. Agregué otros dos campos. Uno es ingredientes y el otro son las instrucciones. Ahora en ingredientes, si lo ves, dice que es una referencia porque los ingredientes se compartirán entre otras recetas también. Por eso creé un tipo de contenido separado para los ingredientes y te lo mostraré enseguida. Este es mi tipo de contenido de ingredientes y tiene un nombre y un tipo. Sé que hay

3. Resumen del Modelo de Contenido y Consideraciones

Short description:

Esta sección explica el modelo de contenido general, destacando las relaciones entre la receta, los ingredientes, el tipo y los activos. Se enfatiza la importancia de la reutilización en la modelización de contenido y las consideraciones para la gobernanza del contenido y la selección de la plataforma. También se menciona la naturaleza iterativa de la modelización de contenido y se proporcionan recursos para seguir aprendiendo y desarrollándose.

Hay demasiados tipos en esta charla, así que voy a tratar de evitar usar esa palabra. Pero así es como se ve mi tipo de contenido de ingredientes. Y este es el modelo de contenido general, por lo que la receta tiene una referencia a los ingredientes, los ingredientes tienen una referencia al tipo y la receta también tiene una referencia a los activos que básicamente contienen las imágenes. Ahora, una de las otras características que tuve en cuenta al construir este modelo de contenido fue la reutilización, porque como desarrolladores de react construimos componentes y queremos asegurarnos de usar esos componentes una y otra vez y no tener que repetir esas líneas de código una y otra vez. Y eso es lo que hice aquí. Sabía que iba a tener ingredientes para muchas recetas que serían comunes y así es como seleccioné los ingredientes como un tipo de contenido separado.

Lo siguiente es la gobernanza del contenido. Ahora esto es especialmente importante cuando estás trabajando con tu equipo y tu equipo va a ser el encargado de crear el contenido, publicarlo y revisarlo. Aquí es donde tienes que decidir qué tipo de flujo de trabajo o qué tipo de gobernanza del contenido deseas. ¿Necesitas dar acceso, necesitas dar acceso de publicación a todos y solo un número limitado de personas necesita tener ese acceso? Y lo siguiente, y muy importante, es la plataforma, porque necesitas decidir en qué plataforma se va a utilizar este contenido. ¿Será solo web, será solo móvil, será ambas o también será una aplicación habilitada para voz? Eso también es uno de los factores clave que debes tener en cuenta.

Y recuerda, nadie logra el modelo de contenido correcto en un solo intento. Te mostré el tipo de contenido SCP que creé. Inicialmente solo tenía tres campos, pero a medida que creaba y diseñaba mi wireframe, me di cuenta de que necesitaba agregar más y más campos para que tuviera más sentido. Así que está bien tener un tipo de contenido incompleto al principio, pero obtén comentarios de tu equipo, piensa más al respecto y luego crea tu tipo de contenido. Algunos recursos que me gustaría compartir con todos ustedes, tenemos un Centro de Aprendizaje donde ofrecemos capacitaciones para que puedas aprender más sobre Contentful y la modelización de contenido. Y tenemos un portal para desarrolladores donde puedes encontrar todos los recursos para desarrolladores, así que si solo quieres comenzar, el portal para desarrolladores es el mejor lugar para ir. Y gracias a todos por unirse, y lamento hacerlos esperar, sé que es un descanso y a la mayoría les gustaría tomar un café, yo también quiero, pero gracias a todos por unirse y que tengan un buen día!

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 Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Using useEffect Effectively
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.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
TypeScript and React are inseparable. What's the secret to their successful union? Quite a lot of surprisingly strange code. Learn why useRef always feels weird, how to wrangle generics in custom hooks, and how union types can transform your components.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.

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 Conference 2021React Advanced Conference 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
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
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid