Why we chose Wagtail for CodeRed CMS (Vince Salvino)

Speaker 1: Thank you. So if you have not uh heard of Coded CMS or seen it, I will uh tell you a little bit about what it's about, but um We've really been trying to push it a lot in the last year, open sourcing it and everything like that. So without further ado, a little bit of backstory So about uh CodeRed CMS is named after our company, CodeRed. We're just a small team, uh, and what we do is we do web development. Uh we support not non-technical or semi-technical customers. So our customers are not necessarily developers, they're people who are web editors and marketing managers. And those sorts of folks. And we're a little team that needs to do a lot of work, as I'm sure many other people in the room are in a similar situation.

Speaker 1: So we're not necessarily working on one giant site, we're working on many smaller sites. A little bit about our customers. Our customers have usually been burned before. Maybe it was a botched CMS implementation. Maybe it was just they're having issues actually, you know, getting what they need to get out of their website, those kinds of situations. Our customers are usually not web developers, but they're more of the marketing folks or you know content editors. And uh our customers do have budgets too, so they're looking for something that is not going to be a uh completely uh lengthy time-consuming project or uh a costly software solution or something.

Speaker 1: something like that. So with those things in mind, we uh you know yeah we're probably a lot like like most other developers in this room. So with those things in mind, we are trying to figure out, okay, what's the best thing we can do? Do we even need a traditional CMS? Will that Is there something better out there? And about 2016, 2015, we started exploring these options to try and figure out, okay, we we want to find the best possible solution for what we need to do. So we looked at a couple different things. One would be sort of a hosted SaaS or like a multi-site. So an example would be something like Squarespace where You don't really have any software, you sign up for an account, and Squarespace manages all of their customers' websites in one giant software product.

Speaker 1: So something like that would give you a much higher development efficiency because you're just maintaining one single code base. It's not really as likely that you would be able to open source such a thing or be able to have a stronger community, so that's kind of a con. But It it is also the least extensible if one specific site or one specific customer wants something, you would have to either implement it for everybody or nobody. So going back to a more traditional individual CMS, you know, a little bit less efficiency because you do have to duplicate some work for every site that you build. And but it aligns better with the open source and it is more expense extensible for each individual project. So

Speaker 1: could we get the best of both? We determined that yes, we could get the best of both worlds if we consolidated as much functionality as possible into whatever we build. So rather than offloading the bird into the uh developers of each individual site, we would take on that burden in the CMS to add as many features as possible. Sort of a batteries-included approach. We would deliver updates through some kind of packaging system so that it's it would not be difficult to go from version one to version two and it's a huge undertaking We want that to just kind of seamlessly go through. And we would in tandem develop sort of a hosting platform that helps get us closer to that sort of SAS

Speaker 1: experience of You know, you can sign up for something, your site's here, it's managed here, updates are seamlessly applied in the background without having to worry about it. So we determined if we did those three things, we would be able to get the best possible experience for our customers. So okay, so we need to build a CMS that has some of the benefits of a SAS. Why even reinvent the CMS? So there's lots of CMSs out there, you know, WordPress is the super popular one right now. Going back to a few things about us, we're a tiny team that needs to do a large a large amount of work. We want to be able to build websites extremely quickly. So ideally like a junior dev

Speaker 1: or maybe a front-end only dev. Would be able to handle 100% of the development for one project. We would not have to engage two or three or four devs and We wouldn't have to necessarily have someone work across the full stack of back-end and front end and designer and everything. We wanted to be able to just have one person with a limited skill set do the whole thing. without sacrificing any quality, of course. We wanted existing websites to be extensible to infinity and beyond, to quote Buzz Light here And uh that would just mean that someone's not going to get locked in, someone's not going to regret their decision and say, uh, we're we're really pushing this to its limits, we can't do any more, we have to rebuild it now.

Speaker 1: Burn it down, rebuild it. We don't want to get in that situation. And uh all of our websites, or all websites that anyone builds with the CMS, should be able to get major features added to them without having to actually touch the code for the website. So major features can be rolled out to everyone. Essentially for free with you know no additional developer time required. So those were kind of what we need to do to be able to maximize our work. And for regarding our customers about having been burned before, some of the things that we see all the time, or the biggest complaints that we get are unexpected breakage due to what I will call plug-in hell. And uh, you know, when you have sort of a point-and-click solution, it's really easy to to discover things and to add things, but maintaining that becomes a nightmare

