Below you can read the script from the above video. You can also read the release blog post to help understanding the problem components are solving.
Here is a website with lots of pages. The menu element was simply copied from page to page, so if we wanted to customize it, we would have to apply the change to every single menu element on every page.
Let's set the background color of this menu element to red. All the others remained gray. We would have to change them one-by-one. That's bad.
To address that, we can use components.
Right click and choose Create component. The page reloads and notice that the icon of this menu element is now purple, indicating it is component based. Also, in the New panel, you'll find a My components section, where you can see the underlying component.
Think of it like this: the component instance is a pointer to the component. Edit the component and all component instances will reflect the change.
Let's try it! We can either go to New panel, My Components, right click it and select Edit Component - or we can do the same through an instance. Either way, we will land in the Component editor.
Here we can edit the element as usual. Right click, settings, and change it's background color. Once done, return with the Apply & Return button.
Of course, all the other pages are unaffected, so at this point we will have to replace all the other menu elements with a menu component instance. That way they will be managed centrally.
After that we can make changes centrally.
To manage an entire page layout centrally, we can turn an entire page into a page component. Some applications call it a template.
Let's duplicate this page first so we are free to remove its contents. Change it's title to Page as it will be used for new pages later. Right click, Create component.
The page was replaced by a component instance. You can see the purple icon and no elements under it. Neither can we select these elements on the page, only the menu entries which reference other pages, so they are not part of the component. Anything that is part of the component, is not selectable. We can't edit the text fields either. Again, except for those that are defined outside the component, like the menu entries.
Of course we want to have unique content on every page, so let's edit this component. Right click, Edit component. We land in the component editor.
Our goal is to basically punch a hole in the middle of this page component, so that unique contents can be added on each page instance. Let's remove the unnecessary content first, then go to the New Panel, uikit.boomla.net, Misc, and find the Bucket placeholder element. Just drag it where you want to have custom contents. This will be the placeholder for those.
Let's customize it, change it's name to Main.
After changing or creating buckets, you MUST always hit the Apply button. Let me say that again. After changing or creating buckets, you MUST always hit the Apply button. If you add multiple buckets, you must Apply the changes one-by-one. That's because component instances may need to be modified, and if you make multiple changes, it may not be possible to determine what needs to be done.
We are done, let's return with the Apply & Return button. We are on the page instance. We can see the page component show up among our components.
Let's move all our contents from the original page to our page instance. Select all contents, then cut. Now, we can't right click a bucket to insert elements there, so for now we will have to drop something temporary there so we can paste things. Once pasted, we can remove this. This will be simplified in the future, but it works for now.
As you can see, we have a page with custom contents, where we can only edit the contents. As we create new pages later, we will create new instances of our page component to achieve a uniform page layout.
Now, let's say we need a second page layout, say, with a full-width content column. Let's create a new page instance, right click it and select Detach component. This will disconnect our page instance from the component and copy all elements from the component into this one.
We can then edit this page and turn into another component with a full-width layout. Let's add the Bucket placeholder again. Apply. Change its name. Apply and return.
In case you are not using a component any more, you can simply remove it from My Components.
Don't worry, if it is still in use, you won't be able to remove it. You will get an error instead telling you where it is used.
Finally, the website's root page is a bit special. You can not remove it, as it contains your entire website. So, unlike other pages, the root file contains an extra page element, that stores the contents of your root page. In fact, can have more of them, but only the first will be used. So, to replace the home page, just place another page element before that, and remove the original.
Components are an extremely powerful feature.
It is quite simple to use once you get the hang of it - but if you haven't used anything similar before, it may be a bit hard at first.
I highly recommend you give it a try right now to build up some muscle memory!