Video details

Content Modeling for React Developers – Harshil Agrawal, React Summit 2022

React
06.23.2022
English

React Summit 2022 #ReactSummit #GitNation Website – https://reactsummit.com/
Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/reactsummit-2022
Talk: Content Modeling for React Developers 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 event would not take place without the support of sponsors:
🏆 Platinum Sponsors Ag Grid → https://www.ag-grid.com/ Toptal → https://www.toptal.com/freelance-jobs Rangle.io → https://rangle.io/
WPEngine → https://wpengine.com/ Vodafone → https://careers.vodafone.com/
🥇 Gold Sponsors StackHawk → https://www.stackhawk.com/ Bitvavo → https://bitvavo.com/ Ionic → https://ionic.io/ JetBrains → https://www.jetbrains.com/webstorm/ Kontent by Kentico → https://kontent.ai/ Decentology → https://www.decentology.com/ Xata → https://xata.io/ Docker → https://www.docker.com/ Shopify → https://www.shopify.com/careers Wix Engineering → https://wix.com NearForm → https://www.nearform.com/ Focus Reactive → https://focusreactive.com/ Sanity → https://www.sanity.io/ Snyk → https://snyk.io/ Contentful → https://www.contentful.com/ Nx → https://nx.dev/
🥈 Silver Sponsors Firebase → https://firebase.google.com/ Callstack → https://www.callstack.com/ Mercari → https://about.mercari.com/en/ vpTech/ → https://careers.veepee.com/en/vptech-2/ NativeBase → https://nativebase.io/ Stream → https://getstream.io/ SiteGround → https://www.siteground.com/ Yoast → https://yoast.com/ Novermber Five → https://www.novemberfive.co/ Twilio → https://www.twilio.com/ahoy BCGDV → https://bcgdv.com/ Fullscript → https://fullscript.com/ Utopia Music → https://utopiamusic.com/ SISU → https://www.sisu.tools/

Transcript

Hey, everyone, and thank you for joining in in my Lightning talk. My name is Herschel and I work at Content Pool. As I was saying, I am originally from India, but I live in Berlin for 50 months, still exploring Europe, still exploring, still trying to be born Berliner, and I work as a developer advocate at Contentfall. I recently joined Contentfold 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 built, a lot of weird 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 Graph QL API request was 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, you have the technical expertise, but not all your content creators or your designers would have their 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 have 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 Wire framework 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 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, okay, I have a few of this information, but I need the ingredients as well as instructions. And that's what I went ahead and added in content for. So I did two other fields. One is ingredients and the other one is instructions. Now in Ingredients, if you see it shares 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. And if there are too many types going on in this job, so I'm just going to 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 shape 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 we had 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 code those lines of code again and again. And that's what I did over here. I knew I was going to 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, what kind of content governance do you want, do you need to give access, do you need to give published access to everyone? And only a limited amount of people need to have that access. 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 recipe 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 services. So if you just want to get started, Developer Portal is the best place to go. And thank you all for joining in and I'm sorry if I keep you waiting. I know it's a break and most of you would like to have a coffee I saw you wanted but thank you all for joining and have a nice one.