Ep. #16, Contentful: An API-First CMS

Brian Douglas: So, welcome to another installment of JAMstack Radio. On the line, we've got Stefan Judis.

Stefan Judis: Yeah, I am Stefan, I am a developer evangelist at Contentful, based in Berlin. And I'm really excited to be here.

Brian: Cool, and then we also have Rouven Wessling.

Rouven Wessling: That's almost correct. Yeah, I'm also a developer evangelist, but I'm also an ecosystem developer, so I don't only just get to talk about Contentful. I actually build part of the product, mainly unveiling the PHP SDK. I also have my fingers in some of the other ecosystem projects we do, stereo saturators, family integrations.

Brian: Cool. The audience definitely knows what Contentful is, because you guys have come up in conversation at least three times in previous episodes. But for those who maybe just found this randomly, do you want to explain what Contentful is?

Stefan: I can take it. So Contentful is a headless CMS. So what this mean is that we offer an API, where you can retrieve your content, and on the other hand, we offer a web app where editors can edit their content. That's basically a headless CMS, and we're API first.

Brian: Yeah, we're big fans. At JAMstack, we love separating concerns. And the reason why Contentful keeps coming up is because we keep talking about front end solutions, to talk to APIs, and since you guys are API first, you fit right in the middle of the jam. It's like a match made in heaven, really, for anybody who wants to have something super fast, but not worrying about collecting and maintaining their own infrastructure.

Rouven: There was this amazing quote from a user we had just recently.

Contentful is a CMS where the user gets the full CMS they want, but the developer doesn't have to deal with us at all.

It's just an API, it's like any other API you would ever use, it's just the same. You don't have to think like a CMS, like it worked just like a Drupal, like a Adobe experience manager of all the gruesome things out there. It's just an API. And that's really what we want to be, we just want to be the API for your content.

Brian: Cool. Yeah, I really like the approach too, because I literally have recently got into Wordpress, for some things we need to test for work, and I've never done Wordpress development before.

Rouven: How was it?

Brian: Not very good. Just the getting up and running, and getting you environment set up to host your own Wordpress setup, it's kind of tedious. Especially if you just want to manage a small amount of content to test out a small side project. It doesn't seem realistic to reach for Wordpress right out of the gate, which is why I love the solution of Contentful. You call it a CMS, so do you have an admin interface where users can actually interface and add data too?

Stefan: Yeah, so we've got the Contentful app. This is the place where content managers or editors set up their content model first, so it's completely flexible, you're adding there, define what your content types are, you then connect items. And then you've got the actual editor interface, and this is where then the data editing happens.

Brian: Okay, cool. And then, the data itself, we're talking JSON, I assume?

Stefan: We're talking JSON.

Brian: Yeah, which is very cool. So my last job, we built a growth hacking project to get people to find our site eventually. And because it was a growth hacking project, I worked really closely with the marketing team. So what I did is I built a CMS with Google Sheets. I built a quick scraper for Google Drive, to actually take that data and add it to a Postgres database to then serve to my front-rend react app.

So I spent about, maybe 1 1/2 weeks researching it, and I spent about another a few days to actually to implement it, and I walked away feeling very proud of myself. And the very first day I showed it to everybody in the team as like, "hey this is what I built, now the marketing team can go into the Google Drive and add data and it shows up on our website that I built for them, this works perfectly".

And the first question that came up with the engineering team, was why didn't you use Contentful? And I was like content who? I've never heard of these guys, I don't understand. And then as soon as I got back to my desk after feeling very defeated, I actually slacked and was "ah yeah, if you told me about this like two weeks ago, I would have used it, but I already built this, and I don't want to do any more work, so I'm like kind of upset".

Rouven: But what you built sounds amazing, because you got the core thing right. You decoupled your presentation.

Brian: Yeah.

Rouven: The react app is about how you displayed the content from the part where you store the content. So you can switch out either end without having to re-do the entire project. Now if you worked with Wordpress, and you have a Wordpress theme, and you have all the content in a Wordpress database, you're stuck, it's never going to get out of there, unless you put in a lot of manual work.

