Atomic Wagtail
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 46 | |
| Number of Parts | 52 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/32732 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
DjangoCon US 201646 / 52
6
10
13
14
17
20
23
31
36
44
46
47
48
49
00:00
MereologyBit rateEndliche ModelltheorieDataflowTerm (mathematics)Right angleSocial classEvent horizonWeb pageLengthExecution unitAreaSystem administratorPhysical systemWeightStudent's t-testMultiplication signReverse engineeringProjective planeQuicksortTelecommunicationWebsiteOrder (biology)LogicPower (physics)Disk read-and-write headObject (grammar)Form (programming)Standard deviationModel theoryInsertion lossINTEGRALPoint (geometry)Software frameworkNumeral (linguistics)Video gameOntologyElectronic program guide1 (number)Goodness of fitType theoryMobile appBlogContent (media)Normal (geometry)Software developerProcess (computing)Connectivity (graph theory)BitLevel (video gaming)Open sourceCurveCanadian Mathematical SocietyContext awarenessSearch engine (computing)Generic programmingView (database)Functional (mathematics)Web 2.0UMLComputer animation
05:36
Real numberConnectivity (graph theory)Endliche ModelltheorieSpecial unitary groupProcess (computing)Block (periodic table)Right angleElectronic mailing listExtreme programmingMIDIData structureContext awarenessWeb pagePattern languageFunctional (mathematics)CASE <Informatik>Order (biology)View (database)Type theoryComputer programmingWordMereologyObject (grammar)DemosceneTheory of relativityAreaScheduling (computing)Latin squareStudent's t-testMultiplication signSheaf (mathematics)MathematicsQuicksortMedical imagingBitTupleInheritance (object-oriented programming)Social classContent (media)Field (computer science)WebsiteText editorSystem administratorBlogParameter (computer programming)String (computer science)Different (Kate Ryan album)Server (computing)DatabaseMeta elementComputer iconComputer animation
10:56
CodeRootWeb pageString (computer science)Combinational logicDifferent (Kate Ryan album)Module (mathematics)WebsiteSystem administratorComputer iconAttribute grammarBlock (periodic table)QuicksortType theoryBuildingFront and back endsLink (knot theory)Content (media)System callVolumenvisualisierungModel theoryMultiplication signDemo (music)Condition numberMedical imagingEndliche ModelltheorieParameter (computer programming)PasswordDerivation (linguistics)BitField (computer science)Form (programming)Social classFunctional (mathematics)Right angleSign (mathematics)Context awarenessSummierbarkeitReading (process)Rule of inferenceObject (grammar)WordWater vaporUniform resource locatorResultantVideo gameBit rateWeb 2.0Google Street ViewClique-widthCartesian coordinate systemInsertion lossGroup actionExecution unitComputer animation
16:16
Group actionTheory of relativityInsertion lossSelf-organizationIntegrated development environmentWeb pageConnectivity (graph theory)Library (computing)Disk read-and-write headFigurate numberCombinational logicQuicksortRevision controlMonster groupWordSemantics (computer science)Video gameLevel (video gaming)ResultantCellular automatonGodGradientExecution unitAnalogyLatent heatElement (mathematics)ConsistencyConvex setRankingMultiplication signProjective planePerpetual motionEndliche ModelltheorieMathematicsSocial classLink (knot theory)Streaming mediaField (computer science)Ubiquitous computingCodeMappingText editorWebsiteMereologyHyperlink1 (number)BitDifferent (Kate Ryan album)Markup languageMultiplicationType theoryModel theoryFront and back endsComputer iconCASE <Informatik>Block (periodic table)Content (media)Template (C++)Computer fileData structureComputer animation
21:35
Model theoryMedical imagingQuicksortWebsiteElement (mathematics)Web pageTable (information)Revision controlAuthorizationHookingCodeDatabaseInformationProfil (magazine)Multiplication signTerm (mathematics)Point (geometry)Instance (computer science)User profileUniform resource locatorObject (grammar)MultimediaService (economics)MathematicsLevel (video gaming)Time seriesINTEGRALPower (physics)Computer animationLecture/Conference
24:23
Computer animationXML
Transcript: English(auto-generated)
00:14
Thanks for coming to listen to me talk and, you know, stick, stick here for the, you know, the end of the, all the talks and
00:22
thanks to, you know, Torchbox for making Wagtail. It's a wonderful piece of technology and it's the reason why I'm standing here. So, show of hands, who knows what Wagtail is? Other than what Vincent just said. Okay, that's great. That's actually a lot more than I thought it would be. So, for those of you that don't know,
00:42
Wagtail is a pretty new open source Django CMS, created by Torchbox, and it basically provides this sort of groundwork to build your own CMS and that's in quotes because it gives you a lot of things that a CMS, that you would expect from a regular CMS. Things like a,
01:01
like a great admin or the ability to have a publishing system. Really anything, like a way to manage documents, images, things like that. But I like to think of Wagtail as something that's made for the developer, the designer, and the content. There's a lot of CMS's out there that really only focus on
01:22
the, either like the development side or on like the editing side. But I find that Wagtail does a really good job of combining all these great components that really should be relevant in a CMS. So why should you use it? It's really customizable. I've extended the framework, well the the CMS, on numerous occasions doing weird things and it's really like
01:45
held fast. It's really not a big deal to really extend even some of the most crucial components. In fact, my last project, I had extended the publishing workflow to add a staging site. So normally you'd have a draft state and then it's on, and then it's published.
02:04
I've added a staging site to that entire workflow. And that didn't interrupt anything about the other components of Wagtail. There wasn't any weird things I needed to take care of. It was really easy in that way. And it's got some really great features. Unfortunately, I can't talk about all of them or even most of them.
02:21
Actually, there was another curve at this conference that talked about Django forms, in which you kind of think about forms as data and in which you can build them dynamically instead of the static way as we would normally. And Wagtail does kind of use some of this and that's just kind of part of what Wagtail offers. So and you know, I could go into it, but there's a lot of great things that Wagtail offers. And it gets out of your way.
02:46
Everybody always likes to talk about how like developers are lazy, right? Like we want everything done for us. We don't want to be, we don't want to do anything. We just want to like write import essay, right? Like we don't want to write the thing. We just want to be able to use it. And I think that Wagtail has this like, I think I have a caveat, right?
03:01
I think Wagtail does this well, where it gets out of your way, but then it provides all these features that you'd like. So yeah, we're lazy. We want to be lazy. We don't want to like do anything. We also like, we also want it to like provide us with the things that we want to do. So, or I'm sorry, we want it to get out of our, we want it to get out of the way.
03:24
And just, you know, let us do what we want to do, but also provide the features that we want. It's also got, you know, Jinja2 compatible templating, as well as Django. Normally, you'd probably use Django unless you had some sort of reason. It's got built-in last-desert integration. So there's a bit of setup that you have to do
03:44
to achieve like a really good workflow or really good search capabilities with this, but it's really not much. And if you've never heard of or used a license search, I definitely recommend it. It's a really great, really great search engine. Well, it's more than that, but
04:02
it's easy to integrate in existing projects. It's not really something that works on top of Django and more about like beside it. So you put it in your installed apps and you're able to create a, it's, you create your own sort of CMS and I'll explain how you can create ways to create content types later.
04:22
And it's not going to interfere with any of your other Django apps. And you could really only have a blog that's powered by Wagtail. You don't have to have a one project that has to be powered by Wagtail. It's not like that at all. And it lets Django be Django. And this is like a really important thing. I think in the Mezzanine talk, he had mentioned this too, and I think I
04:45
haven't had so much experience with Mezzanine, but I found that Wagtail does this does this very well. So some caveats to how great this, you know, how great Wagtail is. It's not exactly your name,
05:00
your normal Django flow in terms of how you, which is a bit contradictory I realized, in the way that you think about how things get served, right? So you think of the way that a request comes in, it goes through the normal path, and you end up this views.py where you're, where you're returning this result. And, and I don't know if this is a bad thing or a good thing. I think it's pretty good. Where they have this,
05:26
this generic view function in which it calls the, the class in which you created to render to the, to, to render as the web page, and it gets the context and packages all up, and then through that generic
05:42
serve function, that view function, it will give you that, it'll give you that web page. So you don't have to do anything. You could have an entire Django, or you could have an entire Wagtail project, an entire site, without ever touching these up high. And also the documentation, documentation is pretty good, but it could be a lot better. I found myself
06:01
like coming across things, or at least when I started it, that were fairly easy to understand, but I didn't know, and it took a long time to actually get to that understanding, just because it wasn't in the documentation. And then there are a couple admin quirks, but I hear really good things about them being, that being updated. So let's just talk about some features real quick.
06:22
So the page model, which is basically the bread and butter of how this is going to work, and like I said before, it's got this built-in publishing workflow. And I guess I should back up a little bit. Page model, it is a Django model. It's, they add a bunch of really awesome functionality to it, and then when you want to create your content type, it is
06:42
something that you would hear from page, which you can see in code. It handles all the relationships between different pages, so it is like a child page of a parent page, or you can like get the children on this page. You can get the ancestors or the descendants. It's a really useful feature, and that's actually something they achieve through a different package called Treebeard. I don't really know what the relation is with that, but you can look into that on your own.
07:05
So it handles other things, like moving the relationship from one parent page to the other, copying the page, scheduling, publishing, so you're not having your content editors wake up at midnight just to publish some press release. And it's got automatic Wagtail admin registration, and I just want to underline Wagtail admin, because it's not
07:24
something that you're automatically registering in your Django admin. But anyway, so this is like an example of all you need to create a page type, a content type that you could add to your site and visit as a web page. So you'd go and you would, in your models.py or wherever you're going to put this model,
07:44
inherit from page, and then you can add even a Django model field, a date field, and then their own built-in rich text field, which is really just a WYSIWYG editor. And then in order to show these in the actual view that you're going to see, you're just going to
08:01
declare these content panels, which is just a list of these field panels, and it'll go in and detect what type of field that you're using, and then render that appropriately. So streamfield is really the big win, in my opinion. I think this was one of the things that most attracted me to Wagtail, and it's, to me,
08:23
just to explain, I don't work for Torchbox, by the way. I just really love streamfield. I really like Wagtail, and I think it's creative, intuitive, everything I say up there. And Matthew Westcott has written a really cool blog post that kind of harks on this, or like comes off of this theme of the Henry Ford saying, I think I'm paraphrasing, I don't know the exact quote,
08:43
but he says something like, if I asked them what they wanted, they'd say faster horses, and now we've got cars. So this is the type of thing that we're talking about when I say rich field, rich text field, or WYSIWYG replacement. Instead of this blob of HTML, we're working with JSON, and in order to
09:01
create these JSON objects, we're going to be implementing these things called blocks, which is a class that manages all this data, that creates it in the, that just creates like this nice structured block of content within this streamfield. And streamfield, if it's a little bit confusing, and I'll dive more into it,
09:24
it is really just a text field saved in the database. So instead of, again, this like completely, like it could be completely unknown to what's in this blob of HTML, now we know exactly how to access all of these individual components because it's all formatted JSON.
09:42
And so this would be an example of a block, which I referred to earlier, something that could manage that that JSON content. And really, we're hearing from a couple of things, but really to understand is that blocks.struct block, which is what we're inheriting from here, is just a way to combine different blocks, right? And a block you can think of as kind of like a field, like a model field, even though it's not something
10:04
that's actually getting directly saved to the database. The only thing that's saved to the database is that text field when you're declaring streamfield. And you can see that we've done other things here too, like in the meta class, we've done things like icon equals wagtail and semplen equals example block.html. And
10:22
that's how it's going to be used, or that's how you're going to see it in the admin, and that's how it's going to be rendered in the front. And we'll talk, we'll explain more about that. So on the actual page, this is what streamfield is going to look like. You've got your streamfield, which again is just that text field, just formatted JSON, and you pass in an argument of a list of
10:44
tuples, and each tuple has the string of which is the type of block that you're working with, and then the actual block class in which is going to be manipulating that data. And so, in order to really demonstrate it, and I know I might be harping on it too much, but I really, it took me a while to understand this.
11:04
My password's foobar, so. So, so here this is the wagtail admin, and you can already kind of tell that this is something that's derivative from other CMSs that you've seen, but to me, it looks a lot better. It looks a lot more streamlined, and here are some other features that I couldn't talk about, the things like images, documents.
11:25
This is where you could go with a look and search for these things. Here's a search for all the different pages and content types that you want. Snippets are really just models that you can register in the admin, and then we've got settings, so we've got really good like controls for
11:40
like adding users, adding groups of users, getting permissions on those groups, and and setting up redirects and different cool stuff like that. And then what's really nice, and something that people use all the time really, is this explorer where it actually has a page, I don't have anything in this, and by the way, this is a wagtail demo from their, their, this is their demo. I haven't made any of this code at all.
12:03
This, nothing is actually mapping to anything that I'm showing you in code on the presentation. So I, because I kind of wanted to show everybody that that does exist, so we can go to this root page, and then we can go to this atomic wagtail page that I've created, and we can see that I already have a continent here, but this is the string field, and this is what's going to look like in the admin.
12:24
And so you can tell that we've got how these icons, like how that icon made a like attribute comes in, that's the, I think it's like heading icon, and we've got all these different blocks that we can, block types that we can select, right? And, and this is great, right? Like this is exactly something that we want, you know, we want to be able to have a heading here, and then just say heading,
12:48
heading, and, and then we can have like even rich text field, and you know, sometimes that's, sometimes that's appropriate, because sometimes we want to put in a link or something like that. I'm not gonna put in the link, sorry. And then we can also do things like preview the page, and then
13:06
this content shows up. And you might be wondering, and I'll explain a little later, why, why it didn't just show up as just text, right? Because, and it's really because of that template, but I'll explain a little bit more right here, actually. So string field,
13:23
you can think about this, and if we, if we kind of know that string field exists on that page model as a, as a, as a just a JSON formatted text, we can think of each one of these blocks as different types, and C is before B is before A. So every time you're going to be rendering each JSON object,
13:41
it's, it's, it's in an order, right? And these things are orderable too, so you can actually move the different blocks if you want. So let's just say C is a person block that has a name, a date of birth, and a biography. Biography could just be something like a rich text block, but, but instead maybe we want to do something else too.
14:01
We want to put in a heading, and then the body is the rich text block, and then we add an image for that person's, like, headshot or something like that. And really, this is just a really simplified page, but what, what is really important here is just this. You're just accessing each block as a collection on this page dot body, which is a string field, and then just rendering that block, right? And
14:24
what's, what, and really that's, that's all you really need, and sure you can do really custom things like accessing the block dot block type, which will give you that string that you gave as an argument in the beginning in that tuple, so you can render it in a certain way, given certain conditions or whatever you want to do. And so
14:44
what's really happening here is that this person block made up of all these different other blocks is calling this render method, and this is somewhat of an oversimplification here, and this isn't exactly code that you might use, but then you have this person dot HTML
15:02
template that you're declaring in that block class. So, so once it gets to value dot biography, it will then call biographies render value, right, or a render function, which will do the same exact thing. So what's really great here is that you're able to actually modularize all, the entirety of your content instead of just having this big blob of HTML.
15:28
So just to step back, do something else for a little bit. What's, what, does anybody actually ever combine documentation or have some sort of workflow with their designers in which they were actually mapping
15:43
their designs on the website that you're building for them with back-end code? Nobody, nobody does that? Okay, cool. So, Atomic Design was thought of by Brad Frost, and this link I'm pretty sure is to the
16:03
article that he wrote on this. It's a whole book. It's an e-book. You can download it, you can buy it, you can just read it online. But essentially, it's just a philosophy or just a way of thinking about how we can combine different modules and design on your site into really consumable pieces. And so I'm gonna go over this really quickly. I'm not a designer. I'm just trying to, you know, explain how we can integrate this. So really five levels, atoms, molecules, organisms,
16:28
templates, and pages. I realize that this isn't exactly a great analogy with, you know, biology and then templates and pages, but but this is kind of how they've created that. And so an atom would be something simple, something like a
16:46
like a button or maybe even just a heading. And then molecules are a like a combination of atoms. Organisms are a combination of maybe molecules, maybe multiple molecules, maybe molecules and then atoms.
17:00
However, you want to define that within your own reasoning, sort of like guideline by Brad Frost's atomic design. And then templates would be just everything together. You can think of it as just your Django template or something. And then page is something that you have all the content in. So that's just a really brief overview, a really oversimplification
17:20
or really oversimplified version of what atomic design is. So when you're using WAGSO with atomic design, which is something that I've been working with for the past like year, is is you're going to map all of these blocks, these stream field blocks that I've told you about, to your atoms, your molecules, your organisms. And then you're going to combine them in your page type to be able to render all of
17:46
your different components consistently. So your design is continuously pervasive through everything that you're going to be developing with. So this is like an example of atoms.py where you have your heading and it just inherits from char block. It uses the title icon and then it uses the template
18:02
atoms heading.html. It could be something as simple as just using that, you know, H1 tag or it could have extra classes that you want to put on there. It just all depends on your use case. And then we have same thing for hyperlink. That may be a little bit more complicated because you've got could have different markup for external links or whatnot. And then we just do the same thing with molecules.
18:22
But again, since all atoms can be inside molecules and so on and so forth, we're going to just reuse these components. So every time you use a heading, you're going to, or every time you want to put a heading somewhere, you're going to reuse that in your molecules. And so like you don't have to worry, like you don't have to worry about multiple changes or like anything like that. Like in
18:40
random, here in this page, we have this blob of HTML where we have to change this H1. Oh, wait, we have to go over here and change this H1. It's all going to be changed right there. It's all just rendered exactly the way you want it. And it's also only going to be rendered on runtime, so that even if it's the same heading content,
19:03
you're still going to get that change whenever you want to make that. And so we do the same thing with organisms. We have seen this before and then we have a stream field where we have, we've combined all of this together. And so again, we've got this really continuous, this pervasive design
19:23
specification in our code. And not only just that, that consistency, but we also have a mapping between our designs where they have tons of documentation. Because designers love documenting and they love like understanding exactly how these components interact with each other. And we're just having these different actions. And then we can say like, oh, that's the exact component in the back end that does that.
19:44
And that's something I've never seen before. So this is like a really cool way to actually organize all these things. And it makes ramp up time for like new fellows or like new whoever to be able to understand like which maps to what. And so this is just some sort of, you know,
20:01
projects, file structure setup that I did. And essentially what my project is like is I put these in this elements folder. I put all of my atoms, molecules, organisms. And then in my models down here, I'm gonna be putting all my page types. And I, and actually in my project, I have a models folder in which I have all the different page, pages that I've created in that folder.
20:25
So a couple more thoughts, you know, Waxel is like really cool. It has that awesome stream field feature amongst many other features. And it's something that I've always heard from other people like content editors, really anybody, that it's just such a joy to use. It's a great replacement for something that is really unusable, like kind of not really intuitive.
20:47
We replaced it with, we replaced WordPress with Wagtail and our content editors were just, you know, jumping with joy almost. I mean, they were really really excited about it. And if you go to madewithwaxel.org, you can see all the different websites that Wagtail's like, that's Wagtail's powering.
21:01
There's, I think there's parts of like NASA. There's consumerfinance.gov, which is the CFPB site. There's Peace Corps. So it's not just some, you know, brand new, no one's ever used the technology. This is actually pretty proven. So I definitely encourage you to go and at least try it out, see what these features are like and see if maybe, you know, you can incorporate atomic design in your workflow. So that's it. Thanks.
21:32
Thank you, Kurt. We've got a few minutes for questions. So my question concerns image versioning and multimedia asset versioning. Is there any facility to
21:43
version images and assets so that they can be sort of identified as unique elements and then updated on their own affecting all pages? That's actually an interesting question. I don't think I know enough about exactly how these images are being, you know,
22:04
like essentially each image itself or document or whatever has its own ID in the database. So if you update that ID, it's going to be changed throughout the whole thing. I don't know about versioning. That's, there is such a thing in Wagtail, which is actually one of the greatest things about it that I'm sorry I didn't even mention, is really just the versioning of the pages. So every time you save
22:23
data on that or every time you save a page, that gets saved as a revision object. So you can reference that object. That isn't something that images have. I don't know if that entirely answers your question. It does actually. And I have another question, but I'm going to defer and ask it later.
22:43
One more question. Yeah, so my question is, is basically concerning like, say you have an existing site that has user profile,
23:01
you know, like a user profile page or something like that. And so I guess this is around integration. So and you want to integrate Wagtail into the site. Is it possible? And if so, how hard is it? Would it be to basically make it so the Wagtail articles, say you're one of them's an author or something, you would show that user profile information from an existing site.
23:24
You know, does it integrate well with models that exist already? Yeah, it already uses that whole models table and everything. So that's going to automatically get there. When you go into the Wagtail admin, you go to the users and it's just going to be there. Okay. That's my experience, you know. Yeah. Okay, and how does the, how does the code actually like hook up, you know?
23:45
So like say you've got, you know, does it just use the get absolute URL for instance if it links to their profile or is that something you customize yourself? You know in terms of, I'm sorry, I don't think my answer is entirely correct about user profile.
24:02
I don't know about that. Okay. I think the users themselves are going to be connected. I'm not, I haven't had experience with connecting the user profiles. Okay. Sorry about that. Oh, no problem. Yeah. Thank you. Just one last quick point to make. First of all, thank you, Kirk, for your amazing talk. Thank you so much.