Professional Web Components

Duration

5 days

Description

This comprehensive course is designed for computer programming professionals who wish to delve into the world of Web Components. It covers everything from the basics of Web Components and their W3C standards to the intricacies of Custom Elements, Shadow DOM, and Templates. The course also includes a thorough review of HTML, CSS, JavaScript, and TypeScript languages, focusing on their relevance to Web Components. Participants will learn how to define and register Custom Elements, explore the Shadow DOM, and use Templates in Web Components. The course also provides insights into unit testing, Web Component Frameworks, particularly the Lit Framework, and Lit Server Rendering. By the end of the course, participants will have a solid understanding of Web Components and the skills to effectively use them in their programming projects.

Objectives

Understand the concept, purpose, and W3C standards of Web Components. Review HTML, CSS, JavaScript, and TypeScript languages, focusing on their relevance to Web Components.
Learn to define, register, and understand the lifecycle of Custom Elements in Web Components.
Explore the Shadow DOM in Web Components, including its host, tree, boundary, root, and style application.
Discover the use of Templates in Web Components, including the Template and Slot elements.
Gain knowledge on unit testing in Web Components, including setting up Jest and TypeScript.
Get acquainted with Web Component Frameworks, particularly the Lit Framework, and learn to define, render, and manage data in Lit Web Components.
Learn about Lit Server Rendering, including server and client usage, authoring components, and DOM emulation.

Prerequisites

All attendees should have experience with modern JavaScript or TypeScript and web browser programming.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. No local student setup is required, this course is delivered with GitHub Codespaces. The free allotment of Codespaces hours from GitHub is sufficient to complete the course.

Outline

What are Web Components?
- What problem do Web Components solve?
- W3C Standards
- Custom Elements
- Shadow DOM
- HTML Template
Language Review
- HTML
  - Elements & Custom Elements
  - Attributes & Custom Attributes
  - Semantic Meaning
  - Template and Slot Elements
- CSS
  - Selectors
    - Id, Class, Element
    - Attribute
    - Pseudo-Class
    - Combinators
    - Specificity
    - Scoping Strategy
  - Layout
    - Box Model
    - FlexBox
    - Grid
  - Display & Position
  - Styling Fonts & Colors
- JavaScript
  - Classes
  - Prototype Inheritance
  - Functions
  - Types and Variables
  - Promises
- TypeScript
  - Webpack & Babel
  - Browser API Review
  - DOM Manipulation
  - Selecting Elements
  - Append/Remove/Modify Elements
  - Cloning Elements
- Http Requests
  - XmlHttpRequest Object
  - Fetch API
- Events
  - Bubbling
  - Capturing
  - Event Data
  - Registering Event Handlers
  - Triggering Events
  - Prevent Default
  - Stop Propogation
Web Components – Custom Elements
- Define a new Custom Element Class
- Register Custom Element
- Lifecycle Callbacks
  - Connected Callback
  - Disconnected Callback
  - Adopted Callback
  - Attribute Changed Callback
- Transpilers and Classes
Web Components – Shadow DOM
- Shadow Host
- Shadow Tree
- Shadow Boundary
- Shadow Root
- Attach a Shadow Root
- Applying Styles
- Browser Events
- Open vs Closed
Web Components – Template
- Template Element
- Usage with Web Components
- Slot Element
- Project Content with Slots
Web Components - Unit Testing
- Setting up Jest and TypeScript
- Unit Test Scaffolding
  - Test Suite
  - Test
  - Setup/Teardown
  - Assertions
  - Spies
  - Mocks
Web Component Frameworks
- What is a Framework?
- Popular Frameworks
- Lit Framework
- What is Lit?
- Getting Started with Lit
Lit Web Components
- Overview
- Defining
- Rendering
- Reactive Properties
- Styles
- Lifecycle
- Shadow DOM
- Events
- Decorators
Lit Templates
- Overview
- Expressions
- Conditionals
- Lists
- Built-in Directives
- Custom Directives
Lit Composition
- Overview
- Component Compositiom
- Mixins
- Controllers
Lit Managing Data
- Context
- Async Tasks
Lit Tools and Workflows
- Overview
- Requirements
- Development
- Testing
- Publishing Production
- Starter Kits
- Adding Lit
Lit Server Rendering
- Overview
- Server Usage
- Client Usage
- Authoring Components
- DOM Emulation