Speaker 1: On the flip side, you know, if you don't have if something if features are not easy to discover, then you know it's more costly to build. Speed and quality. just degradation over time design. I'm sure most uh developers in the room have probably inherited something that was probably new and shiny at one time, but has since just become bogged down with You know, it is probably the UI elements are broken in it from years of updates that have not been well maintained and those kind of things. And we wanted to be able to add features without having to rebuild every time. So we've seen so many situations where someone invests you know, good money and time into a website.

Speaker 1: A year later they want to add e-commerce or their business gets, you know, acquired by another company or something and it's like, ah The solution that we invested in is not going to work anymore because our business needs changed a little bit. Time to burn it all down and rebuild it again. So we were evaluating different CMSs out there to see if there anything that fits what we need it to do. And these are some of the major ones at the time that we you know, we're aware of and that we we kind of explored a little bit. I have sort of a gradient going from left to right, uh orange to bluish color of the the uh left orange ish side is more developer friendly I'll say and kind of not batteries included

Speaker 1: whereas the blue side is super user friendly but kind of too user friendly to the sense that it is not developer friendly anymore So this is just completely object objective or sorry subjective opinion, but um you know Umbraco, Wagtail, Plone, Drupal, Django CMS, WordPress. There's a few others that we kind of looked at, but these were the ones that were kind of major players at the time. Wagtail probably was not a major player at this time, but it was newer and caught our interest. So uh I'm just gonna quickly go over some of them so you can see what our decision-making process looked like. Um Bracco Embraco is a. NET CMS, and I would actually encourage any Wagtail developer to look at Embraco

Speaker 1: because it's sort of uh the bizarro wagtail. Like it's the same It's very similar to Wagtail, but it was developed completely in a Windows. NET environment. So it's I I think it it tries to do a lot of similar goals. It is also open source. Um it's it's really interesting to see the similarity between Umbraco and Wagtail. They just went in two completely different worlds. So anyhow, uh Umbraco has a nice admin UI. It's a clean MVC structure. It isn't C sharp though. But For us, it was Windows only, it required, you know, the whole Visual Studio environment, Windows Server, SQL Server licenses. We were not prepared to invest in that stack, and we were not prepared to

Speaker 1: you know, kind of switch everything over and it was really a major commitment to go that route. So for us it was a no. The other thing was WordPress. So we would build our own, I'll call it mega WordPress, you know, WordPress Plus. To do everything we need it to do. I use the language and say probably we would have to abuse WordPress a little bit, but maybe a better way to say it is we would really have to stretch it beyond its limits. We would have had to build sort of a code-red layer on top of WordPress, which could have been probably a theme and some plugins and a whole bundle that you'd have to install on top of WordPress. There are many other themes that do this. They provide their own editor interface, they provide their own set of features.

Speaker 1: And having been a person who used many of those themes, they're just really kind of still painful if you are not the developer of the theme, trying to add more to them. Even if the theme is good, it's just still hard to add to it. So for us, we kind of decided, well, it feels a little bit hacky. This isn't really gonna give us Exactly what we want. And our developers really kind of didn't want to build it. So we we decided to say no to that. We looked at Django CMS. It was Django, which was a huge plus because we like Django a lot. Django CMS has a really nice WYSIWYG Visual Editor, so the way its editing interface goes is

Speaker 1: You l look at the actual web page, the front end, and you can click and edit, you know. So very visual, very nice. Um surprisingly though, we at least in our opinions, it was not very Django-ish under the hood, for lack of a better word. It just felt like you, it did not feel like you were developing Django. It felt like you were developing its own way of doing it had its own way of doing things. It just felt kind of a little bit off to us. So we were just a little surprised to see that. But maybe it was because our backgrounds are just more kind of strict Django. So then there was Wagtail, which was anyone from the 90s here. But Wagtail was kind of the new kid on the block at the time.

