Embed Size (px)
Citation preview
Web ComponentsThe Lego bricks of web developers
Aaron Czichon
• Aaron Czichon
• Head of Software Development
• NodeJS & Web Components
The basic
problem of HTML
elements
Building a login
form…
<!doctype html><html lang="en">
<head><meta charset="utf-8"><title>Dev Days Europe 2019</title><meta name="description" content="Example for Web Components"><meta name="author" content="Aaron Czichon"><link rel="stylesheet" href="./assets/edel-elements.css">
</head>
<body><!-- CONTENT HERE --></body>
</html>
<div class="login-card card"><div class="card-meta">
<h3>Login</h3><p>Please login first</p>
</div><div class="login-card-form">
<div class="form form--grid"><div class="form-item">
<label>Username or email</label><input placeholder="Username or email" type="text">
</div><div class="form-item">
<label>Password</label><input placeholder="Super Secret Password" type="password">
</div><div class="form-item"><button type=“submit“ class="button button--primary">Login</button></div>
</div</div>
</div>
Want using it in multiple applications?
Multiple Framework Options
Downsides• Mostly only usable inside the framework
• (Angular has export options for web components)
• Sometimes a lot of overhead which is not needed
Web Components!
„Web components are a set of web platform APIs that allow you to create
new custom, reusable, encapsulated HTML tags“Source: webcomponents.org
Custom Elements Shadow DOMHTML Imports HTML Template
Web Platform APIs
Web Component
Custom Elements Shadow DOMHTML Imports HTML Template
Web Platform APIs
Web Component
Custom Elements Shadow DOMES Modules HTML Template
Web Platform APIs
Web Component
Custom Element
Custom Element
Shadow DOM-> Shadowed rendering of DOM Nodes
Shadow DOM-> Attach shadow to existing element (shadow host)
Shadow DOM-> Create new element and attach it to the shadowed element
HTML Imports-> Importing HTMLmarkup like script files (W3C Working Draft)
HTML Imports-> Importing HTMLmarkup like script files (W3C Working Draft)
ES Module-> Using your module inside your website/application
HTML Templates-> Render templates on specific location with JS
HTML Templates-> Render templates on specific location with JS
Combine everything!-> Create Javascript component
Combine everything!-> Create Markup
Let‘s talk about browser support...
Support – HTML Templates
Support – Custom Elements
Support – Shadow DOM
Support – HTML Imports
Use Polyfills
• Add support with Polyfills
• This extends browsers with new features
• Downside: Needs more bandwith (larger websites)
• -> Webcomponents.js on Githubhttps://github.com/webcomponents/webcomponentsjs
Easier development with libraries
POLYMER 2 STENCILJS SKATEJS (WITH PREACT OR LIT-HTML)
Building the login with Web Components
How we use it for
How we use it
@edel/core Framework (Plain JS)
VueJS App
App Loaders
React/Vue/Angular/...@edel-elements (UI-
Component Library)
How we use it
@edel/core Framework (Plain JS)
Plain Loader
App Loaders
React/Vue/Angular/...@edel-elements (UI-
Component Library)
Login/Register
AppAdmin App
System
AppEdelog Classic
Edelog & Edel-Elements
• www.edelog.com
• Publishing Edelog and Edel-Elements Open Source@ End 2019
![SED472 - Animating VueJS...SED 472 Transcript [0:04:39.0] JM: I’d like to start with VueJS. Vue is a front end framework and I’ve worked with it personally, we have it on the softwaredaily.com](https://img.pdfslide.us/doc/110x75/5ec96deed9e39513f27943bd/sed472-animating-vuejs-sed-472-transcript-004390-jm-iad-like-to-start.jpg)
