Golden Recursion Inc. logoGolden Recursion Inc. logo
Advanced Search
Web Components

Web Components

Web components include html templates, custom elements, shadow DOM etc

All edits

Edits on 21 May, 2020
Golden AI"Wikidata import from WikidataImport2"
Golden AI edited on 21 May, 2020
Edits made to:
Infobox (+1 properties)
Infobox
Wikidata entity ID
Q18217380
Edits on 28 Jun, 2019
Will Suter
Will Suter approved a suggestion from Golden's AI on 28 Jun, 2019
Edits made to:
Article (+9/-9 characters)
Article

From an architectural point of view, a Component is a reusable part of a codebase that contains both UI and code. This concept is at the base of a lot of modern front-end frameworks like React or Angular. Web Components is a suite of native technologies that let developers create Components without the help of any third-party libraries, to use in their web pagesweb pages and web apps.

Will Suter
Will Suter approved a suggestion from Golden's AI on 28 Jun, 2019
Edits made to:
Article (+5/-5 characters)
Article

From an architectural point of view, a Component is a reusable part of a codebase that contains both UI and code. This concept is at the base of a lot of modern front-end frameworks like ReactReact or Angular. Web Components is a suite of native technologies that let developers create Components without the help of any third-party libraries, to use in their web pages and web apps.

Carla Faraguna"removed references to ButterCMS"
Carla Faraguna edited on 28 Jun, 2019
Edits made to:
Infobox (-1 properties)
Description (+13/-80 characters)
Article (-1507 characters)
Topic thumbnail

Web Components

Understanding the APIs that compose webWeb components -include html templates, custom elements, shadow DOM and how to integrate ButterCMS web pagesetc

Article

From an architectural point of view, a Component is a reusable part of a codebase that contains both UI and code. This concept is at the base of a lot of modern front-end frameworks like React or Angular. Web Components is a suite of native technologies that let developers create Components without the help of any third-party libraries, to use in their web pages and web apps. In this post, we will cover the APIs that compose the Web Components suite and how to integrate them with ButterCMS.

...

At the beginning of this blog post, we said that the main advantage of Components (in any environment, not just Web Components) is that they are reusable. But the ButterCMSList is not reusable in the current form. All the parameters are hardcoded in the component itself, so the first step to make this component reusable is to transform them in attributes.

In this post, we covered how to create a Web Component that shows a list of blog posts. It's quite easy to build a component for the single post, passing the slug attribute, or other components for the other elements of ButterCMS like pages, categories and so on and so forth. But why you should care? I think that Web Components are quite important for ButterCMS (or headless CMS in general) users for a number of reasons that I will explain in this section.

At last, Web Components are the central concept of Micro Frontends: a new way to design complex front-end application similar to the Microservices architecture. With this architecture we can use Web Components to create micro applications, each with a specific mission. These micro applications are then put together to create a single application. Wrapping every micro application in a Web Component let developers to use different frameworks for every different micro app. This could be a very interesting way of working if ButterCMS is part of a more complex application.

Infobox
Pooja Rathan
Pooja Rathan edited on 28 Jun, 2019
Edits made to:
Infobox (+1 properties)
Description (+137 characters)
Article (+2007 characters)
Categories (+6 topics)
Related Topics (+1 topics)
Topic thumbnail

Web Components

Understanding the APIs that compose web components - html templates, custom elements, shadow DOM and how to integrate ButterCMS web pages

Article

From an architectural point of view, a Component is a reusable part of a codebase that contains both UI and code. This concept is at the base of a lot of modern front-end frameworks like React or Angular. Web Components is a suite of native technologies that let developers create Components without the help of any third-party libraries, to use in their web pages and web apps. In this post, we will cover the APIs that compose the Web Components suite and how to integrate them with ButterCMS.

Shadow DOM: This technique is useful if the web components should not be affected by the DOM outside the component itself.

At the beginning of this blog post, we said that the main advantage of Components (in any environment, not just Web Components) is that they are reusable. But the ButterCMSList is not reusable in the current form. All the parameters are hardcoded in the component itself, so the first step to make this component reusable is to transform them in attributes.

In this post, we covered how to create a Web Component that shows a list of blog posts. It's quite easy to build a component for the single post, passing the slug attribute, or other components for the other elements of ButterCMS like pages, categories and so on and so forth. But why you should care? I think that Web Components are quite important for ButterCMS (or headless CMS in general) users for a number of reasons that I will explain in this section.

...

At last, Web Components are the central concept of Micro Frontends: a new way to design complex front-end application similar to the Microservices architecture. With this architecture we can use Web Components to create micro applications, each with a specific mission. These micro applications are then put together to create a single application. Wrapping every micro application in a Web Component let developers to use different frameworks for every different micro app. This could be a very interesting way of working if ButterCMS is part of a more complex application.

Infobox
Categories
Related Topics
Edits on 1 Jan, 2017
Golden AI"Initial topic creation"
Golden AI created this topic on 1 Jan, 2017
Edits made to:
Article
Topic thumbnail

 Web Components

Web components include html templates, custom elements, shadow DOM etc

Golden logo
By using this site, you agree to our Terms & Conditions.