Pure JavaScript Web Components - Online Workshop
Event Information
About this Event
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