Skip to Content
View all events

Building Reusable JavaScript Web Components

Published by O'Reilly Media, Inc.

Intermediate content levelIntermediate

The Web Components tour

Web development has changed dramatically in the past few years. When you build a frontend application today, you’ll probably want to reuse components across your application. But HTML elements are very limited. So what should you do?

Join expert Gil Fink for a deep dive into the Web Components standard, which enables web developers to create native components in the browser—easing the pain of creating component-driven apps. You’ll explore the four Web Components APIs, then get hands-on to put them to use.

What you’ll learn and how you can apply it

By the end of this live online course, you’ll understand:

  • The reasons that lead to the development of the Web Components standard
  • The four different Web Components APIs: Templates, ES Modules, Shadow DOM, and Custom Element
  • How Web Components can help you building reusable components with no dependency on frameworks or libraries

And you’ll be able to:

  • Add templates to your HTML
  • Import modules using ES modules
  • Wrap DOM elements with Shadow DOM
  • Create new custom elements using the Custom Element API

This live event is for you because...

  • You’re a web developer.
  • You work with the web platform.
  • You want to better understand how to reuse components.

Prerequisites

  • A computer with Node.js and the text editor of your choice installed
  • Frontend development experience (at least one year preferred)
  • A basic understanding of HTML, JavaScript, and web browsers

Recommended follow-up:

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

The road to Web Components (10 minutes)

  • Presentation: The four Web Components APIs; problems they solve for developers

Templates (25 minutes)

  • Presentation: The HTML template element; how to use it to create reusable templates
  • Hands-on exercise: Create a simple template
  • Q&A

ES modules (10 minutes)

  • Presentation: ES modules; how they can help to load modules
  • Q&A

Shadow DOM (25 minutes)

  • Presentation: The Shadow DOM API; how to use it to encapsulate element’s code
  • Hands-on exercise: Create a simple Shadow DOM wrapper on top of the template from the first exercise
  • Q&A
  • Break

Custom elements (45 minutes)

  • Presentation: The Custom Element API; how to use it to create new HTML web components
  • Hands-on exercise: Create a custom element using code from the previous template and Shadow DOM exercises

Wrap-up and Q&A (5 minutes)

Your Instructor

Gil Flink

Gil Fink is a web development expert, Web Technologies GDE, Microsoft Development Technologies MVP and sparXys CEO. He is currently consulting for various enterprises and companies, where he helps to develop web-based solutions. He is also co-author of several Microsoft Official Courses (MOCs) and training kits co-author of "Pro Single Page Application Development" book (Apress), co-organizer of MVP Days Israel conference.

linkedinXlinksearch

Skill covered

Web Components