Let’s Build a Web Component!

Component based approaches to front end development have taken over the web. From conceptual approaches like Atomic Design, to component based frameworks like React and Vue, this perspective on web development is unlikely to fall out of favor any time soon. But even those who have been thinking in components for years have likely been doing so while bouncing between a number of different templating engines and JavaScript frameworks. Web Components have the potential to change that.

Web components are a set of web APIs and standards that can be used to create custom and reusable HTML elements that aren’t tied to a specific framework and are supported across all modern browsers. If you are one of the many front-end developers who have been hearing ongoing rumblings about web components but haven’t had the time or motivation to dive in, this workshop is for you.

We’ll review the basics of the web components standards through a series of hands on examples, focusing on:

* Key technologies including custom elements and the shadow DOM
* Use cases for web components
* Creating web components using vanilla JavaScript and the core web components API
* Creating web components with the help of a library
* Styling web components
* Handling application state and using web components alongside frameworks like Angular, Vue and React