If you want to add a mobile app, or Alexa Skill, or whatever else you want to build for your content, and you want to reuse the same content, good luck in Wordpress.

That's not going to fly. I mean, it's possible, don't get me wrong, it certainly is possible, but it's not going to be fun, by any means. And just grasping that and actually doing that right, is where most people who build websites today actually fail. Because they are thinking in a web-centered world, and everything they design is made for the web, and for nothing else.

Brian: That's very true.

Stefan: You need a mental shift though. With Wordpress, you have the holy WYSIWYG editor, where people start messing around with all the content, but when you want to go cross-platform, then you're stuck. When you have markup in your text blocks, there is no way getting out then again.

Brian: Yeah, and especially if you have to, like you mention, handle multiple platforms, and now we have the Amazon Echo which has no actual visual interface, like it's just reading data from strings. It makes a lot of sense to decouple your markup from your API so that way you can present that nicely.

Stefan: And also you have much more choice of not just reusing content, but also how you have your editors think about content. Like my absolutely favorite feature of Contentful is the images API, where you can seriously resize and mitigate images on the server. And how many people implement CMSs with structured fields where you have to upload the same picture five times at different sizes for different viewport sizes.

The editors hate it and the developers hate it but people still do it. But the much smarter solution is to resize images on the server and cache them in the CDN.

And I've even seen people with Contentful implemented that way, because they are so stuck in the mindset that they have multiple image fields for different sizes, while it's much much easier to just use the power of the platform, and just resize images on the server and be done with it.

And to think more in abstract terms about your content, independently of the platform where you show it, is a mind shift people just have to make. And once you're there, a whole world opens up to you of just reusing the content you have. The most amazing thing companies usually produce, is content, like this podcast, it's content, and it's actually really good content, cause people learn from it, people study it. Bringing the content to multiple places to be more accessible to people, is an incredibly important thing to do just to get it out there. And making that mind shift is so important.

Brian: Reuven, at the top of the show you mentioned that you also, not only that you're an evangelist, but you also implement some SDKs. Contentful, do they have SDKs for multiple platforms as you mentioned?

Rouven: Yes we do. So I have the probably unpopular with this audience job of maintaining the PHP SDK. So if you're coming from Wordpress, I'm the guy who's going to get you on Contentful. But we do have SDKs for obviously JavaScript, for all the mobile platforms, Swift, Objective C, Java for Android, Python, Ruby.

All the common languages used on the web on mobile, we have covered. I think it's right now eight in total, so whatever platform you're on, we can probably get you hooked up on SDK so you don't have to actually write raw API interactions ever.

Brian: Cool. Yeah, that's like the best thing about, one, separating your concerns, separating your markup, but also being able to use like, these SDKs for example, if I wanted to create a react app or ingar app, or something fancy. If I can just drop in a quick connection to that API and reuse that same data, that kind of unlocks a real world, so it makes sense how Contentful really is serving the space really nicely.

Stefan: Yeah, you just have to drop in the JavaScript SDK and then you're already flying.

Brian: Yeah. Apologies if I broadside you guys with this question, but do you guys have search integrated in there as well? Like if I had a long list of content that's being implemented, is there an easy way to pick certain items for certain situations?

Rouven: We do have a full text search. It's not Algolia quality search, so if you want a really powerful full text search, use Algolia with us, it has actually quite a nice integration and there are some open source projects to do it.

Brian: Oh nice.

Rouven: But if you have just basic search needs, we actually run off Postgres, we have I think like a dozen different search operators. Including like geographic searchers, range searchers, bounding box GU search, very fancy, but the most important thing is full text search across all the content users have to get you to the result. Whatever humans actually type in, not just computers do.

But the powerful thing about Contentful is, we really just want to do one thing very well, and that is content and managing your content, and if you want another thing to do with your content, somebody else may do it better than us. So if you want really really good search for your website, or your app, or your Alexa Skill, or whatever else, use Algolia.

Brian: Yeah.

Rouven: Push your content from Contentful to Algolia. If you want AB test, use Optimizely.

We want to really get away from the monolithic view of "your CMS does everything and everything lives in your CMS".

