<html>
<body>
<div class="navigation">...</div>
<div class="content">...</div>
<div class="sidebarA">...</div>
<div class="sidebarB">...</div>
</body>
</html> iFrames ?!?
CMS
Seiten Template
<html>
<body>
<!--#include virtual="/navigation" -->
<!--#include virtual="/content" -->
<!--#include virtual="/sidebar?version=A" -->
<!--#include virtual="/sidebar?version=B" -->
</body>
</html> https://unsplash.com/photos/kvv5bm1dgc8
Lazy
Loading
Web Components
<html>
<body>
<navigation></navigation>
<content></content>
<sidebar version="A"></sidebar>
<sidebar version="B"></sidebar>
</body>
</html>
class NewHTMLElement extends HTMLElement {
createdCallback() {...}
attachedCallback() {...}
attributeChangedCallback(attr, oldVal, newVal) {...}
detachedCallback() {...}
}
document.registerElement('new-tag', NewHTMLElement);
class ContentElement extends HTMLElement {
createdCallback() {
this.addInputField();
this.addSubmitButton();
this.listenToSubmit();
}
...
}
document.registerElement('content', ContentElement); <html>
<body>
<navigation></navigation>
<content></content>
<sidebar version="A"></sidebar>
<sidebar version="B"></sidebar>
</body>
</html>Submit
https://unsplash.com/photos/TdM_fhzmWog
const routeEntries = [
{
name: 'home',
path: 'xy.com/home'
},
{
name: 'content',
path: 'xy.com/content'
},
{
name: 'settings',
path: 'xy.com/settings'
}
}{
"name": "Content",
"version": "1.0.1",
"content": {
"js": [
"/js/bundle.min.js"
],
"css": [
"/css/style.min.css"
]
}
}
window.xy.content.init(
applicationUrl,
path,
dependencies,
...
)MB
CPU
Produktivität
font-family: 'League Spartan', sans-serif;
color: #28A2FF;
font-size: 4rem;
...font-family: 'Lato', sans-serif;
background-color: #FF793F;
font-weight: 600;
...addEventListener(
'click', openDialog);addEventListener(
'mouseenter', showTooltip);
addEventListener(
'mouseleave', removeTooltip);
By Elisabeth Engel
German Version - 2018
