- Leren door doen
- Trainers met praktijkervaring
- Klassikale trainingen
- Gedetailleerd cursusmateriaal
- Duidelijke inhoudsbeschrijving
- Maatwerk inhoud mogelijk
- Trainingen die doorgaan
- Kleine groepen
In de cursus Developing Web Components leren de deelnemers web platform API's zoals te gebruiken om nieuwe zelf gedefinieerde Web Components met een eigen HTML tag, eigen encapsulated styles en eigen gedrag te maken. De deelnemers leren te werken met Custom Elements, Shadow DOM en HTML Templates
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.
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.
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.
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.
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.
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.
De cursus Developing Web Components is bestemd voor Web Developers die willen leren hoe Web Components in moderne web applicaties kunnen worden toegepast.
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.
De theorie wordt uitgelegd met slides en demos. De cursus heeft een hands-on karakter. Uitleg wordt afgewisseld met oefeningen.
De deelnemers krijgen na het goed doorlopen van de cursus een certificaat van deelname aan Web Components.
Module 1 : Intro Web Components |
Module 2 : Custom Elements |
Module 3 : ES Modules |
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 |
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 |
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 |
Module 5 : HTML Templates |
Module 6 : Advanced Web Components |
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 |
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 |
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 |