Keynote: Plone 6 - Power and Control
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Stollenwerk, Timo
Plone 6 is the first CMS on the market that combines the power features, best-in-class security, and scalability of an enterprise CMS with a state-of-the-art JavaScript frontend and an easy-to-use user interface that gives editors full control over the composition of pages.
 Hey, welcome back to day two of Plum Conference 2021. And I'm really excited to introduce Timo Stolenwork, who will be giving our keynote today. He is a huge contributor to the community. He's basically the shoulders that we all ride on. KidConcept is the driving force behind Volto. Timo himself is a member of so many teams, it's almost hard to believe. Framework team, release team, the REST API team, and of course the Volto team. So definitely very experienced and we're very excited to have him give us a talk about Plum 6 and the state of the art, JS front end Volto. Timo, whenever you're ready. Hey. Hey. Thanks, folks. Power is nothing without control. When I was a kid in the 80s, I started to play tennis. And the way I was teach tennis was to try to hit the ball as hard as possible, as close as possible over the net. This was the way tennis was played. In today's modern tennis, everybody plays topspin and all the players and even the youth players. So when you hit a topspin, you basically slice over the ball. So you touch the ball longer to give you more control over the ball. But when you learn topspin, your trainer will actually tell you to slow down at first, to have more control and less power. So you sacrifice power to have more control. And in tennis and in most sports, it's all about the balance between power and control. And in technology, the ultimate power tool looks something like this. So in a remote control like this, you have all controls at your fingertips. And it's a perfect tool if you're a technician. And I'm pretty sure that this particular remote control has been built by technicians. The problem here is that this is actually a human-to-technology control and interface, or has been built as that. But actually, it's not. It's actually a connection between a human user and technology. So at this point, I usually showed like a CMS user interface that was built by developers, for developers. There are plenty of examples. Usually I showed type of three. And you see a busy 90s user interface. But to be honest, like today in 2021, it's an easy win. Because when you look at those traditional CMSs, they have something in common. They all have an outdated technology stack and a pretty old school user interface. They're kind of stuck in the past. And I had a look and a little bit of research before this talk. I look at type of three, Juma, Drupal. And they all ship with pretty old versions and a pretty old technology stack. Some even have JQuery UI in there, which is totally that. And when you compare that, like clone five does not look that bad after all, to be honest. Because we have far better user interface still. But we have an outdated stack. So that's an easy win. But there's also an elephant in the room, which is WordPress. Because WordPress is the market leader in CMS. They have a market share of like 40% or sometimes even more. And WordPress is actually a pretty modern CMS. So they made the transition that we're about to make to a modern JavaScript stack in the end of 2018, 2019 with WordPress five. They released Gutenberg. A new admin interface, as you will. So their back end is pretty modern. The front end is not that modern. But anyways, so from the beginning, when Gutenberg was published, we looked at it, both from a technical point of view and a UX point of view. And I have to admit, it's pretty impressive what they did. Both technically and also from the UX part of view. So it's not a bad product at all. Though one thing that there's one recurring theme when I try out WordPress every now and then or other CMSs. So I constantly have to feel when I work with WordPress or some similar systems that are not smart enough for this. And I started my first website in 10th grade. That was 1995. So I've 25 years of experience, most of it professionally. And I have a university degree in computer science, like comparable to a master degree. So I think I know a few things about web. But I still feel like an idiot when I operate those systems. And let me show you what I mean by that. So I usually set up a challenge for myself when I try out a new system. And I usually also screencast that to see where I had a problem. So the challenge is usually I take a regular page with some text and some images. So pretty standard. All CMSs should do that, even old school CMSs. So that's not really a challenge here. The challenge here is to see how easy it is for a user. And you can see here the page that I create. So images, you have an image aligned left, image aligned right. I uploaded just the images that I have, always the same. And you see they differ. So I want to change the upper image, the left image, to the same size as the right. So WordPress has this nice way of that you can drag and drop basically the image. But I'm not a designer. I don't have an eye if they're really the same. So I check the settings there. And they have a few presets. So small image, large image, thumbnail. And I try around a bit with that. But none of them really fit. So there's a second setting, maybe that, maybe 100%. Maybe I can toy around a bit and find the right setting. So I choose a bigger setting and then 75%. But that still doesn't do. So OK, there's a force setting actually. So a width and height. So I checked the other image, 300 pixels wide. And I set that to 300 pixels. Oh, the aspect ratio is broken. So I have to check the width and the height of the image to actually make it look the same. And if you're a web developer like myself, you will get through it. I mean, it's like CSS. And to further show you what I mean, is let's go a bit simpler. I haven't shown you a complex use case yet. So the simple form, just text. So this is how text looks like in WordPress. So it's basically a word processor. You can do everything. You have a few presets, like in Word. You can set the pixel size. You can even set the line height here. So you can basically do anything from seven pixels to 300 pixels. And you can even choose the color. So you can have something tiny that's maybe yellow and something that's super huge in red if you want to. And you have the option to do so. And the thing is what WordPress is mimicking here is it's mimicking a word processor and an image manipulation program. Because what was missing in the previous example in the image was that you can, in an image manipulation program, you can actually set the aspect ratio to a fixed setting. And then it will automatically adapt. So they didn't go the full way. They're still missing something before it becomes a full image manipulation program. And that's pretty impressive from a technical point of view, of course. But there's a problem here. The regular user of a CMS and myself included, I'm not a designer. A designer knows about typography, about rhythm, about line heights, and those kind of things. I know enough about design and typography to know that I can't do that myself. I know the theory. But when I try to actually implement that, it doesn't look good. I'm just not an expert on that. Same is true with UX. Readability is really important of websites. And I know the theory, but I know enough to pass that to people that actually know that, that studied that. The example that I show with the color chooser, modern websites needs to be accessible. There's legislation for that that requires you, for government websites or public websites, to be accessible. If you allow people to have a color chooser, they can basically choose any color combination that you might want. And that might break accessibility without them noticing. So if you provide something like that, you need at least an accessibility check that checks against the website that you're creating. But that's pretty complex, actually, and pretty labor-intensive. You have to show that it works responsively and responsive web design. And that's quite hard these days. Even web developers fail to check all the combinations. And those systems have means to adjust, and you can have a look at it. But to be honest, you really need to be a web designer to do that right. So in the end, what you will do, no matter how smart you are, you will tinker around. I will tinker around, because I'm not a designer. I'm not a UX expert. And I don't know everything about accessibility. So you will end up with a bad product, actually. And the reason for that is that the modern web is quite hard and quite challenging. Back in the old days where it only had text and a few images, that was easier. But the requirement in a modern web project is you need a consistent design. You usually have a corporate design manual. So you need a designer that makes the site look good. But even designers are split these days. You have experts for UI, and you have experts for user experience. And usually at Kit Concept, we have actually both, because they're different specialists for different things. So you want a system that's easy to use for low training cost. That's really important for large organizations that need to train people for their systems. It needs to be accessible. I already mentioned that for legal requirements. It needs to be responsive. It needs to be secure. It needs to be fast. So that all leads to a situation where a modern web project, from a decent size, is actually a team sport. It's not something that a single person can do, like back in the days when CMSs were introduced. So Plone 6 is not a classic CMS, because it's not stuck in the past any longer with an outdated text stack. We rebuilt it from scratch with a super modern state of the art text app. But it's also not a website builder like WordPress. It's not a tool for agency that wants to introduce a new bottleneck, and where you have to go to an agency to change stuff on your website, or where you will end up with an ugly or inaccessible website when regular users are using it. Plone 6 will be a modern state of the art CMS solution with a modernized technology stack, with a loosely coupled front and back end system. And it's actually, as far as I know, the first enterprise CMS that does that step, that provides both power and ease of use. So how did we get there? So I already mentioned user-centric design. Albert Casado, the designer who is responsible for the Plone 5 Barcelona team, he came up with a brand new UI framework when we were developing or starting to develop the new stack. And this new Pazanaga UI, or Kwanar UI now, focuses on simplicity and focus, which are basically the principle of good UX. So you introduce focus by removing settings that are not the most important ones. So you set the focus on the most used actions for editors. And the idea of Pazanaga UI is that we focus on everyday editors, because they're our main users. So what we did, for instance, with Albert, with the sidebar, is that he put there the three most frequently used actions in Plone, which is edit content, add content, and have a look at the structure. And everything else is hidden. This doesn't mean that Plone 6 don't have power user features. Power users are also important, but we hide that, because we want to focus on simplicity. So let me show you how we solve the image handling problem in Plone 6 and what design choices we make. In Plone 6, and I will show you the details later, we have two settings for images. One setting is the alignment. You can set it to left, right, middle, and 100%, and the size, like small, medium, and large. And that's actually 10 to 12 combinations, depending on how you count there. And this is quite a bit. When we usually give a website to a designer and ask them to do all the variations, like 12 variations is quite a bit already for just images. And as an integrator company, you can always add more if you have the feeling that you need that. But they should be part of the design process, right? And you should think about carefully what you actually need. And Plone 6 is flexible enough to allow integrators to add more options if they need that, right? So we don't restrict that. But out of the box, we focus on simplicity and keep the system simple and user friendly, that our users do not run into what I showed you with WordPress, that they're just lost. So Plone 6 will support modern page layouts. And it's all about blocks, blocks, blocks, right? I said that last year at the conference already, and talked about that in depth. And the core idea is that modern web layouts and landing pages are usually one column layouts, right? Driven by the mobile web and the need for responsive web design. So yeah, no site bar, no porcades, no design, so yeah, no site bar, no porclades, sorry. But we'll have a solution and a modern solution for porclades, right? So they won't go away, at least not fully go away. So let me show you a bit what I mean, right? I just took randomly three random designs from the internet to show you roughly what kind of website I have in mind here. And this is one of these. This is the WordPress 2020 default theme that they have. WordPress actually ships one new theme every year. That's also pretty impressive. And let us go through that. So at the beginning, you have a highlight block, then you have a few what we call grid blocks. You have another highlight block, a quote block, call to action block, and another grid block, right? So at Kid Concept, we have an intern that started last month. And he started basically from zero. Like he had no previous experience with web design, actually. And we gave him the assignment to recreate the 2020 theme on Plone, right? Because the 2020 theme is GPL, it's open source, so you can grab it, right? But the challenge was to start from the scratch and write the CMS and also create the blocks that might not be there, right? Or reuse the blocks that we already had. And I would like to show you the results. So I think you did a fantastic job there. But the thing is, that's not a perfect theme, right? But this is something that an intern did in a few weeks, right, from zero. And you see here that we have actually the same blocks. And on the left side, you see that it's actually a Plone side. So you can go to Edit here, and you can actually edit that, right? So this was just a showcase to show that we can easily do modern designs that WordPress does, right? There is no functionality missing, right? Of course, WordPress has like 60,000 add-ons, I think, or something. And we're not there yet, of course. But still, we can do it, right? It's doable. And it's not hard, right? An intern did that. So you don't need to be like a website pro with 20 years of experience. And let me show you in more detail how this works. So in Plone 6, you can build sophisticated landing pages and layout. And that's based on grid layouts, right? So we have this grid block. And actually, this is the block that we put a tremendous amount of work. Our Victor put a tremendous amount of work. I think it was like we had three or four implementations. And we start from scratch over and over again, because we weren't happy with what we had. Tiberio also helped us with that, with the infrastructure. And let me show you how this looks like. So this is the grid system. You can have between one and four elements in a grid. But that's also flexible. You can change that. You can have six or 100 if you want. Those are text grids. Those are image grids, right? This is roughly how it looks like, right? And this is not a beautifully designed overview page, but just a showcase, like what you can do, right? So let me show how the editing works. So when you create one of those grid page from scratch, right? So you choose here a grid block. Then you can choose the number of columns that you might want. And then you can freely choose the sub-blocks that you have here, right? Right now we have image listing, teaser, and text, right? We'll go with image first. So we choose an image. And when you have an image block in Plon6, you can choose if you want to upload a new image, or if you want to choose an existing one. If you choose an existing one on the right side, a nice content chooser shows up. You can then like drag and drop the blocks. You can add a new block. So the initial choice that you make is not fixed, right? So you can delete blocks. You can add blocks if you want. And you can also mix blocks here if you want, right? So I create a two column layout here. And here I add text, right? What you saw earlier in the scroll, all the combinations that you have here, right? And you can basically allow all sub-blocks that you want here, right? But we choose only to have the ones that make sense, because you usually don't want an image gallery or a highlight slider that's full width in your sub-block, right? So not all blocks make sense here. One other really important blog, in my opinion, that I plan six will chip with is a teaser block, right? A teaser is usually used to create landing pages. So that comes from new sites, usually. You have an existing article, for instance. And on the overview page, you just teaser the articles, right? And the content is already in place. So let me show you how that looks like. So you create a new teaser grid page, same as before. You create a grid. You choose the columns. And then you choose not an image, but a teaser. You can, of course, when you have a teaser, you're choosing an existing content object, right? But now, when you choose an existing content object, it will actually fetch not only the image, but also the title and the description, right? You can do the same thing what I showed before. You can move them around. But you can also override everything that you see here, right? So you get the title out of the box, like when you choose that. But you can override the title. You can override the description. You can even override the image, right? The reasoning behind that is that, dependent on the context, you might want different ways of teesering something, right? You can't assume that you have an element, and that's teaser in the same way on all subpages, right? Because maybe one department uses that in one way, the other departments use that in another way. So you need a way to override that, right? So this is what the teaser block is. And in combination with the grid block, it really allows you to create very nice landing pages. Plan 6 will ship with a few default blocks. I won't show them in detail. It's basically the basics that we have in Plan 5 already. So we have a text block, an image block. We have a video block that supports YouTube and Vimeo and MP4. We have a listing block, which is basically collections in a block that allows you to create listings. We have a table block, table of contents, a hero block, and a maps block for Google Maps. But I would like to focus on the more fancy and advanced blocks here. We almost have 100 add-ons for Plan 6 on NPM, right? So let me show you a small number of the blocks that we have. So that was too quick. So this is a slider block that we have. This is a carousel block. And they're actually from the structure quite similar, right? They only differ in the way that they display the information, because they're all based on the idea of teasers. So let me show you how this block works. So we have an existing block, right? You go to Edit, and then you see on the right side like a number of teaser elements, basically, right? You can add a new teaser element. It works exactly the same as what I showed you before. You choose an existing teaser. You fetch that, and the block will automatically fetch the image, the title, and the description, right? You can drag and drop that. You can move that around. You can overwrite the image, the title, and the text. And you can, as well, change some settings below in the right column, right? The number of elements that you have there. So the blocks all work the same, right? So users get used to the way they operate. So they only have to learn certain patterns once, and we're reusing that pattern, right? And those patterns are already in Volta Corp. So let me show you another block that's from the EEA, from the European Environmental Agency, and from all the web, which is working for them. And they open source that. They actually open source everything they do. And Nilesh, Alan, and Tiberio worked on that. And it already has contribution from Julia, Victor, David, and Alex. So lots of other companies are already using that. And that's really great to see that individuals and companies open source blocks, and then you see interaction on that right away, and you get, like, QA and improvements right away. So that's an accordion. I think that's nothing new, really, so you can open and close the paints. But I would like to show you how the editing works, right? So one cool thing is that the editing that is fully operational in edit mode, right? So you have the same thing that you had in the carousel and the slider block, so you can add new elements. But the new thing here is, so I add a new pane here with text. But the new thing here is that you can add an arbitrary block here, right? So you can have those accordion elements, and you can add text to one. You can add a teaser grid block to the other, and a listing to the third, right? So you have all the flexibility that you can imagine with the block system. And no matter which blocks you have, you can add them here, right? Same with the grid block, right? This gives us the flexibility in the end for the integrators that they can freely put together stuff dependent on the needs for the client. Another contribution by EA is the new search block that would ship with Plone 6. I guess you all know the defecitated navigation add-on for Plone 6. It's one of the most popular add-ons that are there. And with Plone 6, we will ship that by default as a block. That was contributed by Tiberio, Christina, and Victor. And let me show you how that works. So I think I mixed things here. OK, that's the wrong form. OK, give me a sec. Crap. OK, I will show that later when I have time. OK, the search block is really amazing, but I uploaded the wrong video. My keynote crashed. Sorry for that. OK, so I will do that at the end. And I will do that live. So next popular add-on is forms. You all know Plone Form, then, and Easy Form. It's one of the most used add-ons in the Plone work. Nikola and Julia from Rattl worked on an add-on product that does exactly that. A lot from KitKonzept and Janina from Workbench also work on different implementations. And that happens every now and then that we try out different things, how they should work. And then at the end, things come together. But Plone 6 will ship with a forms framework or with an add-on. So let me show you how this works. So you create a new contact form, for instance. So let's keep it simple here, because I want to show you many things. So you create a new form here. The form is a block. Everything in Plone 6 is actually a block. So you have a few settings there. This is basically the email that is sent to whom it sent, like what subject you use, and all those kind of information. Here you see what kind of fields you have. So basically the fields that you have in Plone Form Gen as well, so text, email, whatnot. And we're creating a simple form here. So we are creating a subjects field, which is a text field, and a text field for the message, actually. So you can add an arbitrary amount of fields. And the cool thing here is that because that thing is a block, you can freely combine that with other elements. One recurrent problem in the classic Plone setup was always that clients were asking, hey, we want something on the contact form. We want a more elaborate contact form. And then you can either have text fields in your form content type, and that's not as flexible as you want. Or you have to build something that the client can't really edit. And now with the new block space form, you can just combine that wherever you want. You can even have multiple forms on one page. And that's the kind of flexibility that we never had before. So that really shows the power of blocks, in my opinion. Another thing from the EA and something that Ellen built, and this has no content, I call them no-code content types. And that fulfills actually a promise that we made or tried long time ago. Asco worked quite a bit on finishing the story that you can create, add on products and content through the web, and also templates. But the missing part were always the templates that we have. So we had lots of flexibility. There was always a cool feature of Plone that you can create content types through the web. But the missing piece was always templates. But not any longer. So let me show you how this works now. So you go like in Plone 5, you go to the site setup. You choose the dexterity content types. It lists the dexterity content types. And you create a new type. So that's nothing new. We had that in Plone 5, even in Plone 4 with dexterity. But then you can go to the layout template. You have to enable the editable blocks here. But then you basically are in a template mode. So you can create a template here. So you can override the title, for instance, and create a helper here. So we create the book content type. And the book has a title, of course. And the book has a title, of course. And it has an introduction. Should have an introduction here. And this should be a required field. That should always be there. So we require the users to have that field. And we also make it so that it can't move. Because sometimes you have blocks that can't move. And the next thing is an image then. So we want to have the cover of the book that we're talking about there. And should also be fixed. So you give that page a structure. Think about events or news items. They're just in the end templates. Because a news item is not different from a page, actually, except that it has a lead image. And you can easily create that within five minutes with that system. So you store the template. Then you have the new content types you create in your book. And then you have the template here. So you give your users like a helper to make it easy to have content objects that are reusable, basically. And that's a pretty cool feature. So as I said, Plone 6 will be all about blocks. We have plenty of blocks. And I could only show you a few things. More than 100 add-ons, almost 100 add-ons on NPM. And we plan to open source lots of new blocks in the next weeks and months to come. We gathered here in the rental to discuss actually which blocks we want to have in core, for instance, or which blocks we might put to a collective. And how Plone 6 is going to, in what shape Plone 6 will be in the details. But there are plenty of blocks around already to date. So Plone 6 is really ready for prime time. We shipped the first website with the stack that will Power Plone 6 in 2019. And Volto the new front end and this stack is used in production since then. So let me show you just a few examples. One of the highest profile government websites in Germany is actually running on Plone 6 these days. Multiple universities in the US, in Europe, and in Japan already today use Plone 6. The Humboldt University Berlin has two websites. The University of Minnesota has a website. There are plenty of websites in Japan that are powered by Plone 6 today. One example here is Osaka University. It's considered to be one of the top three universities in Japan. It's kind of an Ivy League type university there. And their main public website now runs on Plone 6, thanks to CMS.com and Manabu. So let me show you that, that you also see what Plone 6 can do in terms of the layout. You can see here that it has blocks. I mean, you can't really tell that it's a Plone 6 site, which is, I think, a good thing, in my opinion. It just has a really modern block-based layout. It could have been a WordPress site. You don't see that from the outside. You have no clue. But Plone 6 can do that. And it's really an impressive website, I think. Plone 6 already powers internet solutions with almost 7k users. One of the largest research institutions in Europe is using the internet for Plone. Let me quickly show you how the front page looks. So we have an introduction slider. We have events, then we have a highlight block, Grids block. We have listing Grids blocks. That's one of the last tools are special blocks for this client. And soon, this research institution, we will currently working on their public website. And early next year, we will publish that. And it will be a huge website with more than 100 subsites for institutes and projects. And there are more projects in the pipeline, actually. Sorry. I messed that up. Maybe now it's time to dance after all. But you can watch the site again. It looks really nice. Yeah, and that one as well. Kino won't allow you to skip the animations. OK, the next website that I will show you comes from the European Environmental Agency. As I said, they're heavily contributing to open source and to VoltaCorp, the web is working for them. They published like multi-million euro contracts in the past years. And luckily for us, they were given to companies that are heavily invested into the belong community, or the web and code syntax and others. And they're open sourcing everything. So that's really a great contribution. And lots of websites are powered by that. So all the web built the force information system website, force information system for euro website. It has beautiful data-driven blocks to visualize data. And that also really shows the power of a modern React framework that you can use all those fancy libraries. And the cool thing about this is that the blocks are all data driven by remote data. So you can fetch the data and show it. And it's really amazing what they did. And it's all open source. So you can check it out. Yesterday, Piero gave a talk about how Red Turtle built a solution for municipalities in Italy. This is the public website of Modena that you showed yesterday. And they have 20 websites in production and 50 more to come. So they really built a very impressive solution here. You can see here video blocks, grid blocks. And you see the recurring theme. So I talked a bit about that we're using the Plone 6 stack like today. So what I mean with the Plone 6 stack is that today you can use like Plone 5.2, which is battle tested and ultra stable. You can use Plone REST API, which is in core since version 5. And you can use the Volto front end, which is used in production since 2019. So you can start a new Plone 6-ish project like today. There's no reason to wait. We're all looking forward to Plone 6 to have it, the new big release. But the stack is already there. And it's stable. And this is something that we never had before as far as I know. We usually put out an alpha version, and then you had to wait a bit and go through that. You can start with that today. You can also use Plone 6 alpha if you want. But you can also stay with Plone 5.2 and then switch later. So you have all the options, depending on how much you are involved and how much risk you want to take. And Plone 6 is also here to stay. The Plone release and security team decided that Plone 6 will get full support of five years to come after the release. Plone always supported versions way longer than most other systems that are out there. Drupal and other systems take a look at Python. Python has three years, Node also three years for their major version of years that they support this version. And then end of life happens. Plone 3 was supported four years. Plone 4 was supported 10 years. And Plone 5 so far is supported six years. So we did a pretty good job in the past, but we failed to advertise that properly. But this time, we will improve that, and we will make the promise to all users and to the community that Plone 6 will be supported at least five years, most likely longer. When you're not ready yet, for whatever reason, for Plone 6, no problem. We also got your back. Plone 6 will ship with what we call Classic UI. It's a modernized version of the Plone 6 user interface that you're used to. Together with the LTS that I also talked about, this will give you five more years to pick up the new front end and to adapt, to see if that works for you. And we know that we have large institutions that heavily invested into Plone, that invested lots of money into Plone that just need more time. Universities are a good example. They can't just, because of their size and their infrastructure, they can't just jump on something new right away. So we got your back. You will have five years to adapt, and there's no need to rush. But I hope that today I showed you why it's worse to actually move to Plone 6. So let's wrap that up. Plone 6 will be the first enterprise CMS that combines the power, features, and stability of what enterprise users need with the ease of use of a very simple system. Plone 6 will be a perfect fit for large institutions that build internet sites and internet solutions with lots of editors, where training costs are important. They need a system that's easy to use so they don't have to put lots of effort and money into training costs. They need a solution that is scalable and that works within the existing enterprise infrastructure like LDAP and authentication and lots of other things. Stefan will give a talk after mine about a client project that we did for Helmholtz and show you how we integrate that. And that's a big asset of Plone that new systems on the market do not have. There are plenty of systems that are new and that use a pretty decent and modern stack. But they lack the stability that we have. And Plone 6 will combine the power and the flexibility that we need and the control that we also need. And I sincerely believe that with Plone 6, we have a very bright future ahead because we're giving something to the open source world or the IT world that's not there yet. Plone 6 will provide something really unique. Thank you. Teemo, thank you so much for that keynote. Really great to see you. Show the search block. Yeah, you still have five minutes. We are not hearing Andy, so yes. OK. Let me quickly do that. There you go. That's the search page. You choose a search block and it will list all elements on the website. On the right side, you see criteria. When you're used to Plone 5, think about a collection. That's a block, actually. So you can add filters there that you want to, for instance, only have the example pages. And it will list the stuff. And you can search there. But in addition, you can add search facets here, as many as you want. So let's add a type facets, for instance. So you can choose the content type. You can choose the appearance of it if you want a checkbox or a select field. And you can also add a label. You can also add a second facet, like, say, the tag, subject field, or keywords. Let's choose a different widget. Let's choose checkboxes. And then you can even choose if you have multiple choices or single choice. And it will adapt and show radio buttons or checkboxes, which are the right controls for that. You also have a few advanced options. So you can choose if you want to show a sorting option. You can put a label on the sorting option. You can even restrict the sort options that will show there. You see here all the options that you have to sort something in-plone that comes from the collections. Usually you don't want to expose that kind of power to your end users. You want to expose that to your editors, but not to your end users. So you can restrict that here. You can decide if you want to show a search button or if you want to have an auto search, and you can also choose variations. So you can choose if you want to have the facet on the right side, on the left side. And that's all configurable. As an integrator, you can also remove those settings. You can also change the results template. So you have the summary view. You can even have an image gallery there. And then you can save. And then you have a really powerful faceted search user interface. No solo, no elastic search. Just based on the Z catalog. So you can search. You can sort on the two settings that are set. You can reverse the sort here. Here you can choose the content type that you want to choose. You can clear the filters if you made a mistake or want to go back. And below that, you can choose the text that you have. So you have a really, really powerful search interface here that you usually, back in the pot, you have to put a lot of effort into that. And that comes by default with Plone 6 Core. Thanks. Timo, thank you. That was fantastic. Plone 6 looks to be completely amazing. You guys have put in a lot of work. And I think the community is really appreciative of everything that you've done. And I'm actually pretty blown away by how amazing Plone 6 is. So thank you very much.
 Hey, welcome back to day two of Plum Conference 2021.  And I'm really excited to introduce Timo Stolenwork, who  will be giving our keynote today.  He is a huge contributor to the community.  He's basically the shoulders that we all ride on.  KidConcept is the driving force behind Volto.  Timo himself is a member of so many teams,  it's almost hard to believe.  Framework team, release team, the REST API team,  and of course the Volto team.  So definitely very experienced and we're  very excited to have him give us a talk about Plum 6  and the state of the art, JS front end Volto.  Timo, whenever you're ready.  Hey.  Hey.  Thanks, folks.  Power is nothing without control.  When I was a kid in the 80s, I started to play tennis.  And the way I was teach tennis was  to try to hit the ball as hard as possible,  as close as possible over the net.  This was the way tennis was played.  In today's modern tennis, everybody plays topspin  and all the players and even the youth players.  So when you hit a topspin, you basically  slice over the ball.  So you touch the ball longer to give you more control  over the ball.  But when you learn topspin, your trainer  will actually tell you to slow down at first,  to have more control and less power.  So you sacrifice power to have more control.  And in tennis and in most sports,  it's all about the balance between power and control.  And in technology, the ultimate power  tool looks something like this.  So in a remote control like this,  you have all controls at your fingertips.  And it's a perfect tool if you're a technician.  And I'm pretty sure that this particular remote control  has been built by technicians.  The problem here is that this is actually  a human-to-technology control and interface,  or has been built as that.  But actually, it's not.  It's actually a connection between a human user and technology.  So at this point, I usually showed  like a CMS user interface that was built by developers,  for developers.  There are plenty of examples.  Usually I showed type of three.  And you see a busy 90s user interface.  But to be honest, like today in 2021, it's an easy win.  Because when you look at those traditional CMSs,  they have something in common.  They all have an outdated technology stack  and a pretty old school user interface.  They're kind of stuck in the past.  And I had a look and a little bit of research  before this talk.  I look at type of three, Juma, Drupal.  And they all ship with pretty old versions  and a pretty old technology stack.  Some even have JQuery UI in there,  which is totally that.  And when you compare that, like clone five  does not look that bad after all, to be honest.  Because we have far better user interface still.  But we have an outdated stack.  So that's an easy win.  But there's also an elephant in the room, which is WordPress.  Because WordPress is the market leader in CMS.  They have a market share of like 40% or sometimes even more.  And WordPress is actually a pretty modern CMS.  So they made the transition that we're  about to make to a modern JavaScript  stack in the end of 2018, 2019 with WordPress five.  They released Gutenberg.  A new admin interface, as you will.  So their back end is pretty modern.  The front end is not that modern.  But anyways, so from the beginning,  when Gutenberg was published, we looked at it,  both from a technical point of view and a UX point of view.  And I have to admit, it's pretty impressive what they did.  Both technically and also from the UX part of view.  So it's not a bad product at all.  Though one thing that there's one recurring theme when  I try out WordPress every now and then or other CMSs.  So I constantly have to feel when  I work with WordPress or some similar systems that  are not smart enough for this.  And I started my first website in 10th grade.  That was 1995.  So I've 25 years of experience, most of it professionally.  And I have a university degree in computer science,  like comparable to a master degree.  So I think I know a few things about web.  But I still feel like an idiot when I operate those systems.  And let me show you what I mean by that.  So I usually set up a challenge for myself  when I try out a new system.  And I usually also screencast that  to see where I had a problem.  So the challenge is usually I take a regular page  with some text and some images.  So pretty standard.  All CMSs should do that, even old school CMSs.  So that's not really a challenge here.  The challenge here is to see how easy it is for a user.  And you can see here the page that I create.  So images, you have an image aligned left,  image aligned right.  I uploaded just the images that I have, always the same.  And you see they differ.  So I want to change the upper image, the left image,  to the same size as the right.  So WordPress has this nice way of that you can drag and drop  basically the image.  But I'm not a designer.  I don't have an eye if they're really the same.  So I check the settings there.  And they have a few presets.  So small image, large image, thumbnail.  And I try around a bit with that.  But none of them really fit.  So there's a second setting, maybe that, maybe 100%.  Maybe I can toy around a bit and find the right setting.  So I choose a bigger setting and then 75%.  But that still doesn't do.  So OK, there's a force setting actually.  So a width and height.  So I checked the other image, 300 pixels wide.  And I set that to 300 pixels.  Oh, the aspect ratio is broken.  So I have to check the width and the height of the image  to actually make it look the same.  And if you're a web developer like myself,  you will get through it.  I mean, it's like CSS.  And to further show you what I mean,  is let's go a bit simpler.  I haven't shown you a complex use case yet.  So the simple form, just text.  So this is how text looks like in WordPress.  So it's basically a word processor.  You can do everything.  You have a few presets, like in Word.  You can set the pixel size.  You can even set the line height here.  So you can basically do anything from seven pixels  to 300 pixels.  And you can even choose the color.  So you can have something tiny that's maybe yellow  and something that's super huge in red if you want to.  And you have the option to do so.  And the thing is what WordPress is mimicking here  is it's mimicking a word processor and an image  manipulation program.  Because what was missing in the previous example in the image  was that you can, in an image manipulation program,  you can actually set the aspect ratio to a fixed setting.  And then it will automatically adapt.  So they didn't go the full way.  They're still missing something before it becomes  a full image manipulation program.  And that's pretty impressive from a technical point of view,  of course.  But there's a problem here.  The regular user of a CMS and myself included,  I'm not a designer.  A designer knows about typography, about rhythm,  about line heights, and those kind of things.  I know enough about design and typography  to know that I can't do that myself.  I know the theory.  But when I try to actually implement that,  it doesn't look good.  I'm just not an expert on that.  Same is true with UX.  Readability is really important of websites.  And I know the theory, but I know enough  to pass that to people that actually know that,  that studied that.  The example that I show with the color chooser,  modern websites needs to be accessible.  There's legislation for that that requires you,  for government websites or public websites,  to be accessible.  If you allow people to have a color chooser,  they can basically choose any color combination  that you might want.  And that might break accessibility  without them noticing.  So if you provide something like that,  you need at least an accessibility check that  checks against the website that you're creating.  But that's pretty complex, actually,  and pretty labor-intensive.  You have to show that it works responsively  and responsive web design.  And that's quite hard these days.  Even web developers fail to check all the combinations.  And those systems have means to adjust,  and you can have a look at it.  But to be honest, you really need  to be a web designer to do that right.  So in the end, what you will do, no matter how smart you are,  you will tinker around.  I will tinker around, because I'm not a designer.  I'm not a UX expert.  And I don't know everything about accessibility.  So you will end up with a bad product, actually.  And the reason for that is that the modern web is quite hard  and quite challenging.  Back in the old days where it only had text and a few images,  that was easier.  But the requirement in a modern web project  is you need a consistent design.  You usually have a corporate design manual.  So you need a designer that makes the site look good.  But even designers are split these days.  You have experts for UI, and you have experts  for user experience.  And usually at Kit Concept, we have actually both,  because they're different specialists  for different things.  So you want a system that's easy to use for low training cost.  That's really important for large organizations  that need to train people for their systems.  It needs to be accessible.  I already mentioned that for legal requirements.  It needs to be responsive.  It needs to be secure.  It needs to be fast.  So that all leads to a situation where a modern web project,  from a decent size, is actually a team sport.  It's not something that a single person can do,  like back in the days when CMSs were introduced.  So Plone 6 is not a classic CMS, because it's not stuck  in the past any longer with an outdated text stack.  We rebuilt it from scratch with a super modern state of the art  text app.  But it's also not a website builder like WordPress.  It's not a tool for agency that wants  to introduce a new bottleneck, and where  you have to go to an agency to change stuff on your website,  or where you will end up with an ugly or inaccessible  website when regular users are using it.  Plone 6 will be a modern state of the art CMS solution  with a modernized technology stack,  with a loosely coupled front and back end system.  And it's actually, as far as I know,  the first enterprise CMS that does that step,  that provides both power and ease of use.  So how did we get there?  So I already mentioned user-centric design.  Albert Casado, the designer who is responsible for the Plone  5 Barcelona team, he came up with a brand new UI framework  when we were developing or starting  to develop the new stack.  And this new Pazanaga UI, or Kwanar UI now,  focuses on simplicity and focus, which are basically  the principle of good UX.  So you introduce focus by removing  settings that are not the most important ones.  So you set the focus on the most used actions for editors.  And the idea of Pazanaga UI is that we focus on everyday  editors, because they're our main users.  So what we did, for instance, with Albert,  with the sidebar, is that he put there  the three most frequently used actions in Plone,  which is edit content, add content, and have a look  at the structure.  And everything else is hidden.  This doesn't mean that Plone 6 don't have power user features.  Power users are also important, but we hide that,  because we want to focus on simplicity.  So let me show you how we solve the image handling problem  in Plone 6 and what design choices we make.  In Plone 6, and I will show you the details later,  we have two settings for images.  One setting is the alignment.  You can set it to left, right, middle, and 100%,  and the size, like small, medium, and large.  And that's actually 10 to 12 combinations,  depending on how you count there.  And this is quite a bit.  When we usually give a website to a designer  and ask them to do all the variations,  like 12 variations is quite a bit already for just images.  And as an integrator company, you  can always add more if you have the feeling that you need that.  But they should be part of the design process, right?  And you should think about carefully what you actually  need.  And Plone 6 is flexible enough to allow integrators  to add more options if they need that, right?  So we don't restrict that.  But out of the box, we focus on simplicity  and keep the system simple and user friendly,  that our users do not run into what I showed you with WordPress,  that they're just lost.  So Plone 6 will support modern page layouts.  And it's all about blocks, blocks, blocks, right?  I said that last year at the conference already,  and talked about that in depth.  And the core idea is that modern web layouts and landing  pages are usually one column layouts, right?  Driven by the mobile web and the need for responsive web  design.  So yeah, no site bar, no porcades, no  design, so yeah, no site bar, no porclades, sorry.  But we'll have a solution and a modern solution for porclades,  right?  So they won't go away, at least not fully go away.  So let me show you a bit what I mean, right?  I just took randomly three random designs from the internet  to show you roughly what kind of website I have in mind here.  And this is one of these.  This is the WordPress 2020 default theme  that they have.  WordPress actually ships one new theme every year.  That's also pretty impressive.  And let us go through that.  So at the beginning, you have a highlight block,  then you have a few what we call grid blocks.  You have another highlight block, a quote block,  call to action block, and another grid block, right?  So at Kid Concept, we have an intern  that started last month.  And he started basically from zero.  Like he had no previous experience with web design,  actually.  And we gave him the assignment to recreate the 2020 theme  on Plone, right?  Because the 2020 theme is GPL, it's open source,  so you can grab it, right?  But the challenge was to start from the scratch  and write the CMS and also create the blocks that  might not be there, right?  Or reuse the blocks that we already had.  And I would like to show you the results.  So I think you did a fantastic job there.  But the thing is, that's not a perfect theme, right?  But this is something that an intern did in a few weeks,  right, from zero.  And you see here that we have actually the same blocks.  And on the left side, you see that it's actually a Plone side.  So you can go to Edit here, and you can actually edit that,  right?  So this was just a showcase to show  that we can easily do modern designs that WordPress does,  right?  There is no functionality missing, right?  Of course, WordPress has like 60,000 add-ons, I think,  or something.  And we're not there yet, of course.  But still, we can do it, right?  It's doable.  And it's not hard, right?  An intern did that.  So you don't need to be like a website pro with 20 years  of experience.  And let me show you in more detail how this works.  So in Plone 6, you can build sophisticated landing pages  and layout.  And that's based on grid layouts, right?  So we have this grid block.  And actually, this is the block that we put a tremendous amount  of work.  Our Victor put a tremendous amount of work.  I think it was like we had three or four implementations.  And we start from scratch over and over again,  because we weren't happy with what we had.  Tiberio also helped us with that, with the infrastructure.  And let me show you how this looks like.  So this is the grid system.  You can have between one and four elements in a grid.  But that's also flexible.  You can change that.  You can have six or 100 if you want.  Those are text grids.  Those are image grids, right?  This is roughly how it looks like, right?  And this is not a beautifully designed overview page,  but just a showcase, like what you can do, right?  So let me show how the editing works.  So when you create one of those grid page from scratch, right?  So you choose here a grid block.  Then you can choose the number of columns  that you might want.  And then you can freely choose the sub-blocks  that you have here, right?  Right now we have image listing, teaser, and text, right?  We'll go with image first.  So we choose an image.  And when you have an image block in Plon6,  you can choose if you want to upload a new image,  or if you want to choose an existing one.  If you choose an existing one on the right side,  a nice content chooser shows up.  You can then like drag and drop the blocks.  You can add a new block.  So the initial choice that you make is not fixed, right?  So you can delete blocks.  You can add blocks if you want.  And you can also mix blocks here if you want, right?  So I create a two column layout here.  And here I add text, right?  What you saw earlier in the scroll,  all the combinations that you have here, right?  And you can basically allow all sub-blocks  that you want here, right?  But we choose only to have the ones that make sense,  because you usually don't want an image gallery  or a highlight slider that's full width in your sub-block,  right?  So not all blocks make sense here.  One other really important blog, in my opinion,  that I plan six will chip with is a teaser block, right?  A teaser is usually used to create landing pages.  So that comes from new sites, usually.  You have an existing article, for instance.  And on the overview page, you just  teaser the articles, right?  And the content is already in place.  So let me show you how that looks like.  So you create a new teaser grid page, same as before.  You create a grid.  You choose the columns.  And then you choose not an image, but a teaser.  You can, of course, when you have a teaser,  you're choosing an existing content object, right?  But now, when you choose an existing content object,  it will actually fetch not only the image,  but also the title and the description, right?  You can do the same thing what I showed before.  You can move them around.  But you can also override everything that you see here,  right?  So you get the title out of the box,  like when you choose that.  But you can override the title.  You can override the description.  You can even override the image, right?  The reasoning behind that is that,  dependent on the context, you might  want different ways of teesering something, right?  You can't assume that you have an element,  and that's teaser in the same way on all subpages, right?  Because maybe one department uses that in one way,  the other departments use that in another way.  So you need a way to override that, right?  So this is what the teaser block is.  And in combination with the grid block,  it really allows you to create very nice landing pages.  Plan 6 will ship with a few default blocks.  I won't show them in detail.  It's basically the basics that we have in Plan 5 already.  So we have a text block, an image block.  We have a video block that supports YouTube and Vimeo  and MP4.  We have a listing block, which is basically  collections in a block that allows you to create listings.  We have a table block, table of contents, a hero block,  and a maps block for Google Maps.  But I would like to focus on the more fancy and advanced  blocks here.  We almost have 100 add-ons for Plan 6 on NPM, right?  So let me show you a small number of the blocks that we have.  So that was too quick.  So this is a slider block that we have.  This is a carousel block.  And they're actually from the structure quite similar, right?  They only differ in the way that they display the information,  because they're all based on the idea of teasers.  So let me show you how this block works.  So we have an existing block, right?  You go to Edit, and then you see on the right side  like a number of teaser elements, basically, right?  You can add a new teaser element.  It works exactly the same as what I showed you before.  You choose an existing teaser.  You fetch that, and the block will automatically  fetch the image, the title, and the description, right?  You can drag and drop that.  You can move that around.  You can overwrite the image, the title, and the text.  And you can, as well, change some settings  below in the right column, right?  The number of elements that you have there.  So the blocks all work the same, right?  So users get used to the way they operate.  So they only have to learn certain patterns once,  and we're reusing that pattern, right?  And those patterns are already in Volta Corp.  So let me show you another block that's  from the EEA, from the European Environmental Agency,  and from all the web, which is working for them.  And they open source that.  They actually open source everything they do.  And Nilesh, Alan, and Tiberio worked on that.  And it already has contribution from Julia, Victor, David,  and Alex.  So lots of other companies are already using that.  And that's really great to see that individuals and companies  open source blocks, and then you see interaction on that  right away, and you get, like, QA and improvements right away.  So that's an accordion.  I think that's nothing new, really,  so you can open and close the paints.  But I would like to show you how the editing works, right?  So one cool thing is that the editing  that is fully operational in edit mode, right?  So you have the same thing that you had in the carousel  and the slider block, so you can add new elements.  But the new thing here is, so I add a new pane here with text.  But the new thing here is that you can add an arbitrary block  here, right?  So you can have those accordion elements,  and you can add text to one.  You can add a teaser grid block to the other,  and a listing to the third, right?  So you have all the flexibility that you can imagine  with the block system.  And no matter which blocks you have,  you can add them here, right?  Same with the grid block, right?  This gives us the flexibility in the end for the integrators  that they can freely put together stuff  dependent on the needs for the client.  Another contribution by EA is the new search block  that would ship with Plone 6.  I guess you all know the defecitated navigation add-on  for Plone 6.  It's one of the most popular add-ons that are there.  And with Plone 6, we will ship that by default as a block.  That was contributed by Tiberio, Christina, and Victor.  And let me show you how that works.  So I think I mixed things here.  OK, that's the wrong form.  OK, give me a sec.  Crap.  OK, I will show that later when I have time.  OK, the search block is really amazing,  but I uploaded the wrong video.  My keynote crashed.  Sorry for that.  OK, so I will do that at the end.  And I will do that live.  So next popular add-on is forms.  You all know Plone Form, then, and Easy Form.  It's one of the most used add-ons in the Plone work.  Nikola and Julia from Rattl worked on an add-on product  that does exactly that.  A lot from KitKonzept and Janina from Workbench  also work on different implementations.  And that happens every now and then  that we try out different things, how they should work.  And then at the end, things come together.  But Plone 6 will ship with a forms framework  or with an add-on.  So let me show you how this works.  So you create a new contact form, for instance.  So let's keep it simple here, because I  want to show you many things.  So you create a new form here.  The form is a block.  Everything in Plone 6 is actually a block.  So you have a few settings there.  This is basically the email that is sent to whom it sent,  like what subject you use, and all those kind of information.  Here you see what kind of fields you have.  So basically the fields that you have in Plone Form Gen  as well, so text, email, whatnot.  And we're creating a simple form here.  So we are creating a subjects field, which is a text field,  and a text field for the message, actually.  So you can add an arbitrary amount of fields.  And the cool thing here is that because that thing is a block,  you can freely combine that with other elements.  One recurrent problem in the classic Plone setup  was always that clients were asking,  hey, we want something on the contact form.  We want a more elaborate contact form.  And then you can either have text fields in your form content  type, and that's not as flexible as you want.  Or you have to build something that the client can't really  edit.  And now with the new block space form,  you can just combine that wherever you want.  You can even have multiple forms on one page.  And that's the kind of flexibility  that we never had before.  So that really shows the power of blocks, in my opinion.  Another thing from the EA and something that Ellen built,  and this has no content, I call them no-code content types.  And that fulfills actually a promise  that we made or tried long time ago.  Asco worked quite a bit on finishing the story  that you can create, add on products and content  through the web, and also templates.  But the missing part were always the templates that we have.  So we had lots of flexibility.  There was always a cool feature of Plone  that you can create content types through the web.  But the missing piece was always templates.  But not any longer.  So let me show you how this works now.  So you go like in Plone 5, you go to the site setup.  You choose the dexterity content types.  It lists the dexterity content types.  And you create a new type.  So that's nothing new.  We had that in Plone 5, even in Plone 4 with dexterity.  But then you can go to the layout template.  You have to enable the editable blocks here.  But then you basically are in a template mode.  So you can create a template here.  So you can override the title, for instance,  and create a helper here.  So we create the book content type.  And the book has a title, of course.  And the book has a title, of course.  And it has an introduction.  Should have an introduction here.  And this should be a required field.  That should always be there.  So we require the users to have that field.  And we also make it so that it can't move.  Because sometimes you have blocks that can't move.  And the next thing is an image then.  So we want to have the cover of the book  that we're talking about there.  And should also be fixed.  So you give that page a structure.  Think about events or news items.  They're just in the end templates.  Because a news item is not different from a page,  actually, except that it has a lead image.  And you can easily create that within five minutes  with that system.  So you store the template.  Then you have the new content types you create in your book.  And then you have the template here.  So you give your users like a helper  to make it easy to have content objects that  are reusable, basically.  And that's a pretty cool feature.  So as I said, Plone 6 will be all about blocks.  We have plenty of blocks.  And I could only show you a few things.  More than 100 add-ons, almost 100 add-ons on NPM.  And we plan to open source lots of new blocks  in the next weeks and months to come.  We gathered here in the rental to discuss actually  which blocks we want to have in core, for instance,  or which blocks we might put to a collective.  And how Plone 6 is going to, in what shape Plone 6 will be  in the details.  But there are plenty of blocks around already to date.  So Plone 6 is really ready for prime time.  We shipped the first website with the stack that  will Power Plone 6 in 2019.  And Volto the new front end and this stack  is used in production since then.  So let me show you just a few examples.  One of the highest profile government websites in Germany  is actually running on Plone 6 these days.  Multiple universities in the US, in Europe, and in Japan  already today use Plone 6.  The Humboldt University Berlin has two websites.  The University of Minnesota has a website.  There are plenty of websites in Japan  that are powered by Plone 6 today.  One example here is Osaka University.  It's considered to be one of the top three universities in Japan.  It's kind of an Ivy League type university there.  And their main public website now runs on Plone 6,  thanks to CMS.com and Manabu.  So let me show you that, that you also  see what Plone 6 can do in terms of the layout.  You can see here that it has blocks.  I mean, you can't really tell that it's a Plone 6 site, which  is, I think, a good thing, in my opinion.  It just has a really modern block-based layout.  It could have been a WordPress site.  You don't see that from the outside.  You have no clue.  But Plone 6 can do that.  And it's really an impressive website, I think.  Plone 6 already powers internet solutions  with almost 7k users.  One of the largest research institutions in Europe  is using the internet for Plone.  Let me quickly show you how the front page looks.  So we have an introduction slider.  We have events, then we have a highlight block, Grids block.  We have listing Grids blocks.  That's one of the last tools are special blocks for this client.  And soon, this research institution,  we will currently working on their public website.  And early next year, we will publish that.  And it will be a huge website with more than 100 subsites  for institutes and projects.  And there are more projects in the pipeline, actually.  Sorry.  I messed that up.  Maybe now it's time to dance after all.  But you can watch the site again.  It looks really nice.  Yeah, and that one as well.  Kino won't allow you to skip the animations.  OK, the next website that I will show you  comes from the European Environmental Agency.  As I said, they're heavily contributing to open source  and to VoltaCorp, the web is working for them.  They published like multi-million euro contracts  in the past years.  And luckily for us, they were given  to companies that are heavily invested  into the belong community, or the web and code syntax  and others.  And they're open sourcing everything.  So that's really a great contribution.  And lots of websites are powered by that.  So all the web built the force information system website,  force information system for euro website.  It has beautiful data-driven blocks to visualize data.  And that also really shows the power  of a modern React framework that you can use all those fancy  libraries.  And the cool thing about this is that the blocks are all  data driven by remote data.  So you can fetch the data and show it.  And it's really amazing what they did.  And it's all open source.  So you can check it out.  Yesterday, Piero gave a talk about how Red Turtle built  a solution for municipalities in Italy.  This is the public website of Modena that you showed yesterday.  And they have 20 websites in production and 50 more to come.  So they really built a very impressive solution here.  You can see here video blocks, grid blocks.  And you see the recurring theme.  So I talked a bit about that we're using the Plone 6 stack  like today.  So what I mean with the Plone 6 stack  is that today you can use like Plone 5.2, which  is battle tested and ultra stable.  You can use Plone REST API, which is in core since version 5.  And you can use the Volto front end, which  is used in production since 2019.  So you can start a new Plone 6-ish project like today.  There's no reason to wait.  We're all looking forward to Plone 6 to have it,  the new big release.  But the stack is already there.  And it's stable.  And this is something that we never had before as far as I know.  We usually put out an alpha version,  and then you had to wait a bit and go through that.  You can start with that today.  You can also use Plone 6 alpha if you want.  But you can also stay with Plone 5.2 and then switch later.  So you have all the options, depending on how much you are  involved and how much risk you want to take.  And Plone 6 is also here to stay.  The Plone release and security team  decided that Plone 6 will get full support of five years  to come after the release.  Plone always supported versions way longer than most other systems  that are out there.  Drupal and other systems take a look at Python.  Python has three years, Node also three years  for their major version of years that they support this version.  And then end of life happens.  Plone 3 was supported four years.  Plone 4 was supported 10 years.  And Plone 5 so far is supported six years.  So we did a pretty good job in the past,  but we failed to advertise that properly.  But this time, we will improve that,  and we will make the promise to all users and to the community  that Plone 6 will be supported at least five years, most likely  longer.  When you're not ready yet, for whatever reason, for Plone 6,  no problem.  We also got your back.  Plone 6 will ship with what we call Classic UI.  It's a modernized version of the Plone 6 user interface  that you're used to.  Together with the LTS that I also talked about,  this will give you five more years to pick up the new front end  and to adapt, to see if that works for you.  And we know that we have large institutions that heavily  invested into Plone, that invested lots of money  into Plone that just need more time.  Universities are a good example.  They can't just, because of their size and their infrastructure,  they can't just jump on something new right away.  So we got your back.  You will have five years to adapt,  and there's no need to rush.  But I hope that today I showed you  why it's worse to actually move to Plone 6.  So let's wrap that up.  Plone 6 will be the first enterprise CMS  that combines the power, features, and stability  of what enterprise users need with the ease of use  of a very simple system.  Plone 6 will be a perfect fit for large institutions  that build internet sites and internet solutions  with lots of editors, where training costs are important.  They need a system that's easy to use  so they don't have to put lots of effort and money  into training costs.  They need a solution that is scalable  and that works within the existing enterprise infrastructure  like LDAP and authentication and lots of other things.  Stefan will give a talk after mine about a client project  that we did for Helmholtz and show you  how we integrate that.  And that's a big asset of Plone that new systems on the market  do not have.  There are plenty of systems that are new  and that use a pretty decent and modern stack.  But they lack the stability that we have.  And Plone 6 will combine the power and the flexibility  that we need and the control that we also need.  And I sincerely believe that with Plone 6,  we have a very bright future ahead  because we're giving something to the open source world  or the IT world that's not there yet.  Plone 6 will provide something really unique.  Thank you.  Teemo, thank you so much for that keynote.  Really great to see you.  Show the search block.  Yeah, you still have five minutes.  We are not hearing Andy, so yes.  OK.  Let me quickly do that.  There you go.  That's the search page.  You choose a search block and it will list  all elements on the website.  On the right side, you see criteria.  When you're used to Plone 5, think about a collection.  That's a block, actually.  So you can add filters there that you want to, for instance,  only have the example pages.  And it will list the stuff.  And you can search there.  But in addition, you can add search facets here,  as many as you want.  So let's add a type facets, for instance.  So you can choose the content type.  You can choose the appearance of it  if you want a checkbox or a select field.  And you can also add a label.  You can also add a second facet, like, say, the tag,  subject field, or keywords.  Let's choose a different widget.  Let's choose checkboxes.  And then you can even choose if you  have multiple choices or single choice.  And it will adapt and show radio buttons or checkboxes, which  are the right controls for that.  You also have a few advanced options.  So you can choose if you want to show a sorting option.  You can put a label on the sorting option.  You can even restrict the sort options that will show there.  You see here all the options that you  have to sort something in-plone that  comes from the collections.  Usually you don't want to expose that kind of power  to your end users.  You want to expose that to your editors,  but not to your end users.  So you can restrict that here.  You can decide if you want to show a search button  or if you want to have an auto search, and you can also  choose variations.  So you can choose if you want to have the facet on the right side,  on the left side.  And that's all configurable.  As an integrator, you can also remove those settings.  You can also change the results template.  So you have the summary view.  You can even have an image gallery there.  And then you can save.  And then you have a really powerful faceted search user  interface.  No solo, no elastic search.  Just based on the Z catalog.  So you can search.  You can sort on the two settings that are set.  You can reverse the sort here.  Here you can choose the content type  that you want to choose.  You can clear the filters if you made a mistake  or want to go back.  And below that, you can choose the text that you have.  So you have a really, really powerful search interface  here that you usually, back in the pot,  you have to put a lot of effort into that.  And that comes by default with Plone 6 Core.  Thanks.  Timo, thank you.  That was fantastic.  Plone 6 looks to be completely amazing.  You guys have put in a lot of work.  And I think the community is really  appreciative of everything that you've done.  And I'm actually pretty blown away  by how amazing Plone 6 is.  So thank you very much.
Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_0_1463.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_1464_8027.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_8028_22655.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_22656_22751.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_22752_22835.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_22836_24131.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_24132_24179.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_24180_24623.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_24624_25403.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_25404_26075.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_26076_26183.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_26184_26231.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_26232_26279.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_26280_26387.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_26388_26471.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_26472_27551.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_27552_29855.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_29856_34163.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_34164_35651.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_35652_35855.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_35856_37391.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_37392_37931.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_37932_42371.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_42372_47783.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_47784_48755.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_48756_48887.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_48888_49667.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_49668_49751.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_49752_49835.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_49836_51743.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_51744_51803.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_51804_52571.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_52572_59267.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_59268_59591.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_59592_59855.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_59856_60227.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_60228_63047.png Keynote__Plone_6_-_Power_and_Control_-_Timo_Stolle_SVSv--milYA_63048_65076.png