Dylan Beattie
Consultant, Software Developer and Microsoft MVP
Dylan Beattie @dylanbeattie is a consultant, software developer and international keynote speaker. He’s been building web applications since the 1990s, and works primarily on Microsoft .NET, HTTP APIs, UX design, and distributed systems. Dylan is a Microsoft MVP for Developer Technologies, and the creator of the Rockstar programming language. Dylan lives and works in London and when he’s not writing code he plays guitar and writes songs.
Workshop topic:
Pure JavaScript Web Components
Time & Date:
May 23rd & 24th | 10am-5pm CEST
About workshop
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 an interactive puzzle game implemented entirely as a custom element built with HTML and JavaScript.
Agenda
- 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 <canvas> 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
You can download the full program for this workshop at the following LINK.
* If you're interested in this program, please contact us at info@itkonekt.com to find out more about availability and prices.