WORKSHOP

Pure JavaScript Web Components

JS-COMP-DB-01

  2 days

English  

An 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.

JavaScript runs in every web browser, tablet and smartphone on the planet. It’s used to create all kinds of applications, from business productivity tools to social media apps and online games. Modern JavaScript is a flexible, powerful development platform — but it’s a platform that comes with a dizzying array of standards, frameworks and tools. From the dark days of document.layers , through jQuery and prototype, to modern ecosystems like React and vueJS, developers have long relied on frameworks and libraries when it comes to building client-side components and systems using JavaScript.

With modern JavaScript, you don’t need to. Technologies like web components, custom elements and the shadow DOM are natively supported by over 90% of browsers, and using these technologies, we can create lightweight, responsive web components that leverage modern browsers’ native APIs to deliver blisteringly fast performance.

Dylan Beattie leading a previous workshop. Join Dylan for this Pure JavaScript Web Components workshop!

Learn how to:

In this 2‑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.

This workshop is offered alongside the FullStack eXchange 2022 conference.

If you're interested in attending a workshop and the conference, contact us at sales@skillsmatter.com to save 25% when you bundle your purchase

Online Courses for Software Professionals at Skills Matter

About the Author

Dylan Beattie

Dylan Beattie designs software, builds websites and makes music. He lives in London.

Available dates

Dates coming soon

Can't make it on any of these dates?
Our team is happy to discuss other options with you.
Contact us at sales@skillsmatter.com and mention ref: JS-COMP-DB-01.
Private tuition and large-group discounts are also available. Find out more here.

Who should take this workshop?

This workshop is aimed at software professionals with some web development experience. You don’t need to be a JavaScript expert — if you’re comfortable editing code in a text editor, you know what document.getElementById does, and you can write some basic HTML, you should be able to pick up the rest as we go.

Prerequisites

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.

Workshop Outline

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

Pure JavaScript Web Components
Dates coming soon