Speaker 1: It caught our attention because it was also Django, so a big plus. It it had a really nice admin UI, which was a plus. And uh it was very Django-ish under the hood. Uh the way the models work, the way everything, you know It's kind of a class-based view of this the serve and everything, and it was just it just made sense as a Django developer to say, oh yeah, I I still feel like I'm doing Django. So tentative winner, we said, okay, let's let's go with Wagtail and see where it takes us. Big selling points were kind of just the general structure and the nice UI, honestly. Those were kind of the main two selling points. So we decided, okay, we need to build kind of a mega wagtail. We need to add a bunch of stuff onto Wagtail to to make it fit our needs.

Speaker 1: So the building of Mega Wagtail. We started this in 2016. And uh there was quite a lot of trial and error. Uh there there is a learning curve to Wagtail. Um, you know, getting the basics down, making a model and making a snippet and everything is Really easy and really well documented, but once you start diving deeper into it, uh it gets a bit, you know, hairy just learning how all these concepts work. One thing I point to is the stream field, which I tend to say it's the best and worst feature because it's a very nice concept. It has a very, very inventive UI. They're easy to make and use, but once you start diving deeper and you say, oh, I want the stream field to be more dynamic or I want it to do

Speaker 1: have different kinds of logic built into it, it quickly you you quickly go into kind of uncharted waters. Regarding that. So that was one of our challenges. We made alpha versions and rolled it out to a few smaller client sites just to kind of test things out and see how it works. One another struggle was making things really dynamic. You're trying to do lazy loading or having things fire and happen on init sometimes would really uh not play nicely with migrations and you know there was just a lot of kind of the under-the-hood plumbing that uh it just had to be figured out So those were our main our main learning curves. And we we did need things to be dynamic. In our case, we we couldn't just say, oh, well

Speaker 1: just make a field on the model for it. Which is the straightforward and probably the correct way of doing it. But in our case, we said no, this has to be dynamic for everyone who uses it. It needs to be able to happen on a per object basis. It can't be defined on the model So we had to do uh a bit of work to make things uh much more dynamic. Um the other aspect to this was server-side hosting. And yeah, it's a Django site, but uh you know running a Django site is is a bit different than running uh dozens or hundreds of Django sites. So there's a little bit of a learning curve to doing that And um, you know, we still wanted to kind of reap the benefits of the SAS uh solution where you have one code base.

Speaker 1: We didn't want to manage a hundred different website code bases. That would just get too messy. So we've tried to solve some of this on the on the uh server hosting side with some Docker you know images and things so that we can have uh better cost and and better you know use use the memory on the machines better and stuff like that. So uh finally we ended up with CodeRed CMS and we uh open sourced this the first uh beta I guess you could call it about one year ago Back in June 2018 on GitHub. Since open sourcing it, we have built probably about a dozen like serious sites with it. We've started showing it to our marketing agency partners

Speaker 1: and uh you know these people have it has been very well received, you know, wagtailing CodeRed CMS because they really are the same kind of product. So it's it's um things are going well for it. Making it open source proved to be a lot of work, but it was sort of an investment that we wanted to do and say, okay, we're we're kind of betting our future a little bit on this. as a as a really good, really high quality, you know, I don't want to say future-proof, but uh a long-term uh thing for us to to be using for a very long time. So uh you know betting on Django was a safe bet at that point. Django's been around for a while. Betting on Wagtails, not quite as safe at that time, but the community was very assuring. You know, it seemed to be an active community In the past two or three years, it has only

Speaker 1: the, you know, we have seen the community grow and it has been very reassuring and very a very great thing to see. So I think building on Wagtail now, I think anyone could feel extremely confident about it. It's had a few years to kind of test its metal. And uh so we're hoping that some small businesses and marketing agencies who need this kind of solution will bet on Code Red now. in the future as sort of a step up or sort of an alternative to what would be commonly viewed as DIY or freelancer solutions We're hoping that coded CMS will kind of provide a better way of doing that. So um I was going to show a little bit of a demo here, and I think I have a few minutes, about

Speaker 1: five, ten minutes or so. So I just want to show you what it what it actually is because this might not make as much sense without actually seeing it. So we take a very much a batteries included approach. So I'm going to show you what the battery is included looks like. And this is so we're trying to get this sort of on par with like a WordPress where you open it up and you can immediately start doing things with it. Whereas with Wagtail, you start it up, you get the really nice homepage, and then you click on your homepage and there's nothing there because you haven't coded anything, you haven't defined any models yet. So I'm just I have pip installed coded

