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
Target Audience and Prerequisites
document.getElementById does, and you can write some basic HTML, you should be able to pick up the rest as we go.
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 v16 or higher runtime - instructions will be provided on installing this if you don’t already have it set up.
About the Trainer
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.