This workshop is called 'Pure JavaScript Web Components' and will be hosted by Dylan Beattie.

It's a two day, in-depth, hands-on workshop about building interactive web components using modern JavaScript. No frameworks, no libraries; learn how to create fast, responsive user experiences, built with 100% native code.

In this two-day workshop, you’ll find out how to design, build and deploy custom web components built with pure native JavaScript. Over the course of the workshop, attendees will build several web components, from a simple “Hello World” app to a Tetris-style game implemented entirely as a custom element built with HTML and JavaScript.

A little bit about Dylan...

Dylan Beattie created his first web page in 1992. With nearly 25 years’ experience as a professional developer, he’s worked on everything from static websites to distributed microservice architectures. Dylan is a Microsoft MVP and the creator of the Rockstar esoteric programming language, and he’s presented talks about technology and software development at conferences and events all over the world.

Dylan’s been building web applications using JavaScript since the late 1990s. His public JavaScript projects include iPuzzler, an web component for publishing crossword puzzles on the web, and Satriani, a JavaScript interpreter for Rockstar.

Here's what you will cover over the two day workshop;

Overview of modern web component architecture

Modern browser APIs: web components, custom elements

Understanding events and event handlers

Client-side tooling: working with the DOM inspector

Server-side tooling: introducing Webpack and Babel

Working with the Shadow DOM

What is a shadow DOM, why does it matter?

Rendering HTML elements via JavaScript

Working with templated HTML

Styling components with CSS

Architecture of a web component

Working with JavaScript classes

Registering custom elements

Structuring your code: models, views, renderers and handlers

Putting it all together: building your first web component

Rendering strategies for web components

Managing state via models and views

CSS layouts: document, flex and grid

Working with the HTML element

Responsive design considerations for web components

User interactions and events

Handling mouse and keyboard events

Mobile and tablet interfaces: working with touch events

Animations, loops and timeouts

Interacting with components via custom events

Testing web components with Jest

Introduction: unit testing JavaScript with Jest

Application testing: validating behaviour with the arrange/act/assert pattern

Interaction testing: simulating events and mocking handlers

Testing strategies for web components: how much test coverage is enough?

Web component tooling

Bundling and publishing your component using Webpack

Working with SASS and SCSS

Supporting older browsers using Babel

Versioning and release management

PHEW!!.......So as you can see, its a jam packed two days of learning! Dylan will be able to offer one to one support through the workshop to ensure that everyone walks away with a clear in-depth understanding, ready to use in the real world!

For more details on the workshop, or queries about group booking discounts please get in touch with hello@thefusionhub.co.uk

Pure JavaScript Web Components - Online Workshop

Follow this organizer to stay informed on future events

Events you might like

Web Design with Wordpress, Javascript & HTMLWeb Design with Wordpress, Javascript & HTML

Refactor JavascriptRefactor Javascript

Web Development: C++, PHP, MySQL, Python, HTML, CSS & JavaScriptWeb Development: C++, PHP, MySQL, Python, HTML, CSS & JavaScript

Web Design with Wordpress, Javascript & HTML

Refactor Javascript

Web Development: C++, PHP, MySQL, Python, HTML, CSS & JavaScript