 Okay, Amitai taught me this technique for starting everybody shut up, okay, so hi We're here to talk to you about content to CMS, which is the community driven API distribution for Drupal I'm here with these lovely people who will introduce themselves Shortly my name sally young. I'm a senior technical architect at lullabot and I'm done winner. I'm like a former scientist. No, but like I would like to be Yeah, and yeah, I'm freelancing. Hi, I'm Christina to millers. I just joined out and designed some stuff and try to do some robot Yeah, welcome so There was a lot of like discussion at Dubicon Baltimore around the idea of having an API first distribution so Like a lot of people like started to experiment like with the idea of using the couple Drupal and There's a lot of stuff. You need to know about that in order to to actually do that and we realized there was a like a lot of potential to help people This doing that so we kind of thought about so what kind of groups of people out there We could help and we came up with these we like three personas. We call them fruits Angela and Nina and The founder developer fruits the technical lead Angela and the Drupal developer Nina and We try to like think about like what could help them specifically and then we like build this idea of Contender around this idea. So let's start with the front of developer. So we Thought about the front of developer That's someone who probably like knows the other scripts. Yes, I say she all like perfect They use npm every day. They they babble everything and I've totally into webpack or they don't know their thing in there like in their domain really well, but Why they like master the front end they don't necessarily know like how to store their data. I Mean many people in that area like use MongoDB as like the solution of everything But that's just a database, right? They maybe use firebase which is like Basically back end as a service from Google But we thought maybe like Providing them an idea that Drupal is out there Which is an open-source solution to their maybe to their problem. Hopefully Maybe we could actually like tell them hey cool here's something you could use But they are like problems with it like we can't just put them through in front of them Like maybe they have never used PHP before Maybe they don't know how to configure like a web server or something Because it's just like so easy with like note mon or anything. It's just npm start and be done with it So we thought about how to make it as easy as possible for them to like try out content So we came up with the idea of a one command installation So if you go to content as he messed it up There's like three lines of stuff you need to type into your shell and then it downloads contenter It installs contenter using SQLite which is a database on on disc without any further installation requirements and It starts a web server using the PHP built-in web server and then it actually even opens up the site inside your browser so That's our idea of Making it as easy as possible. That's not meant at all for any kind of production usage But it's just a nice way for people to get started And once you have completed the setup you will be presented with like our welcome screen We did more than just the typical usual typical welcome screen to go with us. Yay. We don't have content Which is like not really welcoming so we try to welcome them and Yeah, what you can do with contenter when you first see it is a couple of things you can manage content Like every proper content management system. That should be a good thing to do Then you can manage your media. So upload images and we use those images Yeah, you can Define your content models, which is basically adding fields and content types Which is a really important step in a decoupled world At least for me because you can you need to like design your content models in a way that it's actually useful for like potentially more than one consumer then API is like an API documentation. How can you actually like Do HTTP request to get get your data back though. That's all accessible from here There's access control which is like creating users user roles and like like OAuth Clients and this kind of configuration and reports like usual like locks and stuff and then Unlike so so far this looks exactly right like reservoir. So all the things We basically copied their code because it's open source Yay And but we have one we had one idea. We actually want to enable like To go beyond that and that's why we have the advanced hub, which basically just opens up the normal manufacturer of Drupal and Just provides everything you have there Yeah, let's talk about a little bit more the technical like base of this we use chasing API Which is a module mostly written by a material who said you can't be here Chasing API is a standard for whiting West resources or West endpoints. So it is Chasing but it's a like it's a It's a form of chasing which has opinions. So it there was a standard Which is like, okay, here's your actual data and here are maybe errors of like validation and here's your Peture information and so on and so forth It's a standard which is partly used by people It's really really common in like the Ruby and the ember community right now Yeah, but it's really nice to have a module which just outputs and Provides to every any kind of data to provide. We have authentication using simple or We have media I'll talk about that later. We have API documentation based upon It's called redox this UI and Like powered by all kind of conflict modules Mostly written or like partly written by for example someone from the reservoir team, which is also cool We share stuff together We shared in the past and then we have chasing API extras which allows you to customize your Customize the Jason in a way that it doesn't look like Drupal. So instead of having field underscore Title you have just title or something like that. And we yeah, we have image file support and we think about adding Let's talk about documentation we try to be a documentation hub For people so as a fun developer, I maybe I know my fun and stuff, but I don't know how to like maybe configure Drupal or like All kind of things right so we provide like this documentation hub It's basically a collection of external resources of documentation So we have like here two examples. It's like nice videos from Mateo because he's awesome And Yeah, that's the idea have a collection of resources as a starter for people We also try to encourage people already to be part of the community by having us suggest a tutorial link up in the top So, yeah, I'm not sure whether anyone used it All right, and one thing we added is media Because when we looked at all the proprietary CMS is out there or like Like contentful for example, which is a CMS as a service They have like content models and you can define content models nicely And then they have media and it's like a sibling because everyone expects that you can like use media or assets or images How you call them? We have a really simple implementation using the media module in contract or media entity But there are many features we could add in case you have feedback What you actually need on a database? Maybe you need need like a copyright statement somewhere in these images or an expiry date for media I've heard that people try to have that Yeah Nothing we have added recently is image style support So When you have a complex site, but let's say like 15 different image styles and you have hundred images You have a overall combination of 1500 possible images But the way how you configure your site you actually don't have that many Images in theory available for the user. So if you would be able to like query any image for For any image style you could really fill up your disk space really easily So you need some kind of protection. That's why dople by default spits out this I talk in this URL I talk equals TK something it's a way to protect Like this kind of attacks so but in the decoupled world that's tricky Because in a decouple so if you would just have the URL to the image That wouldn't work because you still need to somehow get these the secret information out of doble and the way how we do it is We allow consumers or like API clients to say these are the image styles. I want to use so in this case we have two of them recipe list 350 and 7050 and They you can configure for your API client. These are the ones we I But I need and then you get these URLs and you can use them directly Which is nice and simple solution On a production environment, you maybe actually want to use like your CDN Which does the image resizing for you instead of your server Yeah, the final thing I want to talk about is workflow. We don't have support for any kind of workflow right now that's mainly because Jason API doesn't support revisions right now and that's mainly because The entity query system doesn't support revisions In the full way it supports revisions for a single entity, but it doesn't support revisions once you have any kind of like Relationship in place Yeah, maybe we should just accept it But yeah, you need revision support in order to have any kind of like preview right because otherwise you can't access it but There are like really nice way how people on production actually Still do something nice with preview and I think that we'll talk about that So Workphone preview in Triple eight with decoupled Architecture is something I've solved a few times for client projects. I've worked on I know we have a team working with Jason API right now and one of the solutions They have done is to push out revisions to separate preview databases It's really tricky because you don't want to put all of your revisions in your public API necessarily especially if you're a new site and you might have embargoes on your data But you still want to preview them. You don't really want people to start trawling through your API to see What the secret news is going to be in 15 minutes time or whatever So that's one way One nice thing about content is that we have set up Authenticated users for you. So you always have the option of only allowing Unpublished or you know new revisions to be available to authenticated users Obviously, you have to then implement that in your front-end consumer So if you're not already implementing authentication, that might be a bit of a pain One other Thing about it though is in a decoupled environment preview actually generally gets a lot easier So usually we can preview one item because we can send that revision off to our front-end consumer You could even just send that like in a Small packet that's not even part of an API and open up your front-end consumer that way That's really great for reviewing one piece of content, but if you're pushing revisions into a database you can Pass lots of things off to your front-end consumer So if every piece of content has a unique identifier or you UID and it also has a revision Which is another unique ID you can push off those revision numbers into your front-end consumers as a list And then your front-end consumer can go through that list and every time it sees a UID that matches one of those revisions It can just slot in your preview content every time it sees that and that's really great because then you can Solve that problem of I want to see what my site will look like when I add these five new pieces of content So you can kind of have that staging area Functionality which has been kind of difficult to do with Drupal because our front-end is also our Backend and site and everything mixed in together Yeah, so I mean we have lots of ideas on how to do this I think there might be some patches in the JSON API queue now That's kind of working on some of the revision stuff, but yeah come and talk to us work with this With us on sprint they would be fantastic so now we're gonna look at the technical lead or angular and This is a person that is going to be evaluating Drupal against other solutions that are out there There's someone that hasn't necessarily used Drupal before they're going to be looking at other things like prismic or contentful or you know Custom Django frameworks all that kind of stuff They also are going to need to decide Whether they should do a decoupled site or not they might not have had experience doing decoupled sites before And so they're not necessarily going to know what's possible or what's going to be hard So if you've ever tried to do a decoupled site with an API, that's really great Like open your JavaScript framework you get some data and you're like, oh, that's really cool This is super easy and then you start again to the weeds of things later on where you're like, oh, no Now I have to do routing and all this other kind of stuff and you might not realize What demons lie ahead? So one of the things we try to provide with contenta is as well as the documentation It's quite an opinionated distribution So we want to provide Implementations of tried and tested patterns that we've used ourselves on projects and we know Will mostly work There's of course many solutions to lots of things But we want to provide one package that you can roll out your sites really easily with And we have lots of amazing discussions about this in the contenta Slack channel We had this epic one on Routing a while ago and it was amazing and all these people just came in and were you know telling us Oh well on my project I have these requirements and after all of that we could kind of come to a solution that we really liked Which I'll talk about in a bit But yeah, it's really important to us that people come and get involved and tell us what their actual use cases are before we start implementing these kind of things so These example implementations are actually doing in a recipe demo site Which is part of the out of the box initiative which Christina will talk about and The other half of it is we also provide lots of front-end consumers. So I work on the react consumer We have I share have a table. So I show you what we have in a bit But the idea with that is they're not only can you get going really quickly with your back end with contenta? You can also get going really quickly with your front-end as well because then you won't have to implement Stuff like routing you can just really quickly Get going and every like your URLs will work which would be really nice And if you're you know, maybe moving over to using JavaScript or other, you know, you've never used Alexa before and you have to write a skill then it's a huge win to be able to just download a repo and Mostly have it working so you can start hacking from there From the point of view of publishers We're seeing that So publishers used to redo their sites like every five plus years or so so they had quite a lot of longevity on their CMS is But what the company I work at we're seeing people doing their sites about every two years now so there's a lot more churn and The most expensive part of that Churn is that they need to migrate their data over and that is what takes by far the most amount of time so it is expensive and If the site has been built with lots of layout things baked into the content model Then it makes it really difficult to migrate as well because you're gonna have to pull all of that out And then if you're going into another site where it has lots of layout like embedded into the content Then you're gonna have to figure out how to make it match to your new layout So going to coupled is really nice in that way because it forces this migration to think about how What content actually semantically means as opposed to how you want it to appear? On this one front-end consumer because it puts people more into a mindset of we want this to appear on many consumers so instead of having your drop-down that's Green orange or red like actually what they really meant was Warning error or great Yeah, so it's pretty nice and also we want to help people with multi-channel publishing so Does anyone use the amp module here for triple? Yeah, a few people cool. So General amp is Google got really annoyed at sites being really really slow So they came out with a specification that massively stripped down sites and didn't let them put tons of advertising JavaScript and whatnot on And Facebook have a similar thing called instant articles and I'm sure there's others out there as well Instant articles actually hasn't been very popular the amp Has been super popular with us while clients We want to help people get these things out quickly without having to like really Hack into their sites so they can provide something clean and quick when they these new standards keep coming out So yeah, we have like a hit list of hard problems that we've been working on This is not extensive One of the things as I mentioned is path aliases. So Drupal has a routing system. That's really great Our front-end consumer has a routing system and maybe your app has deep linking. They're not always going to match up So it's really tempting to use the path Module in Drupal because you know it does like nice URLs for us. We can configure it. That's really great But my favorite example of where this goes wrong in decoupled is you need to make a path called slash admin Or slash node on your front-end consumer. So you go into Drupal and you alias admin and that's great and that appears on your front-end with a node and then you try to go to your admin page and It just shows up with a node and you realize you can't access your admin page anymore and that's great So one of the things we've contributed is the snail module. You can find that on our github It separates away Drupal's routing system from all that path alias stuff. So you can keep those clean, which is nice We also have been thinking about WYSIWYG editors a lot. So in multi-consumer environments, we can't provide as much stuff in the WYSIWYG as Editors would like, unfortunately So if we want to provide like a really cut-down experience that's going to be portable we're also thinking about whether Your consumer is going to understand all the things that are available in that particular text format So for example, if you're deploying to a Samsung TV It might not understand what an HTML image tag is and if I'm deploying to my front-end Then I might not even want to use an HTML image tag I probably want to use a picture element with responsive images So we have to be very careful with the way that we add semantic information around body text with WYSIWYG's in decoupled It's kind of touched on the multiple consumers already. That's fine Image styles Daniel mentioned and another problem with that is that you don't necessarily Know when you're building your front-end consumer what image styles you're going to need So you might start building a sign and okay I want one that's 300 pixels wide and so you go to the CMS team and you ask for that And then you realize you didn't actually want that at all and now you need five others And you just have to keep going back and forth for the CMS team and Bugging them all the time to add all these image styles for you So that's something we want to make a little bit easier for you to configure but still not allowing Drupal to just create any image style ever so someone can come and take down your site and fill up your disk We also Provide authentication out of the box as well So I was can be really tricky to set up so we've set that up for you So you can already start getting authenticated data out of Jason API and Something we've been thinking about recently is release cycles So one challenging thing with an API is that you want to maintain version compatibility We can't version things. It's Jason API right now So if I decide to take a field away, then it might break all of my consumers We were thinking about adding some kind of versioning string We're not quite sure about this one yet. So if you want to come and help us in the sprint with this Please do it's it's very tricky because one of the most powerful things about Drupal is you can just get in there and Change all the fields and content types and that's great But we need to roll those changes out to our consumers in a non-breaking way And one option there might be to just say like once you've created a field That's it like you can never delete it You can migrate over to other fields if you want and and deprecate them. But yeah, it's one idea Yeah, so as I mentioned one of the things we are doing is Providing lots of demo applications which follow the out-of-the-box initiatives. I'll hand over to Christina who can talk to you more about that so Hi, the good part here is that there's a demo if you want to try out content that this demo is thought especially for Testing real-life things. I mean how you will work on that and It's based on the out-of-the-box Initiative content model that we actually work together to come up with This content model We started before with some with with lauri and some other people just Trying to figure out which we are going to be the content types and fields and so on and later on we Will talk with them and it for me it was really I think that open my mind Regarding that because Together we figure out that we had to find a way to Put the content in separate fields. So for example from Alexa you can read it because for example What you see is what you get from Alexa is not the best thing to do so We found the rich content model that you can see For example for the recipe you have the Ingredients you have the steps you have to follow a description. So you have these things separated and There are teasers. There are teasers for different content types and it gives The content model was defined before the design support the out-of-the-box initiative was created. So there were a great bunch of wireframes created by Keith and All the consumers people that was working on the consumers had these wireframes to work around this and to figure out how to make all the all the pages and recipes work with the consumers and They could compare from different approaches from different consumers how to work with everything So as you can see there are a bunch of consumers most of them based on JavaScript libraries and so on you have react you have Men so on but you also have a chatbot that it's Actually working with Twitter, but you can also try to find a way for having Alexa and Well, you see you have well Angular react view and you can see how each other solved a problem that you already have Just Here you can see that it goes Is it working I Was I was saying they started working before the designs of the out-of-the-box was great were created So it's mainly based with Material design so you can see that it's it's nice you can see recipes here you can see that the recipe itself with preparation time for example So they figure out and they help together One to another and it's actually working and you can try it now on several consumers Take your Okay, and finally the last target was the Drupal developer Nina that Stop typical person that how called how knows how to build the Drupal side knows how everything with modules work and so on and They come out with these steps where you install content that you don't have to See the composer. It's not just a composer. You copy the composer and you have it They came with these smart configurations that they know how to How to work with it and they came up with all together and then you just install content up and You actually have the app you ready for try it it and play a little bit with it then You actually have a bunch of Consumers to try them if you are going to work with react for example, you can try it out or you are a React developer and you just want to try to help you solve all the things you have it just right there to try it and Of course, there are a lot of there's a lot of documentation there So you can even know much more information about that you can also help adding some more documentation and There's this really useful thing where you try this demo with the recipe and You probably and are not going to build a recipe magazine for your customer So you just have to click and remove everything and you actually have a Drupal Ready the coupled environment and you just have to create your content types And as you will do with any other CMS and it's ready and configured to to try it so next steps There's a mailing list that Mateo Created some days ago for the couple the couple Drupal jobs here. You have the link to join it The plans is having a graphical support and Let's talk about these during the Drupal cone You there's the slack channel where you can join and chat with almost I think 199 people one 200 yeah and Of course, you can come up and say your paint bones what you find out where while you are building and Whatever you think you need and What I was saying just join content the content a slack channel you can follow content on Twitter Come and talk with these smart people and to get involved just join the conversation There's a bunch of people just talking and answering things on the slack channel. There's move on almost every day there and You can decide where to contribute. There's a lot of documentation You can ask for people where to start and they will point you where you can start you can ask for help if you if you are just getting stuck somewhere and For me the most important part It's just do it healthy if you just I have to do another stuff for a while Just came up came later and continue helping but just Don't burn doing it We'll take questions just after Christina tells us about the logo because I really love the logo. She designed for us Hello This was very impressive, but it seems it's using a lot of bleeding edge code And I'm wondering about how will this get industrialized in terms of updating this is always a problem with the distributions I Had that you would see you with yourself and handling this I think we have less of a problem for that because We don't have really a content model. I mean you wouldn't like use the recipe website So you wouldn't like use that along with a long way So like we don't have a content model. So we don't have to maintain it So at least our idea is like it's a starting kit. It's not something you Like you update. It's just a starting kid which like solves like so many hard problems I Know there are other people which try to solve that problem Yeah, it's it's tough. Hi So I haven't played with contenter yet I have played with reservoir and it was very pretty but I ran into one issue straight away Which I don't know if it's a JSON API issue or not Curious to hear your thoughts which was views integration straight out of the box I had to just turn on rest API and circumvent all the JSON API stuff just to get the data I wanted so I'm curious about that and also you mentioned sprints So I'm just curious on what the plan is and what you're planning on working on So when you said views integration, did you mean for getting data into your API or to list your content on the back end? To take your content from the back end and expose it to the front-end consumer, okay? Yeah, so so one of the ideas with JSON API and Contenter is that you won't be using views to expose that stuff anymore. One of the most powerful things One of the most powerful things about JSON API is you could compose lots of queries together So it's not like rest where you have to go fetch one endpoint wait for it to come back and then get more data that way You can Get all kinds of complex relationships and get all of that data out yourself through the query There's also another module. I'm not sure if we've included it yet It called sub requests so you can actually make separate requests separately But you can get it back in one call from Drupal itself So the idea is you would never need to use views for any kind of output onto your back end You would only be using it to build content listings and whatnot in your admin interface sure on that and It's clearly just a learning thing I think from my point of view because I did discover some of the additional query stuff I could do because out of the box. I found that you know, I want a list of entities I can get that with the JSON API bit That's of one particular bundle if I want multiple different bundles or mixed together with all the relationships that found The experience to be quite difficult and I did find some snippets of information in JSON API documentation on how to get like Relationship to a file entity so I can actually get the URI at the same time as the query and and I guess my thoughts on that like views I can just say hey I want to get all the entities of this type and I just want to get the file You're right. That's it and just give me the data. I want which is really good but what you're saying then is Maybe it pinpoints that there needs to be sort of like a query builder built in some way of actually Building up. There's complex views of different types of data and give you the end point so that you don't have to You know struggle around with things that we have come so acclimatized to with things like views to get that same data Yeah, a query builder. It's a nice idea that would just like spit out a URL or like a Bit of JSON that you could send at the end and the thing with users we when you stop When you're building these views you're essentially creating all these custom endpoints and so at that point you've like lost Standardization and if you're building with JavaScript frameworks, like there's a couple of MPM packages There's one called JSON API normalizer that I would highly recommend and it kind of like Makes it a bit more easy to read as well On the JSON API module page. There's a link to some good documentation It can be confusing. I've definitely run into it myself as well And in that case, I would recommend joining the content to Slack channel and we'll help you where we can and hopefully update the documentation to make it easier to Yeah, I mean theoretically maybe graph girl solve some of your problems It's especially because rough girl like integrates not trust with like entity query, which is what Tracing API is doing, but it's also like integrating with the youth and all kind of things But it's as I said, like it's easy to like fall into the trap of Like just doing a custom endpoint and then you realize that your other consumers can't really use that And and the reason we didn't put graph QL in to start with is because back when we started this You weren't able to just plug the graph QL module in and have data come out. You had to configure it for your content types, so it wasn't really practical, but that's changed now, so That's what we're gonna be working on. Hopefully over dribble corners I'll and to answer your other question about what to do during the sprints. I think we have a big list So we'll be on a table at the sprints come and find us or I think we'll tweet out stuff We want to work on as well. You know, it's a dick. He's been very patient First of all awesome stuff. Thanks guys Do you tend to host deploy and maintain The back end and the front end on the same virtual host or do you tend to break them apart? like what what's your Tendency there and we've actually left that up to the consumer authors themselves So I use her Roku for the react one. I think if you're using firebase for your Elm ones So yeah, it's just it's whatever is easiest for the person who's maintaining that particular consumer to do so Whatever you like which is kind of nice as well because then We're not hopefully not gonna run into some problems like oh no We didn't realize this would only work when everyone is hosted in the same place Yeah, so I guess my Thank you for your amazing work on the content. I actually installed the Installation profile first time this month and it looks really amazing. I was very impressed So my question I guess is related to his question is Related to the fact that sometimes maybe our API is not equal with your data model You might want to start things that you don't provide in your API or you might have some Permissions like field level permissions. So you need a more complicated API builder Or for creating the API. Is there any any work on that or is there any existing frameworks around? There's something material build recently which is the consumer module the consumer module is a way to say Okay, these are the actual consumers. I have similar to like like if you develop an app on Facebook where you also register apps and This allows theoretically to customize Anything It's just a data storage for something per consumer and theoretically allows you to customize things per consumer and The consumer image styles module is the thing which provides you the image styles and that allows you already customization per consumer and I could imagine that it will be expanded to Like Jason API extras could do the same but you could like customize the output per consumer and This kind of that but it doesn't solve your immediate problem, of course. I guess graph will Has a good solution for that. I don't know it doesn't really we just turn off everything that is related to the triple integration into everything customized and that's One of the big hurdles at least for us because of like if you really have to build a complex API Like with field level permissions and things like that. It's There's no framework for that So thank you for your answer. I Think one thing we can all sum up the cupboard is not a magic bullet. It's hard Yeah, and it sounds like a lot of people are having issues with figuring out how to get data out of Jason API And I have also been in that boat. I particularly found it hard Trying to figure out media because There's separate entities in Drupal and so when they come out of Jason API They're not actually connected to the content you wanted. So you have to start like Looking down the tree to try and figure out like what media matches up Which is difficult if you're writing a consumer and it's even more difficult if you are not aware of Drupal isms So, yeah, I would again recommend Jason API normalizer I would also recommend looking through the consumers if you go on our github. It's github.com slash content at CMS See how other people have got around this problem. I think for the react one I can show you Sorry, hang on. This keyboard is German. I'm confused So for the react one We use Jason API normalizer and I have this like transforms folder. So every time recipes come in I'm actually just like trying to make it a bit less Drupally as it comes out As Daniel mentioned like we do have Jason API extras to make it even less Drupally But sometimes you'll still need to do stuff on the consumers. I would really love it if we didn't have to do stuff like this But you know Jason API is a standard. It's not a Drupal thing Yeah here, oh, yeah, how do I do that? It's all German Yeah, okay, so Here I'm just trying to like normalize every way I store my data so that when you actually load the consumer up You'll have it kind of sane Is there a link to this? Do you have redux DevTools? production build anyway, well If you download Contensor react and open Redux DevTools, you'll see how I've normalized the data into a store So it's actually usable As a consumer, so I would go and try that one out and see if that makes life a little bit easier You're competing on a very competitive segment. So thumbs up and I'd like to ask you What do you think that's the main purpose and advantage over? prisming contentful and direct directors and Copilot and Usually like CMS services. What's the purpose of them? No, no, what's what's the purpose of content? Oh actually on what versus? Yeah, what's the biggest advantage? Yeah, well So with hosted solutions is obviously going to be limitations on what you can do so you can't just go in and add custom code to Do some kind of crazy backend service So you can't do that Sometimes that's not a bad thing Also, often people just want to own their data. They don't really want to rely on on a cloud infrastructure for that kind of thing Especially if you work in Certain fields like insurance They won't be able to store their data with services like that often because they always have to have it in-house because of All kinds of maddening security. Well maddening is good Um Lots of security stuff around it. So there's always going to be room for self-hosted API solutions Okay, cool. We'll call that a talk then