Web Components as Micro Apps

Web Components are custom HTML Elements that 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 allow applications to be built using a range of frameworks that are 'exported' as Web Components. Vanilla JS and compiler tools are also available to create 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. Web Components can help an organisation organise and modularise their code base, both UI and functionality, enabling organisations to develop a Micro App architecture for their teams.

    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.

    Craig West
    Offline first!

    Craig is freelance trainer and architect tbased in Brighton, UK and attends many local Web Development meetings. With a previous career in business and accounting, as well as having run his own non-IT business, Craig can speak both technical and business. He believes that technology serves the user, not the other way around, so the user experience is paramount.

    He has given talks and workshops at events and is interested in Web Components, Progressive Web Apps, React, WordPress and JavaScript with a strong interest in pages that are ‘instant’ and/or offline capable.

    Programutvikling uses cookies to see how you use our website. We also have embeds from YouTube and Vimeo. How do you feel about that?