But you use the most powerful, most advanced tool for whatever you want to do, and you just store your content with Contentful, and you integrate with all these tools. So you're not locked into using whatever happens to integrate with Contentful, you just use whatever is the coolest thing right now.

Brian: I'm glad you mentioned Algolia, because an episode that hasn't been out yet, they're actually on, I believe it's the last episode, so the one before this will be about Algolia, which is great because all they need is JSON, which makes sense, if you guys have integration to pass your Contentful data straight to Algolia. It's amazing how many APIs here work for each situation, and how perfect the JAMstack works.

Stefan: You just have to connect pieces, right?

Brian: Yeah.

Stefan: We're really reaching that state, and that's quite nice.

Rouven: It's an amazing world we live in right now. I've been, the past couple of months, to a couple of API conferences. It sounds absurd on the surface, it kind of is to be honest, but like just discovering how many APIs are out there to do all the things, it's a great world we live in.

Brian: Yeah. Do you mind sharing what API conferences were you just at?

Rouven: The last one I was at was actually APIdays Australia, in Sydney.

Brian: Okay.

Rouven: Before that it was APIdays Paris, Nordic APIs. So around the world, mostly US, Europe and Australia, there is a conference where it's API implementers usually come together, exchanging best practices about how to best implement an API and document an API and get developers started with an API. How to make the first API call as easy as possible. This is incredibly important for us, because

Entering your content through the web app, editors know how to do that. But integrating content through an API entry each occasion is something new for most developers.

So we just exchange knowledge there about actually getting started. And it's amazing to see how many companies now open up their data. I met somebody from Lufthansa. Lufthansa, the big airline, now has an API, where you can carry flight information. I think it's the first big airline to do it, and it's amazing that these old like 19th century companies are starting to open up their own data for the world to use, for us developers to use.

Stefan: Yeah, this is exactly what we wanted right? You mentioned the react use case. For example, I'm storing the information for my personal website also on Contentful. And just because I can and I have an API available, I built myself a little app that schedules all my travels. Because I do a little traveling, these are the events, and that wouldn't be possible without an API, that's really sweet.

Brian: Yeah, it's super nice. I really like the catering to, I don't know if you want to call them non-technical users as well, but having a marketing team or an editing team that's pushing out content while the rest of the app's actually being built. That was one of the big use cases why I opted for building my own API-first CMS with Google Drive. It was because we were building a proof-of-concept for a project, and at the time we needed a lot of content for it.

So we couldn't wait for the app to be built while we were collecting content, so we started adding content to the Google Drive to eventually port it over manually. So I was like "hold on, we have the content already, let's not double work", so I ended up doing way too much work to get this thing to work. But if I'd used Contentful, we would have had all the content being populated as the app was being built, and then click a button and then it populates all our data. And I liked your use case for traveling too as well.

Stefan: It works pretty well for me.

Brian: Yeah. I love providing data. Every other episode I talk about this app, but I built an app to tell me whenever there's a home baseball game. I don't know if you guys have baseball in Germany.

Rouven: Rarely. It's not really, rumor is there is a team someplace in Germany, one, just one.

Brian: One team? At least you're keeping up with everybody else in the Western ecosphere. Yeah, so for the listeners who don't know what baseball is, it's basically where grown men stand around and watch one tiny white ball get thrown around for hours.

Rouven: That's so how it feels to me.

Brian: Yeah, there's beer involved, and hot dogs.

Stefan: I went to a single game in my life, I was bored to death.

Brian: Well, if you guys ever make it out here to the SF, I'll bring you guys to a baseball game, and we'll get drunk.

Rouven: I think we have a deal here.

Brian: All right.

Stefan: I'm up for the drunk part, I'm not sure if baseball's necessary for that.

Brian: All right, well we'll go next to the stadium to a bar and listen to it.

Stefan: That's a deal.

Brian: So the app I built basically is just scraping ESPN data and making sure I know whenever there's a home game for the Giants, and it just will ping me and tell me whenever not to go to the city, and avoid any sort of baseball traffic. So it sounds like I could use Contentful for that, just to collect all my data for me, and then be able to ping me with the notification, just a serverless function.

