web components - devdays conference€¦ · the lego bricks of web developers aaron czichon ......
TRANSCRIPT
![Page 1: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/1.jpg)
Web ComponentsThe Lego bricks of web developers
Aaron Czichon
![Page 2: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/2.jpg)
• Aaron Czichon
• Head of Software Development
• NodeJS & Web Components
![Page 3: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/3.jpg)
The basic
problem of HTML
elements
![Page 4: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/4.jpg)
Building a login
form…
![Page 5: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/5.jpg)
<!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>
![Page 6: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/6.jpg)
<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>
![Page 7: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/7.jpg)
Want using it in multiple applications?
![Page 8: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/8.jpg)
Multiple Framework Options
![Page 9: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/9.jpg)
Downsides• Mostly only usable inside the framework
• (Angular has export options for web components)
• Sometimes a lot of overhead which is not needed
![Page 10: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/10.jpg)
Web Components!
![Page 11: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/11.jpg)
„Web components are a set of web platform APIs that allow you to create
new custom, reusable, encapsulated HTML tags“Source: webcomponents.org
![Page 12: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/12.jpg)
Custom Elements Shadow DOMHTML Imports HTML Template
Web Platform APIs
Web Component
![Page 13: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/13.jpg)
Custom Elements Shadow DOMHTML Imports HTML Template
Web Platform APIs
Web Component
![Page 14: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/14.jpg)
Custom Elements Shadow DOMES Modules HTML Template
Web Platform APIs
Web Component
![Page 15: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/15.jpg)
Custom Element
![Page 16: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/16.jpg)
Custom Element
![Page 17: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/17.jpg)
Shadow DOM-> Shadowed rendering of DOM Nodes
![Page 18: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/18.jpg)
Shadow DOM-> Attach shadow to existing element (shadow host)
![Page 19: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/19.jpg)
Shadow DOM-> Create new element and attach it to the shadowed element
![Page 20: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/20.jpg)
HTML Imports-> Importing HTMLmarkup like script files (W3C Working Draft)
![Page 21: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/21.jpg)
HTML Imports-> Importing HTMLmarkup like script files (W3C Working Draft)
![Page 22: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/22.jpg)
ES Module-> Using your module inside your website/application
![Page 23: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/23.jpg)
HTML Templates-> Render templates on specific location with JS
![Page 24: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/24.jpg)
HTML Templates-> Render templates on specific location with JS
![Page 25: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/25.jpg)
Combine everything!-> Create Javascript component
![Page 26: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/26.jpg)
Combine everything!-> Create Markup
![Page 27: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/27.jpg)
Let‘s talk about browser support...
![Page 28: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/28.jpg)
Support – HTML Templates
![Page 29: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/29.jpg)
Support – Custom Elements
![Page 30: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/30.jpg)
Support – Shadow DOM
![Page 31: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/31.jpg)
Support – HTML Imports
![Page 32: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/32.jpg)
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
![Page 33: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/33.jpg)
Easier development with libraries
POLYMER 2 STENCILJS SKATEJS (WITH PREACT OR LIT-HTML)
![Page 34: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/34.jpg)
![Page 35: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/35.jpg)
Building the login with Web Components
![Page 36: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/36.jpg)
How we use it for
![Page 37: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/37.jpg)
How we use it
@edel/core Framework (Plain JS)
VueJS App
App Loaders
React/Vue/Angular/...@edel-elements (UI-
Component Library)
![Page 38: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/38.jpg)
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
![Page 39: Web Components - DevDays Conference€¦ · The Lego bricks of web developers Aaron Czichon ... (Angular has export options for web components) ... (Plain JS) VueJS App App Loaders](https://reader034.vdocument.in/reader034/viewer/2022050218/5f63b586af9f0a4dce3b87a5/html5/thumbnails/39.jpg)
Edelog & Edel-Elements
• www.edelog.com
• Publishing Edelog and Edel-Elements Open Source@ End 2019