Today, I implemented the #async / #await pattern (as known from #csharp and meanwhile quite some other languages) ...
... in good old #C! 
Well, at least sort of.
* It requires some standard library support, namely #POSIX user context switching with #getcontext and friends, which was deprecated in POSIX-1.2008. But it's still available on many systems, including #FreeBSD, #NetBSD, #Linux (with #glibc). It's NOT available e.g. on #OpenBSD, or Linux with some alternative libc.
* I can't do anything about the basic language syntax, so some boilerplate comes with using it.
* It has some overhead (room for extra stacks, even extra syscalls as getcontext unfortunately also always saves/restores the signal mask)
But then ... async/await in C! 
Here are the docs:
https://zirias.github.io/poser/api/latest/class_p_s_c___async_task.html
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
Learn how from Max Fomichev at the Dutch PHP Conference. 