Speaker 1: CMS. So I'm going to create a project and this is very similar. Oh, okay, thank you. Um I'll call it uh Wagtail space. Okay, so same thing as Wagtail Start essentially. And now we're just gonna run a couple steps here. We're gonna do migrate and run server basically So these steps probably look really familiar for anyone who has uh done Wagtail Start.

Speaker 1: And now I'm going to run server So now I will just pull that up. And you're going to see a slightly different start page here. You can see it says Wagtail Space, because that was the name of my project. And I'm going to go to the admin. I think Tom really summed this up. Like first of all, thanks a lot for the shout-out this morning. And I think you hit the nail on the head saying that CodeRed CMS is a distribution of Wagtail. Like that that's exactly what it is.

Speaker 1: So you're gonna see that this looks you know pretty much exactly like the Wagtail admin. We have our page. I'm gonna go to our home page here. You know, this is just the Wagtail admin And when we edit it though, you'll see that there's quite a bit different going on. First of all, it's a little slower, and that's because we have loaded up the stream field. So right away you could probably see we have a few extra tabs here. I'll dive into those in a minute. We have our homepage. This is just using kind of our generic CodeRed CMS webpage, which is just a general purpose page you can use for about anything. And uh it's all based on Bootstrap CSS framework. So we have uh hero units, responsive grids, and everything.

Speaker 1: So I'm just gonna go through and and uh put a few things in here. I'm gonna make a hero unit I'll uh do a background image, do the space picture here I could do a few basic options and I'm going to add some content inside of this. So I'm going to use the grid. This is the Bootstrap grid. We use it all over the place. Uh I'm just gonna do one column and I'm going to add some text Make that an H two and uh okay, let's see what we have Cool, I have a hero unit there. Let's add a button below that.

Speaker 1: We have all these great once you're inside of a grid, you can add all kinds of different content. So we'll do a button And I'm just gonna set that to go nowhere for the time being and the title So there's our button. It's a bootstrap button. Everything is just using like vanilla, straight up uh unmodified bootstrap. Let me change that so because we're using Bootstrap we're linked up to some of the standard stuff that Bootstrap does, such as the classes and whatnot. So I'll change that blue button to a light, a light colored button. And that's a little bit more readable there. And let me add something else below our hearing unit. I'll do a grid row

Speaker 1: and let's do two columns. So I'm going to do my first column here. I will add maybe an address. Visit us and I'm just gonna put an address here And that's in one column, so in the second column, I'll do another column below here, and I'll just do a Google map. And I just want to search for the same address And let's preview that and see what we have now.

Speaker 1: So now we have a two-column layout here, and there's a Google map, and there's our address. So this is just kind of the general approach that we've taken where you can just quickly go in and start and start working right away to build out your sites and you could run, you know A dozen different sites like this with writing zero amount of code and getting all of your basic uh grid-based components and modals and images and uh you know, just the kind of the basic stuff that you need pretty much on every marketing website. So that's that's what we have. I'll be here at the Sprints tomorrow and um probably working on some Wagtail stuff and also available to help anyone. If you're interested in getting started with CodeRed

Speaker 1: CMS. And uh yeah, that's my talk, so thank you. So uh I think we're probably right on time, but if you do any questions. Is that any questions? Yes.

Speaker 2: So With something like the columns out there, how do you manage responsive design on the uh public-facing side? Like with those columns, what would happen? when that turns into a mobile view and how does a content editor know what's gonna happen there?

Speaker 1: So we try to do sensible defaults, but of course uh this is actually a custom thing that we've added to Wagtail to our Wagtail uh So you can change uh the breakpoint and stuff if you want to. But uh the defaults are there. Uh you can change it per block and uh Everything is responsive by default because it is kind of sticking to the stock bootstrap and bootstrap handles a lot of that good stuff for you. So you get your menu, your your menu for your nav bar, you get the column stacking and just you know the basic stuff like that.

Speaker 2: Cool.

Speaker 1: Yeah. If if Bootstrap does it, then we probably do it too. Yeah, so there's there's there's some there's some options, uh-huh. Yeah.

Speaker 3: Sorry if you already mentioned this and I wasn't. I don't know. But do you provide out-of-box support for skins or things?

