 Okay. Let's start. Do you hear me well on the far seats? It's okay? Okay. The first part of my session will be kind of introduction, so we can start, and then people can come and come for the most interesting part. These are the slides from my original presentation at DrupalCon Dublin. Don't be frustrated and welcome to DrupalCamp London. I received a lot of feedback after session in Dublin, mostly about the lack of demonstrations, because it's very known things such as entities and entity references, but my session is about how we can use them differently, not as we designed to be used by default in DrupalCore. So, I will make a really quick introduction, and we will talk about entities and references in Drupal8Core, and then I will show you real examples of how we can use the power and how we can combine different third-party models together to get a really powerful functionality. So, let's go quickly. I'm working as a user interface lead in Acronis, and we are designing large corporate websites. That's why I started research about all of these things, how to join entities together to get kind of constructed. Okay, the core thing is entity. What is entity? Entity is simple, and the only thing you should know about entity is simple. Here you can see internal representation of entities in Drupal8Core. It doesn't look simple, I understand, but we are not going to talk about internal representation. We are going to talk about side-building, and from this point of view, entities are quite simple things, and I will show you. Let's look at node entity. You should be pretty familiar with it. It consists of several fields, title and body. In other words, entities are kind of molecules containing atoms. Title and body are just special kind of atoms, and combining together, you can get different molecules. Behind this concept, it calls atomic design. People are coming and coming. You can read more about atomic design concept at these terms, such as molecules, atoms, and organisms in Bredfrost block, but we will talk mostly about Drupal8 representation of this concept. We have several entities built in core. These nodes, users, terms, comments, blocks, menu items, and so on. We can create custom entities using third-party model like ECK. It's pretty simple. I will show you. And we have an opportunity in Drupal8 core to reference entities from other reference. Like on this slide, you can see we can create custom field authors, and we can reference to other entities from this field. And this is where entity reference appears. The reference gives us a power to combine different entities together by referencing one from another. Like on this example, we can reference user entity from node entity. In other words, we can nest entities one inside another. Here I will stop talking, and let's see a real example of what does it mean in real world when we're building websites via Drupal interface. I created a simple setup. This is a standard Drupal installation with several models installed. Most important are entity construction kits. It allows us to create custom entities on the fly using the administration interface. So I already created one custom entity named rig, and I created several models of it via the interface. We will use image bundle, text bundle, and counts bundle in this example. I also created a simple content type, a simple ECK and inline entity form. This is another third-party model I installed. So simple ECK have only one field of type entity reference, and I set it up inline entity form widget to display the form. So let's look now how all of this works together. I repeat again, this is only two models. One is entity construction kit, and another is inline entity form. Combining together, we allow us to create really complex pages. So let's create a page. You can see a standard interface and only one field here is a standard entity reference field with inline entity form widget enabled. So here we can select the bundle. I just showed you on previous slide screen. And we can create new bricks here, or you can add existing bricks from the system. So let's create a simple page without any layout. Let it be just simple. Let's add some text, and let's add some image. The session for image is most important. Okay, we now have a simple page with two entities on it. One is the text entity, and another is image entity. And it looks like this page. I disabled all phim, which is a stock phim without any styling and customizations. You can see plain entities here. This is the text entity, and this is the image entity. So let's make it more complex. Let's add columns. Columns brick contains one special field of a game type entity reference, and it allows you to hold entities inside. And we can reference existing entities. So let's put our some text entity here, and let's put our some image entity here as well. So what I did? I created an entity of type columns, and I put two entities inside it, text and image. And now we can see we render it together, because I created a special template. It's really simple. It's just output a table with two columns. But the things here that you can place anything in these columns. It's kind of panels or layout plug-in. So you can put any entity inside columns entity. And using this concept, you can create a complex layout. Let's try to do something more complex. Let's put another columns here as well. Okay. What I did? I placed one column inside another column, and I put image and text in both. So we can manipulate this in a way we want, and we can create really complex components and structures using these concepts. This is a handy way, and these two modules entity construction kit and inline entity form together works like a progress module. Who knows progress module? Yeah, fine. Progress are popular today, yeah. But with Drupal 8 we have such functionality almost in core. So today, progress are most like obsolete solution. I think in maybe one year we will see how people will start switching from progress to core or probably progress model maintainers. Actually, I'm working with them together on this direction. So as you can see, the interface we will get from two models in core is almost the same as progress interface. You can see progress here. You can edit them in line. You can list one entity inside another entity. You can create models. You can configure fields, displays, really flexible idea. But the only drawback of this concept is nesting. Because when you start drill down in entities like this interface, it's really frustrating. And if you have more than two, three levels of nesting, it's really painful. Another drawback is that it will be rendered crucially, so performance is not that good. So I started thinking about how we can optimize this problem, how we can get the same flexibility and convenient way of combining different entity types together, but with more generic way of nesting things together. And as a result, better performance. And I got to give the following idea. My session is mostly about this thing, about entity trees, and I will show how we can benefit from inline entity forms in the CK and this thing, entity tree. What is entity tree? Entity tree is kind of structure representing our page. It's really simple. This is one example. It doesn't matter actually. Let's skip these slides. Flat nesting. Yeah, this is the key thing. So the default way of creating such layouts is like this. When you nest entities one inside another, like I did on recent demo, like progress works, but where is another way? Instead of nesting entities one inside another, let's do like this. Let's create a special holders for our entities and let's manipulate them as tree structure. So on this slide you can see example page field. This is one field and its items. We can achieve that using standard global fields. The only thing we should add here is levels. So by default items are just a plain array of items, but to do things like this, to create three able structures. We need depth or indentation or something like that. So we should know on which position item should be rendered in the tree. So I succeed with that. And that's pretty simple indentation. I will show you now. So using our plugins, I created a special field type. It's based on entity reference item. The only thing it customizes is adds one additional column in database. So our field items can hold a depth value allowing us to form trees. So entity reference give us a power of reference entity one from another. We can use entity construction keys. We can use inline entity form. And using this customization with depth, we can manipulate the single field as a tree. Let's look how it looks like. So again, from conceptually, it's completely the same as we just saw. This is just an entity construction key. This is inline entity form. But it's empowered by these three able opportunities. So what I did? I created a special content type. I named it Bricky. Bricky consists of one field type of type bricks. Type bricks is exactly this type we just discussed here with three able functionality. And I also customized a bit inline entity form widget for it. So it's based on inline entity form complex. And it adds this depth handling for us. So let's create some simple page of type brick. You can see here exactly the same interface. It's inline entity form, not customized, but extended. Let's call it simple tree. Actually we can add existing entities here. And now what we can do? We can drag items here, like we reload the menu items or like we reload the text on the terms. We can reload the field items of type entity reference. And here it is. Here it is rendered as columns. We can nest things together. We can create another columns here or put existing columns. Simple. It's quite simple. We can combine together any type of entities. We can re-order a tree like we do with menu items like we do with text on the terms. And we can form any layout. And the main power we get here is we can manipulate this structure on the single screen on the single field. And we can do things like we can put the whole structure as a new column. So here we have one block with two columns and another block with two columns. And just by dragging the whole structure, we will change our layout as a three-column layout. And the third column is a two-column layout. But you just need to reset the cache because entities are now cached in core by default. Yeah. Here it is. So what we did, we just moved the whole block with two columns on one level deeper. And we have completely different layout. But these are the same entities. We can do crazy things actually like this. We can put columns again and again. It could be one column it's okay. Just remember to reset the cache. Cache thing can be annoying. But I will handle this as well by cache keys and cache context. That should be not easy. But once created, the page will be cached forever until you changed it again or until you reset the cache. So you can see that manipulating of this createable structure is quite simple and generic way like we do with mail items, like we do with excellent terms. And the flexibility here is that we can define any new type of entities. We can reference and reuse entities from page to page. And we can nest when together any kind of things we would like to do. And everything is easy. We just need to create an entity type and bundle via ECK model in administration interface. And then just specify a template like I did here. And templates are really simple and easy because we are just manipulating of cells. So when we are rendering accounts, we just iterating other entity cells and put them in columns. And we don't know what inside cells, we just render them as this using standard core mechanism. It's handy but it can look like a simple thing, not that powerful. So to show the really flexibility and power of this concept, let's create a new website, a single page for custom layout. For example, let's have apple.com. Let's create such page. What we have here, we have a slide show, we have a focus on layout, and we have some custom footer. What should we create for such page? We already have columns. Image is simple, image entity. We can define it via ECK. And we have a slide show. Let's create a special entity type slide show or carousel. And then we can nest another, for example, image entities inside it to create slide show. Let's look how it works. I created custom bundle carousel using this interface without any coding. And I created a special template for carousel. I just copied and pasted the code from bootstrap documentation page and put child items here. So what we have? We have a custom entity type carousel. We have a template which renders anything inside this entity type in slides. So what we should do now, we should create a slide show and put some image entities inside it to get a slide show. Let's try. Add content, Wiki type, Apple.com. First block is carousel. We just created a new carousel. Then we want to put several bundles inside this carousel. So this is our type image and holds just a single image. We can nest things here so two images appears inside carousel. And if you'll save, yeah. We can see a carousel holding two image entities. So what I did? I just created a custom entity bundle via ECK. I copy and pasted 12 slides of code from bootstrap. Documentation. And I'm able to create carousels on my website and I can put anything inside this carousel, not just images. It could be anything. Anything which can be rendered. Okay, let's continue. We also have four column layout here. Let's create or reuse existing columns and put banners inside. Banners are just images again. Okay. We have a slide show with two banners. We have a four column layout and we did not that much for such complex layout. Let's add footer and we'll get an almost complete apple.com home page. I just make a screenshot of footer to make it easy. Okay. Here we'll get a complex layout of apple.com home page. It consists of carousel, four column layout and a footer image. So it's really easy and it allows us to reuse these components from page to page to nest anything inside anything. And we can just, for example, change order of carousel and four columns like this. It's really easy. But we can do more, not just such layout. Let's try to change these layouts and make it not just four columns layout. Let them be two columns layout. What I did, I added one more field to entity to allow to change view mode of custom entities. Here is how it looks like. I added a custom field and we can specify in which view mode to display a particular field item, which is entity. So we can create a custom view mode using standard Drupal core interface. On display mode page, I created a view mode too for multi-column layout. And I overwrite the template for this view mode. So it is quite simple template. I just get the child and put in two rows with two columns. So what we can do now, we can specify view mode ID here too. And it should overwrite default layout for this brick. Okay, we have a carousel with two slides. We just changed a layout from four columns to two columns just by specifying one view mode. And let's go deeper and let's put the whole structure with two columns layout in carousel. Why not? You can do it just by changing the level. So just by dragging one level right, you can nest the whole structure inside carousel and it's really easy. Just reset the cache. Okay, we have a slide show with three entities now. First is an image banner. Second is image. And third is our multi-column layout customized with custom view mode. So summarizing up, this is a really flexible way of constructing the complex layouts and the side building now really simple. We just create custom entity types. We specify it in place for them and put everything together just in the single field. And this is also have a great performance because like here you can see that the whole page structure is stored in the single field. So it will be loaded from database for one query without any recursion like we have with paragraphs, like we have when nesting paragraphs one inside another. So just by extending entity reference with one database column, Def, we get this opportunity to manipulate of trees and to create really complex structures. And everything is powered by standard Drupal mechanisms, which is now mostly in core and we have here online entity form, entity construction kit. And I put my customization in special model with name Bricks. So you can download it and just install and you only need three models to start building really complex websites. So just several final words. Be minimalistic. What does it mean? You don't need now popular models like field collection or field group or panels or disk presuit or paragraphs because everything is in core mostly. And we can reuse this functionality to create anything you want. Of course we can use all of these models because we give us some functionality but for creating complex pages with custom layout you don't need anything of these models. So stay minimalistic. But stay flexible because, again, you can create any kind of pages using this concept. But remember that there are two types of content. There is a flexible content. It means that every page is different. So like landing pages, you want a different layout, different content, different structure. And entity references and three structures is ideal for flexible content. Structured content is another type of content. It's kind of, for example, you are selling the cars and you want to have car pages. For example, 100 car pages which are almost the same but with different content but with the same layout. Here you can use a disk presuit or some kind of such models to help here to reuse layouts from page to page. But for flexible content it's overhead and it's much easier to go with entity references and testing them in trees. And don't be afraid. Experiment like me. You can download Brix module. I will publish it tomorrow. The most recent version for Drupal 8 core. I just presented you today. I would be happy to receive feedback and probably your experience with them or give your website setup. And remember that we are not designing pages. We are designing system of components. So thinking about pages in this way like set of entities and tree structure will make your site more clear and transparent because it will be a strict information structure of blocks on every page. Repeat. And thank you. Thank you. And if anybody have question, you're welcome. Actually this is a good question because when you have such complex structures of entities combining together you should think about permissions, workflows, religions and so on. Translation as well. But on the other side it gives you more power. So you can control not just the whole page you can control pieces of it. So for example you can give an access for a part of page for different roles or you can set up a workforce using third party models for entities not just for the whole page but for entities and for page as well. But you can control more granularly because page consists of entities and you can control every entity separately. This is more complex but gives you more power here. Sorry. Yeah, probably, probably. I will add more integrations soon. So for example I would like to integrate with revisions with dynamic entity reference so you can nest not just the bundles of one entity type you can nest different entities. Entities types. Workforce, translation but this is mostly a well known module I just need to find proper way to integrate because all of this is just Drupal core entity and everything that can work with entity will work with this concept. Thank you. Any other question? So with the paragraphs module I found that the inline editing wasn't working so when it tries to save the crash do you know if this works with inline editing or not? Yeah, yeah, yeah. This is a good question because I tried, actually I tried this and in Drupal 7 it works like a charm in Drupal 8 it's a little bit different because we have to write some custom code to support inline editing for inline editing itself but for letting it know what we are editing now because then you have this entity reference field and you click, click edit it should know that you don't you are not going to edit you should specify in some way what you would like to do you would like to edit each entity separately using inline edit so you are going to edit this tree structure or really entities that's why it's some custom code needed here and I think paragraphs and my solution both we will just implement this code soon because it will be much more easier to edit pages using inline edit in Drupal 7 it was really easy and in Drupal 8 I think it will be easy to just need some investigation here another thing here is that we can add support for contextual links really easily so we can click on any part of page and click edit it's not inline editing but it's contextual menu for pieces of block it's really handy as an alternative mechanism so thank you very much for coming for listening to me and if you have some feedback reach me on drupal.org and you send me references and we have power in your experiences thank you