Learn how to:
Starts at 9:00 AM BST (8:00 AM UTC)
Our team is happy to discuss other options with you.
Contact us at firstname.lastname@example.org and mention ref:
Private tuition and large-group discounts are also available. Find out more here.
Who should take this workshop?
Attendees will need a laptop running a modern web browser (Chrome, Firefox or Microsoft Edge). For the sections of the workshop based on SASS/SCSS, Webpack, and Babel, you will need a nodeJS v12 or higher runtime — instructions will be provided on installing this if you don’t already have it set up.
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?
- Working with templated HTML
- Styling components with CSS
Architecture of a web component
- 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
- 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
- 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