Speaker 1: That's the number one question we get, and it's coming soon. So this is still kind of in a beta, but you right now we have templates for everything. So every single block, every single page that we provide has a kind of a bare bones template. And you can override those templates to do whatever you want And you can also customize at the page level and the block level. You can change the template that's used. I don't have any more templates right now, but you can change the template that's used for every single block. And also you can change the template that is used for every single page as well. So you can very easily make your own HTML files and just change the theme however you want. And we we do want to eventually make kind of a standard way of doing themes that

Speaker 1: you can just pip install a theme and it will it will kind of automatically override everything and you'll get the theme. Yeah, so coming soon. Come sprint. Yeah.

Speaker 4: Um you guys were working on an extension of the CMS. Did you it sounds like you have a previous incline

Speaker 1: We've done a little bit more informal. We had to uh mangle the stream field a little bit to get it to work with our kind of nested uh nested layout. And we we've we get some feedback, good and bad. Uh some of the bad feedback says more that like It 's hard to really tell what you're doing. It's not necessarily visual. Once you start to get two or three levels deep in the nest, it's kind of like you kind of lose track of where you are. So we're actually very interested in trying the React, the new React Stream Field to see if that, you know, I'm sure we will have to modify it to fit what we have or modify what we have, but uh we're hopeful that the React Stream Field will provide a little better experience. on that part.

Speaker 1: Yeah. Yeah.

Speaker 5: You you mentioned SAS as an important aspect of this. So how you How do we deal with that?

Speaker 1: So uh I'm referring to the software as a service versus the SaaS CSS. Which is also something we're interested in. But yeah, the software as a service. Um we haven't quite got that far yet, but we do have For our own clients and for anyone interested in working with us, we have a hosting environment that is uh completely managed. It's very SaaS-like where you can just Spin up a code red CMS with the click of a button and it it's there and you can automatically apply security upgrades and automatically apply product updates and everything just behind the scenes. So uh there's really pretty it's pretty low friction from that standpoint. It's kind of inspired by what you're seeing now with like managed WordPress hosting or those types of where you're really trying to abstract it away from the server and make it more about the app.

Speaker 1: So that's what we've been working on. And we do similar to prior discussions about how it's really difficult to get Wagtail up and running for the first time or really difficult to host it. We do want to try and improve that process as well so that you know developers can install uh code red CMS uh right right up from the get-go without having to say, oh, you gotta deal with WISGI and you gotta deal with you know Apache and everything. Work in progress. Yeah. You're

Speaker 3: forked with Wagtail, so when Wagtail releases new versions Is it problematic for you to merge from Wagtail or is that pretty straightforward?

Speaker 1: So I am proud to say we do not we did not fork Wagtail and we actually have a pip package that you just pip install code red CMS and it has Wagtail as a dependency. We do pin the version of Wagtail, but you can you can have a hybrid, you could add this to your existing Wagtail site by just adding that package to your requirements. txt. Um so they're very much, you know, it's similar to the relationship with Wagtail to Django. Like if you're doing Wagtail, of course you can do Django. It's written in Django. And ours is the same way. If you're doing coder CMS, of course you could do Wagtail, of course you can do Django. We're not changing anything about those. We're just adding more on top of it. So yeah. And I think there was one more C O column.

Speaker 1: What does that provide? Oh, uh it's we have a lot of features. Um the SEO stuff is just open graph. Uh you know, when you when you're linking out on Facebook, LinkedIn, Twitter. You know, there's everyone has their own standard, unfortunately, and everyone has their own uh meta tags that they need and managing those manually is quite tedious, so we have that all built in. you can just kind of be you know manage all that in one place on the page. But lots of other features. Check out our GitHub repo and everything. And yeah.

Speaker 2: There's one question in uh Slack. Is it stock bootstrap or can you set variables via the CMS?

Speaker 1: It is uh a stock bootstrap. There are some variables in the CMS. Um some of that is still kind of undocumented because we're trying to improve it, but you can you can it's all done in HTML templates so in theory you could you could remove bootstrap and use your own framework We have not had anyone do that yet. Some people have expressed interest in that. So further down the line, I think that will be kind of wired in with the themes where the theme will be able to just change the framework. Yeah. Okay, thank you.