Hello! This is the online handbook for Dylan Beattie's workshop Pure JavaScript Web Components.
The handbook includes material and code samples for the five core browser technologies that we'll be looking at during part 1 of the workshop: custom elements, the shadow DOM, HTML templates, event handlers, and ES modules.
- Module 1: Introducing Custom Elements
In this module, we'll learn about the HTML custom elements API, and see how we can use it to create our own custom HTML tags.
- Module 2: The Shadow DOM
In this module, we'll meet the shadow DOM, and learn how to keep our custom component code separated from the page that's hosting our component
- Module 3: HTML Templates
In this module, we'll learn about the HTML template and slot elements, and how to use them to control the layout and structure of our custom components.
- Module 4: Events and Event Handlers
In this module, we'll learn about HTML events, event handlers, the browser event API, and see how to create and use our own custom events.
- Module 5: ECMAScript Modules
In this module, we'll learn how to use ES modules to manage dependencies between our components, and to import behaviour and features from other libraries.
- Module 6: Styling Components
In this module, we'll look at how to use CSS to control the layout and appearance of your components.
- Module 7: Component Architecture
In this module, we'll look at how to structure and organise your the JS files that make up your components, and use a variation on the popular model/view/controller (MVC) pattern when creating web components.
- Module 8: Snowpack
Snowpack is a modern, lightweight build tool for faster web development. We'll add Snowpack to our project, and see how it can speed up the development and testing of our components.
- Module 9: Advanced Stylesheets
In this section, we'll look at how to use CSS custom properties to enhance your stylesheets. We'll also look at SASS (Syntactically Awesome Style Sheets), a CSS extension language that adds a whole bunch of useful features to the core CSS language, and see how we can use Snowpack to add technologies like SASS to our web components.
- Module 10: Unit Testing Web Components
In this section, we'll see how to unit test our components using Jest, a popular open-source testing framework for JavaScript applications.
- Appendix A: Bundlers, Minifiers and Transpilers
A recap of the difference between bundlers, minifiers and transpilers, and how they fit into the modern web development ecosystem.