https://www.flickr.com/photos/lmdo/6404420503
<html>
<body>
<div class="navigation">...</div>
<div class="content">...</div>
<div class="sidebarA">...</div>
<div class="sidebarB">...</div>
</body>
</html> iFrames ?!?
CMS
<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
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,
...
)SEO
Single Page Speed
Single Technology Stack
Engagement
Smooth Page Switch
Different Technologies
<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
By Elisabeth Engel
YouTube recording: https://www.youtube.com/watch?v=7MHsPfoonqs