Stefan: These kind of stories make me so excited, that we're kind of developers and we're able to build these kind of things. Sometimes I'm like "holy shit, this is amazing".

Brian: Yeah we're at a really awesome time to be a developer, because a lot of the, not all the problems have been solved, but a lot of the hard problems have actually been solved for us, so we can just use our knowledge and collect all these APIs and collect all these use cases.

Rouven: Just an API callable year. Google and Amazon too have been opening so many amazing APIs for natural language processing, AI context-based language meaning, image recognition, video recognition just opened by Google. I mean, it's not open source, open source would be nicer, but just an API call away, and maybe three cents charge per API call is a breadth of knowledge, that at least I am incapable of developing by myself.

Like I can't build a natural language processor, that's definitely not my level of skills. But I can just access one that's really really good by making an API call. And that ability, as a developer, is amazing.

Brian: Yeah. Even things like VR, and we talked a little bit about the Amazon Echo as well. People have already solved those problems, and you just drop in a JavaScript library to do VR on your phone, or language processing from your phone or other third-party device. It's amazing and also scary. Because you know, everything's super easy and attainable to do, so the possibilities are almost endless for the good and bad.

Stefan: There's always stuff to go, right, always.

Brian: Cool. And sorry, Stefan, do you also do code at all, at Contentful?

Stefan: I was developing many front-end stuff in JavaScript before and now anchor the developer relations team, which means I'm responsible for blogging and hanging around and chatting with people. Coding these days is side projects and try-outs.

Brian: Okay, cool. Well I'm sure Contentful gives you access to nice stuff for your account so you can continue to build your scheduling applications.

Stefan: I'm building all this stuff with Contentful now, I need an API, okay let's do that.

Brian: Yeah yeah. I feel the same way Netlify, like I've had three sites before I was a Netlify employee, and now I have like 50, just because I can. I don't need to think about whether or not I need to pay for something. For one, if you're a developer, Netlify's pretty much free, but for two I get to try out every new feature that Netlify has, so I'm just rolling out always. If I think of something, it goes on Netlify. And hopefully I'll do the same thing with Contentful, coming up pretty soon.

Stefan: I tried Netlify last week the first time, and I was like "that is nice".

Brian: Yeah.

Stefan: It was really easy.

Brian: Yeah, we try to make it easy.

Stefan: HBB2 and CDN and yeah it was really good.

Brian: Cool, I'm glad you liked it. So speaking of which, examples. I was trying to rack my brain, you guys have any good examples of use cases for Contentful working at companies?

Rouven: All right, let me start. They're not actually doing static sites, but it's my favorite customer ever. They're right up in London, it's the British Museum, world-famous institution, very like old school dusty name. It's the British Museum, they have the mummies.

Brian: Could you do it in a British accent?

Rouven: I can't. You can tell my accent is horribly German and I lived in America for a year, and I still haven't gotten over a German accent.

Brian: Well I don't know if you watch any 1950s and 60s movies, but all Germans are British in movies.

Rouven: I haven't heard that one. So before I left for the US I was an exchange student they told me that in American TV Germans are either portrayed as Bavarians or as Nazis, so don't be offended. So I always wanted to be the Bavarian. So the British Museum, dusty old mummy house, but they actually have an amazing digital agenda, they have a digital director.

And Contentful is their default CMS now for all things. And they've done some amazing things, which is actually my favorite use case, because something nobody thought of, when they designed Contentful. Audio guides, like the things you rent for five pounds, and walk around the museum and they tell you about the exhibit.

Brian: Yeah.

Rouven: These are running off Contentful.

Brian: Wow.

Rouven: So all the audio files, the pictures, the text, they are stored in Contentful. The curators and the editorial team, they add to it throughout the day. So the British Museum is a very old building, with very very thick walls, which is harder for wifi, so they don't have wifi throughout the building. So they just have wifi at the booth where they rent out these devices. And they use our sync API to sync down the entire content onto the device.

And then you take the device, you go through the building, and you have all the content available to you, without actually connecting to Contentful. And it's my absolutely favorite use case, because I've been there, I've used the audio guides, they're incredibly well done, they're informative, they have pictures. The pictures are changing while the audio's playing, they have like the family quiz version where you have tasks to do with your kids, like do pantomimes, or makes sounds and stuff.

