Content Modeling for React Developers

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.

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.

But this is how my ingredient content type looks like. And this is the overall content model, so the recipe has a reference to ingredients, ingredients has a reference to type, and recipe also has an ingredient to the assets which basically contains the images.

Now one of the other features that I kept in mind when I was building this content model was reusability, because as react developers we build on components and we want to make sure that we use those components again and again and we don't like to quote those lines of code again and again. And that's what I did over here. I knew I was gonna have ingredients for a lot of recipes which are going to be common and that's how I selected ingredients to be a separate content type.

The next is content governance. Now this is mainly important when you are working with your team and your team is going to be the one who is going to create the content, publish the content and review the content. This is where you have to decide on what kind of workflow or what kind of content governance do you want. Do you need to give access, do you need to give publish access to everyone and only a limited amount of people need to have that access. And the next is, and the next very important thing is platform, because you need to decide which platform this content is going to be used. Is it just going to be web, is it just going to be mobile, is it going to be both or is it also going to be a voice enabled application. So that is also one of the key factors that you need to keep in mind.

And remember, nobody gets content model right in one pass. I showed you the SCP content type that I created. It only had three fields earlier, but as and when I was creating and designing my wireframe, I realized I need to put in more and more fields over there to make more sense. So it's fine to have an incomplete content type at first, but get the feedback from your team, try to think more about it and then create your content type.

A few resources that I would like to share with you all, we have a Learning Center where we have trainings where you can learn more about Contentful and content modeling. And we have a developer portal where you can get all the developer resources, so if you just want to get started, the developer portal is the best place to go.