Web Components as Micro Apps

Web Components are custom HTML Elements and are part of the browser specification.

Just like regular HTML tags, they can be used on any HTML platform and can be part of any build process.

Web Components can be built with the raw HTML APIS as well as using a range of frameworks that are 'export' their components as Web Components.

Web Components are true micro-services and micro-apps. They enable parts of applications to be deployed not just as services but also to be integrated into other applications.

We can have a number of frameworks work together to create one main application. Developers can learn one code base yet still work in other code bases.

PART ONE

The first part of the workshop focuses on the core theory of Web Components using the low level HML APIs.

We cover Light and Shadow DOM.
CSS.
Inter component events and page <-> component event handling.
We will build highly functional components that work with AJAX, IndexedDB, Intersection Observer API, forms and lists.
Using these, we convert a very monolithic and PHP based framework to an HTML/JS/CSS app, showing the ability of Web Components to create micro apps/services.

PART TWO

In the second part, we will look at how frameworks export their components as Web Components, how frameworks can import Web Components, even wrapping then to become a regular framework component.

We will look at the range of tools that can make Web Component development easier and add in extra features as well as the various ways of deploying Web Components through the use of NPM and CDNs.

You will leave the workshop having built a number of highly functional Web Components to use in your work the next day.