Lighting Talk - Custom elements
Derstappen, Maik
how to take advantage of creating components as Custom Elements - supported by most modern frameworks
 Hi guys, I want to talk today about custom elements and what they are and how we could use them in Plone and other frameworks, even front-end frameworks. So let's have a look. So custom elements, what are they? They are basically an extension to normal native HTML elements. We can create custom elements like this. They always have a dash in the name and they can have properties where we can configure them and they even can have something in the content area which will then fill a slot inside the component so we can inject content. One reason why we want to use web components or custom elements is we want to create things only once and then we want to use them in many different places. That means many different JavaScript frameworks or even without JavaScript frameworks. So wherever we have web stuff we can actually use them. There's a website, custom elements everywhere. I would recommend to have a look at this. Here they have running tests with all the JavaScript frameworks out there and you can see how well the individual JavaScript frameworks are supporting native web components or custom elements and most of them are actually doing a perfect job there. So we can use the clone CLI to add a Svelte app. Svelte is a small JavaScript framework or slash JavaScript compiler which allows us to create either vanilla JavaScript components which are really reusable or you can even create JavaScript components in web components. So let's do that. Let's keep the default name for now. Let's create that. After we did that we will have our component created in Svelte source by Svelte app. So that's the name of the app. You can have multiple apps. When you've done this you can run John or NPM install to install the JavaScript dependencies there. After that you can run John Dev and this will spin up a Dev server. You can try your app here. This is just native HTML but for development of your small components this is faster. If we want this in clone now we can do that. Let's first start the clone of this package so that we actually have this running here and all we have to do to use our component is to actually go to the add-ons sections and install the Python package or the clone package we have. And after that we can go even with the tiny MC and insert our custom component. Clone is already configured to allow that. And we see we have our component here and it's working. What about the size of our component? Let's have a look. We see here our component is less than 5 kilobyte in size. I think that's pretty good. So that's all what I have. Let's build some pretty cool components.
 Hi guys, I want to talk today about custom elements and what they are and how we could  use them in Plone and other frameworks, even front-end frameworks.  So let's have a look.  So custom elements, what are they?  They are basically an extension to normal native HTML elements.  We can create custom elements like this.  They always have a dash in the name and they can have properties where we can configure  them and they even can have something in the content area which will then fill a slot  inside the component so we can inject content.  One reason why we want to use web components or custom elements is we want to create things  only once and then we want to use them in many different places.  That means many different JavaScript frameworks or even without JavaScript frameworks.  So wherever we have web stuff we can actually use them.  There's a website, custom elements everywhere.  I would recommend to have a look at this.  Here they have running tests with all the JavaScript frameworks out there and you can  see how well the individual JavaScript frameworks are supporting native web components or custom  elements and most of them are actually doing a perfect job there.  So we can use the clone CLI to add a Svelte app.  Svelte is a small JavaScript framework or slash JavaScript compiler which allows us  to create either vanilla JavaScript components which are really reusable or you can even  create JavaScript components in web components.  So let's do that.  Let's keep the default name for now.  Let's create that.  After we did that we will have our component created in Svelte source by Svelte app.  So that's the name of the app.  You can have multiple apps.  When you've done this you can run John or NPM install to install the JavaScript dependencies  there.  After that you can run John Dev and this will spin up a Dev server.  You can try your app here.  This is just native HTML but for development of your small components this is faster.  If we want this in clone now we can do that.  Let's first start the clone of this package so that we actually have this running here  and all we have to do to use our component is to actually go to the add-ons sections  and install the Python package or the clone package we have.  And after that we can go even with the tiny MC and insert our custom component.  Clone is already configured to allow that.  And we see we have our component here and it's working.  What about the size of our component?  Let's have a look.  We see here our component is less than 5 kilobyte in size.  I think that's pretty good.  So that's all what I have.  Let's build some pretty cool components.
Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_0_1463.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_1464_2555.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_2556_2783.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_2784_3491.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_3492_4523.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_4524_4955.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_4956_5099.png Lighting_Talk_-_Custom_elements_-_Maik_Derstappen_WxJs1sRi0P0_5100_6716.png
Hi guys, I want to talk today about custom elements and what they are and how we could use them in Plone and other frameworks, even front-end frameworks. So let's have a look. So custom elements, what are they? They are basically an extension to normal native HTML elements. We can create custom elements like this. They always have a dash in the name and they can have properties where we can configure them and they even can have something in the content area which will then fill a slot inside the component so we can inject content. One reason why we want to use web components or custom elements is we want to create things only once and then we want to use them in many different places. That means many different JavaScript frameworks or even without JavaScript frameworks. So wherever we have web stuff we can actually use them. There's a website, custom elements everywhere. I would recommend to have a look at this. Here they have running tests with all the JavaScript frameworks out there and you can see how well the individual JavaScript frameworks are supporting native web components or custom elements and most of them are actually doing a perfect job there. So we can use the clone CLI to add a Svelte app. Svelte is a small JavaScript framework or slash JavaScript compiler which allows us to create either vanilla JavaScript components which are really reusable or you can even create JavaScript components in web components. So let's do that. Let's keep the default name for now. Let's create that. After we did that we will have our component created in Svelte source by Svelte app. So that's the name of the app. You can have multiple apps. When you've done this you can run John or NPM install to install the JavaScript dependencies there. After that you can run John Dev and this will spin up a Dev server. You can try your app here. This is just native HTML but for development of your small components this is faster. If we want this in clone now we can do that. Let's first start the clone of this package so that we actually have this running here and all we have to do to use our component is to actually go to the add-ons sections and install the Python package or the clone package we have. And after that we can go even with the tiny MC and insert our custom component. Clone is already configured to allow that. And we see we have our component here and it's working. What about the size of our component? Let's have a look. We see here our component is less than 5 kilobyte in size. I think that's pretty good. So that's all what I have. Let's build some pretty cool components.
elements and what they are and how we could use frameworks are supporting native web components or custom elements and most of them are actually