Developing Web Components

In de cursus Developing Web Components van SpiralTrain leren de deelnemers web platform API's zoals te gebruiken om nieuwe zelf gedefinieerde Web Components met een eigen HTML tag, eigen encapsulated

Intro Web Components

De cursus Developing Web Components gaat van start met een overzicht van Web Components en de voordelen die ze bieden op het gebied van encapsulation, reusability en interoperability. Deelnemers krijgen een fundamenteel inzicht in de belangrijkste concepten en technologieën die ten grondslag liggen aan Web Components, zoals Custom Elements, de Shadow DOM en HTML templates.

Custom Elements

Vervolgens wordt aandacht besteed aan de manier waarop Custom Elements kunnen worden gedefinieerd en gebruikt. Onderwerpen zijn onder meer de life cycle van Custom Elements, properties, attributes en events, evenals best practices voor het maken en uitbreiden van Custom Elements.

ES modules

Ook komen ES modules aan bod die modulaire code organisatie en dependency management bij JavaScript development mogelijk maken. Onderwerpen zijn de creatie van ES modules en het importeren en exporteren van ES modules. Ook komt aan de orde hoe projecten met behulp van dit krachtige module systeem kunnen worden gestructureerd.

Shadow DOM

Ook de Shadow DOM wordt besproken en er wordt uitgelegd hoe je styling en markup binnen Web Components kunt inkapselen, waardoor isolatie wordt gegarandeerd en style leakage wordt voorkomen. Er wordt aandacht besteed aan het creëren van Shadow Roots, het stylen van Shadow DOM content en het gebruik van slots voor content projection.

HTML Templates

Onderdeel van de cursus Web Component Development zijn ook de HTML templates waarmee herbruikbare markup structuren worden gedefinieerd. Er wordt uitgelegd hoe HTML templates encapsulation en instantiatie van complexe HTML structuren mogelijk maken, waardoor een flexibele en efficiënte component composition in web applicaties mogelijk wordt.

Advanced Web Components

Tenslotte worden geavanceerde technieken en patterns voor het ontwikkelen van Web Components behandeld. Hierbij komen de samenstelling en communicatie tussen Web Components, het integreren van Web Components in microservices architecturen en het optimaliseren van prestaties en toegankelijkheid aan bod.

Doelgroep Cursus Developing Web Components

De cursus Developing Web Components is bestemd voor Web Developers die willen leren hoe Web Components in moderne web applicaties kunnen worden toegepast.

Voorkennis Cursus Developing Web Components

Om aan deze cursus te kunnen deelnemen is goede kennis van de basis van Web Applicaties met HTML en CSS en kennis van JavaScript vereist.

Uitvoering Training Web Components

De theorie wordt uitgelegd met slides en demos. De cursus heeft een hands-on karakter. Uitleg wordt afgewisseld met oefeningen.

Certificaat Cursus Web Components

De deelnemers krijgen na het goed doorlopen van de cursus een certificaat van deelname aan Web Components.

Modules

Module 1 : Intro Web Components

• What are Web Components?
• Benefits of Web Components
• Web Component Specifications
• Custom Elements
• Shadow DOM
• Style Encapsulation
• ES Modules
• HTML Templates
• Browser Support
• Environment Setup
• Create First Web Component

Module 2 : Custom Elements

• Intro Custom Elements
• Defining Custom Elements
• Lifecycle Hooks
• Attributes and Properties
• Event Handling
• Extending Built-in Elements
• Naming Conventions
• JavaScript Libraries
• Platform API's
• Polyfills
• Browser Compatibility

Module 3 : ES Modules

• ECMA Standard
• Module Systems
• CommonJS Modules
• Asynchronous Module Definition
• Internal Modules
• External Modules
• Imports and Exports
• Module Scopes
• Module Instantiation
• Dependency Graphs
• WebAssembly Integration

Module 4 : Shadom DOM

• What is Shadow DOM?
• Encapsulation
• Creating Shadow Roots
• Styling Shadow DOM Content
• Scoped CSS Variables
• Shadow DOM Slots
• Shadow DOM Events
• Manipulating Shadow DOM Content
• CSS Encapsulation
• CSS Inheritance
• Debugging Shadow DOM

Module 5 : HTML Templates

• What are HTML Templates?
• Creating HTML Templates
• Content Insertion
• Markup Fragments
• Template Cloning
• Template Instantiation
• Parameterized Templates
• Dynamic Templates
• Template Accessibility
• Templating Engines
• Template Libraries

Module 6 : Advanced Web Components

• Composing Web Components
• Component Interaction
• Custom Events
• Shadow DOM Composition
• Slot Receptacles
• Named Slots
• Conditional Rendering
• Internationalization
• Single Page Applications
• Microservices Architecture
• Responsive Web Components