Web Components is a Web Platform standard designed for creating reusable elements with custom styling and logic and configurable degree of isolation (see Shadow DOM) to prevent interferences and side effects between the component and the surrounding elements and DOM tree.
This sounds pretty much similar to the purpose of Blocks in AEM: so far, they are pieces of reusable code using "standard" DOM elements.
-
an industry-standards based foundation for enabling complex functionality in Content & Commerce projects (e.g. drop-ins) without sacrificing performance, for component-based development, with all the associated benefits (reusability, encapsulation, ...)
-
top performance (LHS 100) is preserved thanks to 100% browser-native primitives and APIs
-
fallback to a defined standard Web Component in case no definition is in place for the specific block
-
component isolation is possible (not mandatory) thanks to the Shadow DOM
-
more consistency in global styling (the tag name can be referenced, i.e. block-hero {}
-
much easier to reuse blocks in standard HTML (i.e. reusing hero block in 404) or even fragments (which might contain custom elements in their body)
-
clean code is favored with this approach, for example a class defines a block 1:1 in behaviour and attributes (data)
-
easier to debug in page inspector (browser)
-
auto-sensing components are able to throw errors or warnings if set as children of incompatible parent components (ex.: a row as a child of another row)
-
easier to redistribute block code, which is effectively encapsulated
This project explores the usage of Web Components as "first-class citizens" in Edge Delivery projects, by focusing on specific use cases where they bring the most value.
In summary, with the following project, our team is delivering a POC of the envisioned approach, refactoring the boilerplate and without altering the authoring experience, but proposing a new, flawless developer experience. From the customer's perspective, as said, our aim is to keep LHS 100, considering performance as the main factor (and acceptance criteria) for this approach to succeed.
- Website: https://aem-bricks-preview.albertodicagno.com/
- API: https://aem-bricks-preview.albertodicagno.com/api/v1
npm inpm run lint- Create a new repository based on the
aem-boilerplatetemplate and add a mountpoint in thefstab.yaml - Add the AEM Code Sync GitHub App to the repository
- Install the AEM CLI:
npm install -g @adobe/aem-cli - Deploy API worker on Cloudflare:
npm run worker:deploy - Start AEM Proxy:
npm start(opens your browser athttp://localhost:3000) - Open the
{repo}directory in your favorite IDE and start coding :)