Tutorials
The role of the tutorials is to provide a platform for a more intensive scientific exchange amongst researchers interested in a particular topic and as a meeting point for the community. Tutorials complement the depth-oriented technical sessions by providing participants with broad overviews of emerging fields. A tutorial can be scheduled for 1.5 or 3 hours.
Tutorial on
A Practical Introduction to the W3C Standard "Web Components"
Instructors
|
Andreas Schmidt
Karlsruhe Institute of Technology (KIT) / University of Applied Sciences Karlsruhe
Germany
|
|
|
|
Brief Bio
Andreas Schmidt is a professor at the Department of Computer Science and Business Information Systems of the Karlsruhe University of Applied Sciences (Germany). He is lecturing in the fields of database information systems and software engineering. Additionally, he is a senior research fellow in computer science at the Institute for Automation and Applied Informatics at the Karlsruhe Institute of Technology (KIT). His research focuses on database technology, metadata management and generative programming.
|
|
Tobias Münch
Münch Ges. für IT Solutions mbH
Germany
|
|
|
|
Brief Bio
Not Available
|
|
Tizian Berger
University of Applied Sciences Karlsruhe
Germany
|
|
|
|
Brief Bio
Not Available
|
Abstract
Abstract
The W3C web standard “Web Components” contains a collection of different technologies that allow you to create reusable, user-defined HTML elements and integrate them into any web application. This allows the semantics of HTML to be extended with new, user-defined components whose semantics and visual appearance can be freely defined. This approach has a number of advantages:
- A component has a clearly defined functionality and a simple, declarative interface, which supports reuse.
- The declarative nature also allows non-programmers to develop more complex applications based on available powerful web components. For example, web components can be used to integrate existing domain-specific markup languages within HTML.
- Because web components are a W3C standard, web developers can build their own (domain-specific) libraries without running the risk of vendor lock-in, as would be the case when using a framework such as Angular, Vue, etc. Nevertheless, the components can also be used in conjunction with any frameworks, thus allowing the creation of framework-independent component libraries.
The tutorial introduces the underlying technologies such as custom elements, Shadow DOM, and templates/slots, and illustrates their practical application through a series of examples and practical exercises to be completed by the participants.
Keywords
Web development, Declarative Web, W3C composite Standard
Aims and Learning Objectives
The aim of this tutorial is to introduce the technologies underlying web components and to demonstrate step by step how to develop and use your own web components. Starting from a minimal, executable web component, functionally powerful components are developed through the use of additional technologies (Shadow DOM, slots/templates, asynchronous access to remote resources). A particular focus is on linking components with other elements or web components of the page and remote resources such as REST APIs.
The tutorial includes a series of practical exercises that participants can complete on their laptops. The exercises are designed to reinforce the theoretical concepts using practical examples. Participants will be provided with a simple Docker-based environment and code snippets from web components, which they can expand and adapt. In addition, participants will be provided with a GitHub repository containing a series of examples for specific use cases, which can serve as a starting point for further development.
Target Audience
Web developers and backend developers who are interested in declarative interfaces for the services they develop.
Prerequisite Knowledge of Audience
Participants should be familiar with Javascript and HTML. At least knowledge of an object-oriented language would be helpful.
Detailed Outline
- Introduction/Motivation
- Custom elements
- Shadow DOM
- Hands-on Part I
- Interaction with other elements of the application
- Communication with a backend service
- Templates and slots
- Hands-on Part II
- Summary & Outlook
(several short breaks as needed)