So it's incredibly good content, it's really well presented, and using our technology to enable it. So this is my absolute favorite. They do some other things, they have some websites running, or some signage systems, but these audio guides are so amazing. If you're in London, go to the British Museum, take five pounds, it's going to a good cause, partly to us, get an audio guide, just experience it. They're incredibly well done, and it's using the same CMS you can use to call your block. Just think about that. This is a big institution with a lot of money, and they're using the same product you can use for free to call your block. That's my absolute favorite.

Stefan: Yeah, speaking of which, just to make that clear. Contentful is actually a set of APIs, so it's not just only retrieving data, we also have a read-write API, so when you need your own interface, or a simplified version for that, that's also available, and then also preview API. So when you for example don't want to publish stuff but want to build an environment to see edited things, this is also included.

Brian: Okay.

Rouven: And the Images API, my favorite API to downscale images. Also one of our APIs.

Brian: I'll have to check that out. And then as far as Contentful, you guys have like a trial period or a free plan to check out?

Stefan: The free plan is up to 50,000 API calls per month.

Brian: Oh, okay that's totally doable.

Stefan: I think so too, that this is enough for a side project.

Brian: Yeah, and if you go over that then you probably want to talk about investment, and maybe getting some VC funding or something.

Stefan: Exactly. This is the normal reaction that happens then. When you have the problem that you're dragging 50,000 requests, you have different problems than.

Brian: Yeah, than paying for Contentful.

Rouven: Especially since 1,000 more API calls are just 15 cents. So if you pay us 15 cents, you get to keep using the API.

Brian: Yeah.

Rouven: We're very cheap for Germans. We're easy, just give us some beer, we're good.

Brian: Cool, I'll keep that in mind, I'll send a case of my finest Budweiser.

Rouven: Um, Czech Budweiser you mean, not American, right?

Brian: Well Budweiser is not the best beer, it's not our best export.

Rouven: The Czech one is really good, it's also called Budweiser, but it tastes way better.

Brian: Cool. I really appreciate you guys talking about Contentful and kind of giving us the rundown, but for now, let's go ahead and transition to picks, if you guys down mind. So yeah, these picks are jam picks, anything that you're jamming on, things that are keeping you goin, that you like to do to keep your work going, or just even outside of work. So technical or non-technical are totally fine. But I'll go first.

My first pick is Webpack. Webpack is a build tool. A year ago I barely knew what it was. One of my lead engineers, actually Christian Schinzler, I worked with him, and he was a big Webpack fan.

So Christian was actually on Episode Number One on the JAMstack Radio, so for anybody who remembers that far back, but yeah he was a big Webpack fan, I didn't know anything about it. And I finally got around to actually learning it well. So I highly recommend checking out the webpackjs.org docs, because they did a really good job of making sure it was clear.

Rouven: Version two is much better, right?

Brian: Yeah, version two is much better, you can actually understand what's going on, it's very clear. So I've been doing offline plugins, service workers, I've been optimizing our build to make sure it's not crazy heavy-weighted and stuff like that. And just from a little reading I was able to improve our bundle size and stuff like that. So highly recommend Webpack.

My next pick is actually Service Workers too, just roll right into that, there's a cool offline plugin for Service Workers, which I've implemented in Netlify. It's not in production yet because I'm trying to figure out some crafty ways to offline our docs to as well, currently just our homepage is offlined, so hopefully when you lose network requests on your phone or your desktop, you'll be able to at least read our docs.

And all that will be cached, will which be super awesome, so check that out, Webpack and Service Workers. My final pick is Luke Cage, which is a Netflix series. So I don't know if you guys get all the Netflix series in Berlin, do you?

Rouven: Yeah, most of them.

Brian: Most of them? Well Luke Cage is made by Netflix, and it's a Marvel series. He's an African-American super hero, and he came out during the jive-talking 70s, and that's where he kind of was birthed in the comic books, and they've modernized him and put him into a Netflix series, Marvel series, and they've also brought along some of the 70s undertones too, which is really cool, a lot of the music, a lot of the stuff that came from that comic book.

