Slide 1
Slide 1 text
Structured content and JS Components
@stefanjudis
A match made in heaven
Slide 2
Slide 2 text
Stefan Judis
Frontend Developer, Occasional Teacher, Meetup Organizer
❤ Open Source, Performance and Accessibility ❤
@stefanjudis
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
In ❤ with
Web Technology
for seven years
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Brad Frost
Slide 7
Slide 7 text
Atomic Design
Slide 8
Slide 8 text
Atoms
Slide 9
Slide 9 text
Atoms
Slide 10
Slide 10 text
Molecules
Slide 11
Slide 11 text
Molecules
Slide 12
Slide 12 text
Organisms
Slide 13
Slide 13 text
Organisms
Slide 14
Slide 14 text
Templates
Slide 15
Slide 15 text
Templates
Slide 16
Slide 16 text
Building blocks
in CSS
Slide 17
Slide 17 text
Frontend Engineers
needed more
Slide 18
Slide 18 text
Component-driven JavaScript Frameworks
Slide 19
Slide 19 text
Component-driven JavaScript Frameworks
...
Slide 20
Slide 20 text
Component-driven JavaScript Frameworks
Slide 21
Slide 21 text
Component-driven JavaScript Frameworks
Virtual DOM implementation
Slide 22
Slide 22 text
vdom
What is this virtual DOM?
Slide 23
Slide 23 text
- Virtual DOM in a nutshell -
/** @jsx h */
const meetup = (
);
CTF Meetup
Hello! "
Slide 24
Slide 24 text
- Virtual DOM in a nutshell -
/** @jsx h */
const meetup = (
);
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
CTF Meetup
Hello! "
Slide 25
Slide 25 text
- Virtual DOM in a nutshell -
/** @jsx h */
const meetup = (
);
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
CTF Meetup
Hello! "
Slide 26
Slide 26 text
- Virtual DOM in a nutshell -
/** @jsx h */
const meetup = (
);
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
NodeName
NodeName
NodeName
CTF Meetup
Hello! "
Slide 27
Slide 27 text
- Virtual DOM in a nutshell -
/** @jsx h */
const meetup = (
);
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
NodeName
NodeName
NodeName
Attributes
Attributes
Attributes
CTF Meetup
Hello! "
Slide 28
Slide 28 text
- Virtual DOM in a nutshell -
/** @jsx h */
const meetup = (
);
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
NodeName
NodeName
NodeName
Attributes
Attributes
Attributes
Children
Children
Children
Children
CTF Meetup
Hello! "
Slide 29
Slide 29 text
export function h(nodeName, attributes) {
let children=EMPTY_CHILDREN, lastSimple, child, simple, i;
for (i=arguments.length; i-- > 2; ) {
stack.push(arguments[i]);
}
if (attributes && attributes.children!=null) {
if (!stack.length) stack.push(attributes.children);
delete attributes.children;
}
while (stack.length) {
if ((child = stack.pop()) && child.pop!==undefined) {
for (i=child.length; i--; ) stack.push(child[i]);
}
else {
if (typeof child==='boolean') child = null;
if ((simple = typeof nodeName!=='function')) {
if (child==null) child = '';
- Virtual DOM in a nutshell -
github.com/developit/preact/blob/master/src/h.js
Slide 30
Slide 30 text
children = [child];
}
else {
children.push(child);
}
lastSimple = simple;
}
}
let p = new VNode();
p.nodeName = nodeName;
p.children = children;
p.attributes = attributes==null ? undefined : attributes;
p.key = attributes==null ? undefined : attributes.key;
// if a "vnode hook" is defined, pass every created VNode to it
if (options.vnode!==undefined) options.vnode(p);
return p;
}
- Virtual DOM in a nutshell -
github.com/developit/preact/blob/master/src/h.js
Slide 31
Slide 31 text
children = [child];
}
else {
children.push(child);
}
lastSimple = simple;
}
}
let p = new VNode();
p.nodeName = nodeName;
p.children = children;
p.attributes = attributes==null ? undefined : attributes;
p.key = attributes==null ? undefined : attributes.key;
// if a "vnode hook" is defined, pass every created VNode to it
if (options.vnode!==undefined) options.vnode(p);
return p;
}
- Virtual DOM in a nutshell -
github.com/developit/preact/blob/master/src/h.js
Slide 32
Slide 32 text
- Virtual DOM in a nutshell -
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
Slide 33
Slide 33 text
- Virtual DOM in a nutshell -
const meetup = h(
"div",
null,
h(
"h1",
{ id: "headline" },
"CTF Meetup"
),
h(
"p",
null,
"Hello! ""
)
);
{
"nodeName": "div",
"children": [
{
"nodeName": "h1",
"children": [
"CTF Meetup"
],
"attributes": {
"id": "headline"
}
},
{
"nodeName": "p",
"children": [
"Hello! ""
]
}
]
}
Slide 34
Slide 34 text
- Virtual DOM in a nutshell -
function render(vnode) {
// Strings just convert to #text Nodes:
if (vnode.split) return document.createTextNode(vnode);
// create a DOM element with the nodeName of our VDOM element:
let n = document.createElement(vnode.nodeName);
// copy attributes onto the new node:
let a = vnode.attributes || {};
Object.keys(a).forEach( k => n.setAttribute(k, a[k]) );
// render (build) and then append child nodes:
(vnode.children || []).forEach( c => n.appendChild(render(c)) );
return n;
}
Slide 35
Slide 35 text
It's "just" data!
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
{
"nodeName": "Page",
"children": [
{
"nodeName": "h1",
"children": [
"Landing Page"
]
},
{
"nodeName": "header",
"children": [{
"nodeName": "HeroImage",
...
}]
},
{
"nodeName": "main",
"children": [{
"nodeName": "Article",
...
}]
},
...
]
}
Slide 38
Slide 38 text
WTF is JSX
The benefit of virtual DOM is that it is
extremely lightweight.
Small objects referring to other small objects,
a structure composed by easily optimizable
application logic.
This also means it is not tied
to any rendering logic or slow DOM methods.
“
Slide 39
Slide 39 text
The benefit of virtual DOM is that it is
extremely lightweight.
Small objects referring to other small objects,
a structure composed by easily optimizable
application logic.
This also means it is not tied
to any rendering logic or slow DOM methods.
“
WTF is JSX
Slide 40
Slide 40 text
It's "just" data!
This got me thinking...
Slide 41
Slide 41 text
What if we could connect
content types and components?
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
{
"sys": {
"contentType": {
"sys": {
"id": "page"
}
}
},
"fields": {
"title": "Landing Page",
"header": [
{
"sys": {
"contentType": {
"sys": {
"id": "heroImage"
}
}
}
}
]
},
...
}
Slide 48
Slide 48 text
{
"sys": {
"contentType": {
"sys": {
"id": "page"
}
}
},
"fields": {
"title": "Landing Page",
"header": [
{
"sys": {
"contentType": {
"sys": {
"id": "heroImage"
}
}
}
}
]
},
...
}
?
Contentful response vDOM
{
"nodeName": "Page",
"children": [
{
"nodeName": "h1",
"children": [
"Landing Page"
]
},
{
"nodeName": "header",
"children": [{
"nodeName": "HeroImage",
...
}]
},
{
"nodeName": "main",
"children": [{
"nodeName": "Article",
...
}]
},
...
]
}
Slide 49
Slide 49 text
{
"sys": {
"contentType": {
"sys": {
"id": "page"
}
}
},
"fields": {
"title": "Landing Page",
"header": [
{
"sys": {
"contentType": {
"sys": {
"id": "heroImage"
}
}
}
}
]
},
...
}
?
Contentful response vDOM
{
"nodeName": "Page",
"children": [
{
"nodeName": "h1",
"children": [
"Landing Page"
]
},
{
"nodeName": "header",
"children": [{
"nodeName": "HeroImage",
...
}]
},
{
"nodeName": "main",
"children": [{
"nodeName": "Article",
...
}]
},
...
]
}
Slide 50
Slide 50 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': '1PYzQGJdgEG2Ycqweqqmk0'
}).then(response => {
this.setState({ page: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
)
}
);
}
}
- Glue Components and Content Types together -
routes/home/index.js
Slide 51
Slide 51 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': '1PYzQGJdgEG2Ycqweqqmk0'
}).then(response => {
this.setState({ page: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
)
}
);
}
}
- Glue Components and Content Types together -
routes/home/index.js
Slide 52
Slide 52 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': '1PYzQGJdgEG2Ycqweqqmk0'
}).then(response => {
this.setState({ page: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
)
}
);
}
}
- Glue Components and Content Types together -
routes/home/index.js
Slide 53
Slide 53 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': '1PYzQGJdgEG2Ycqweqqmk0'
}).then(response => {
this.setState({ page: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
)
}
);
}
}
- Glue Components and Content Types together -
routes/home/index.js
Slide 54
Slide 54 text
export default function CtfModule({ children, ...props }) {
if (!props.entry) {
return '';
}
const entries = props.entry instanceof Array ? props.entry : [ props.entry ];
return h(
'div', { class: 'ctf-modules' }, [
entries.map(
entry => h(
ContentfulComponents[getComponentName(entry.sys.contentType.sys.id)],
{ fields: entry.fields }
)
)
]
);
}
- Glue Components and Content Types together -
components/contentful-module/index.js
Slide 55
Slide 55 text
export default function CtfModule({ children, ...props }) {
if (!props.entry) {
return '';
}
const entries = props.entry instanceof Array ? props.entry : [ props.entry ];
return h(
'div', { class: 'ctf-modules' }, [
entries.map(
entry => h(
ContentfulComponents[getComponentName(entry.sys.contentType.sys.id)],
{ fields: entry.fields }
)
)
]
);
}
- Glue Components and Content Types together -
components/contentful-module/index.js
Slide 56
Slide 56 text
export default function CtfModule({ children, ...props }) {
if (!props.entry) {
return '';
}
const entries = props.entry instanceof Array ? props.entry : [ props.entry ];
return h(
'div', { class: 'ctf-modules' }, [
entries.map(
entry => h(
ContentfulComponents[getComponentName(entry.sys.contentType.sys.id)],
{ fields: entry.fields }
)
)
]
);
}
- Glue Components and Content Types together -
components/contentful-module/index.js
Slide 57
Slide 57 text
export default function CtfModule({ children, ...props }) {
if (!props.entry) {
return '';
}
const entries = props.entry instanceof Array ? props.entry : [ props.entry ];
return h(
'div', { class: 'ctf-modules' }, [
entries.map(
entry => h(
ContentfulComponents[getComponentName(entry.sys.contentType.sys.id)],
{ fields: entry.fields }
)
)
]
);
}
- Glue Components and Content Types together -
components/contentful-module/index.js
Slide 58
Slide 58 text
export default function CtfModule({ children, ...props }) {
if (!props.entry) {
return '';
}
const entries = props.entry instanceof Array ? props.entry : [ props.entry ];
return h(
'div', { class: 'ctf-modules' }, [
entries.map(
entry => h(
ContentfulComponents[getComponentName(entry.sys.contentType.sys.id)],
{ fields: entry.fields }
)
)
]
);
}
- Glue Components and Content Types together -
components/contentful-module/index.js
entry => h(
HeroImage,
{ fields: entry.fields }
)
entry => h(
Article,
{ fields: entry.fields }
)
entry => h(
Person,
{ fields: entry.fields }
)
content type dependent components
Slide 59
Slide 59 text
export default function Page({ children, ...props }) {
return (
{ props.fields.header && (
Header Area
)}
{ props.fields.main && (
Main Area
)}
{ props.fields.header && (
Footer Area
)}
);
}
- Glue Components and Content Types together -
components/page/index.js
Slide 60
Slide 60 text
export default function Page({ children, ...props }) {
return (
{ props.fields.header && (
Header Area
)}
{ props.fields.main && (
Main Area
)}
{ props.fields.header && (
Footer Area
)}
);
}
- Glue Components and Content Types together -
components/page/index.js
Slide 61
Slide 61 text
export default function Page({ children, ...props }) {
return (
{ props.fields.header && (
Header Area
)}
{ props.fields.main && (
Main Area
)}
{ props.fields.header && (
Footer Area
)}
);
}
- Glue Components and Content Types together -
components/page/index.js
Slide 62
Slide 62 text
- Glue Components and Content Types together -
components/hero-image/index.js components/article/index.js components/person/index.js
export default function HeroImage({ children, ...props }) {
return (
);
}
export default function Article({ children, ...props }) {
return (
);
}
HeroImage
Article
Person
{props.fields.headline}
);
}
export default function Article({ children, ...props }) {
return (
{props.fields.title}
{props.fields.main} ); } export default function Person({ children, ...props }) { return ({props.fields.name}
);
}
HeroImage
Article
Person
Slide 63
Slide 63 text
Header
Page
Main
Footer
Article
HeroImage
Person
Slide 64
Slide 64 text
Header
Page
Main
Person
Footer
Article
HeroImage
Person
Slide 65
Slide 65 text
Header
Person
Page
Main
Footer
Article
HeroImage
Person
Slide 66
Slide 66 text
Header
Page
Main
Footer
HeroImage
Person
Slide 67
Slide 67 text
Previewing content
can be hard...
Slide 68
Slide 68 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': '1PYzQGJdgEG2Ycqweqqmk0'
}).then(response => {
this.setState({ page: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
)
}
);
}
}
- Glue Components and Content Types together -
routes/home/index.js
Slide 69
Slide 69 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': this.props.matches.id
}).then(response => {
this.setState({ entry: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
Component preview
) } ); } } - Glue Components and Content Types together - routes/preview/index.jsSlide 70
Slide 70 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': this.props.matches.id
}).then(response => {
this.setState({ entry: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
Component preview
) } ); } } CtfModule renders the particular components automatically. - Glue Components and Content Types together - routes/preview/index.jsSlide 71
Slide 71 text
export default class Home extends Component {
componentWillMount() {
createClient({
space: '...',
accessToken: '...'
}).getEntries({
'sys.id': this.props.matches.id
}).then(response => {
this.setState({ entry: response.items[0] });
});
}
render(props, state) {
return (
{
state.page && (
Component preview
) } ); } } CtfModule renders the particular components automatically. - Glue Components and Content Types together - routes/preview/index.js The components render data automatically.Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
It's "just" data!
This got me thinking...
Slide 75
Slide 75 text
- New workflows? -
Slide 76
Slide 76 text
- New workflows? -
"Contentful UI components"?
Slide 77
Slide 77 text
- New workflows? -
Slide 78
Slide 78 text
- New workflows? -
Slide 79
Slide 79 text
- New workflows? -
Slide 80
Slide 80 text
So far it's just an idea in my head...
Slide 81
Slide 81 text
Structured Data JS Components
Slide 82
Slide 82 text
Thanks.
@stefanjudis
Slides
ctfl.io/js-components