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.

  • Jun 24
    Online
    1 day
    07:00 - 15:00
    150 USD

This is not just a training workshop but a production workshop, as components we will create during the workshop can be used at work the next day.

Part One
The first part of the workshop focuses on the core theory of Web Components, using the browser’s own HML APIs.
We will build a complete site that has highly functional components:
• Components that make and display Ajax requests.
• Dynamic loading of components and their JavaScript files.
• Form components with built in validation.
• Creating components that lazy load images and fetch requests using the Intersection Observer API, downloading them when they are in ‘screen view’.
• Loading IndexedDB, the browser’s own asynchronous database with data for immediate and offline use.

Part Two
We will learn how to build components using StencilJS, the foundation of the Ionic Framework. I have chosen this compiler tool as it has built-in code splitting, dynamic imports and many more features. Optionally, it can create applications using the Ionic Framework and Capacitor, allowing one code base of HTML/JS/CSS to work on all platforms, PWA, Desktop Apps, iOS and Android.

Please note that although StencilJS uses Typescript, we use a minimal set of Typescript as well as being able to turn it off and run in JS mode. I have worked with StencilJS just as a JS developer.

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

We will learn how to deploy are components to NPM and to import these NPM packages into a number of frameworks.

Bring your own APIs and use cases so that you can build your own components as well during this training and production 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?