I'm very impressed that they were able to intertwine it and not make it as cheesy as the comic books were. So I just finished it, it took me a while to finish it, cause I have no time to watch TV as of late. I do a lot of coding and a lot of side projects, so I just don't find the time. So I just finally finished the last couple episodes, so I just wanted to recommend, anybody who hasn't seen Luke Cage, check it out, and then maybe read the comic and try not to laugh. Stefan, since I introduced you first, you have some picks you want to share?

Stefan: Sure. One question though, have you SW Toolbox when you play around with Service Workers?

Brian: I haven't. What's SW Toolbox?

Stefan: That's actually a Google library. And I did a Service Worker implementation six months ago, and it took a while to get my head around it, because you have to hook and to activate and fetch and all that stuff. With SW Toolbox, it's five lines, reconfigure it, you can say cache first, network first or whatever, and I implemented it and it was like "wow, I lost a lot of time here".

Brian: Yeah, I definitely did spend at least a week on just tinkering and manipulating different things and fetching and pushing.

Stefan: Check it out, you will see that it's not that hard then.

Brian: Okay, cool, I will, I definitely will check it out.

Stefan: Okay, well cool. My first pick is Unsplash, this images API, where you can get beautiful images under Creative Commons License, for free. That's awesome, I love that. Especially when I do conference talks or something, I spend a lot of time just looking for beautiful images, so this really helps me out.

And actually, three days ago I came across an app that is called Zoomi, or Zoom-eye, which is basically a MacOS app which queries a lot of image services that are all Creative Commons, so I now just have to type in a phrase and I can choose out of 100 beautiful images what I want to use for my presentations, so this will definitely save me some time, I recommend it.

And extra today, when I was younger I was a little more into music, this kind of disappeared when I started coding. But accidentally I came across a band I used to listen to, which is Marot Rockel, it's a little bit funky electronic music, and I listened to them the last time six years ago, and I discovered that they released three more albums, and I had a dancey day today, it was really good.

Brian: A dancey day, it's too bad this is an audio medium.

Rouven: Stefan really cares about his stock images. Stefan is our slide quality obsessed evangelist. Whenever I had to do any presentation I had my slides to Stefan, and now I get a list, a Google Doc two pages long with all the things wrong with them back. And after I go through it they're going to be perfect, but he's really obsessed with the quality of his slides, and he's great at it, so he loves his images.

Stefan: It has to be pretty, right?

Brian: Yeah. I was going to say I was going to look up some of your talks so I can try to mimic some of your talking in slides. Most of my slides I throw it together last minute, so you probably won't be proud of mine.

Rouven: Yeah, me too, Stefan is different, Stefan is amazing.

Stefan: Well thank you.

Brian: Reuven, you got some picks for us?

Rouven: Yeah, of course. I'm late to the party, because I got late to Germany, but I'm really in love with the Alexa API right now. I've done two skills right now, I'm working on my third one, all of them using Contentful, because "ooh multi-platform". I get to use content in a non-visual way, which is breathtaking to me still. But even beyond that, just the quality of the interaction, but also the work that goes into the interaction, and actually having to think about, "hey how do people want to interact with something where you can't click" is to me just fascinating.

So I love the API, I love that I can use it AWS lamda, so I don't have to run a server anywhere, I don't have to think about hosting it anywhere, I just upload it to Amazon, and Amazon takes care of all the crap for me, but also the thought pattern, having to evolve from, I've always done either PHP band dev, or JavaScript phone-in dev, so it was always very visual, and having to think about in a different fashion is to me super engaging right now.

And the other thing I was raving on today is, for lunch today with a co-worker I made the most awesome omelets ever in our brand new kitchen, we just moved to a new floor with my team. I just love food and today's omelets were amazing and we had some good wine for it for lunch, and it was the best lunch I had for a long long time. It was amazing. Shout out to Linn for actually having the idea of making us omelets today.

Brian: Nice. You can't underestimate a good omelet. Anyway, guys thank you very much for coming on, jamming with me and talking about the JAMstack, talking about Contentful. I'm very intrigued, I'm definitely going to be using this for some future side projects, and getting real used to it.