I’ve been hooked on SvelteJS recently. This one-man-army of a JavaScript framework is as attractive and active as it is reactive. In this article, I’d love to introduce you to a few basic features of the framework. In 26 lines of code, I will cover some interesting SvelteJS features: reactive declarations, asynchronous API fetches with promises, as well as a few neat Svelte shorthands.
The code that I am about to show you is one that allows users to fetch open-source photos from an external API by entering a search query into a regular old input field. The API that we are fetching the image from is an open API by Unsplash — a free resource for open-source images.
Let me start by showing you my code:
<script>
let searchTerm = '';
let promise;
let src = '';
$: if (searchTerm != '') {
promise = getPhoto();
}
async function getPhoto() {
let thisSearchTerm = searchTerm;
const res = await fetch(`https://source.unsplash.com/featured/1600x900/?${searchTerm}`);
let photoUrl = res.url;
if (res.ok && thisSearchTerm == searchTerm) {
src = photoUrl;
}
}
</script>
<input type="text" placeholder="dog, car, house" bind:value={searchTerm} />
<img {src} alt="An image generated by searching for {searchTerm}." class:invisible={!src} />
{#await promise}
<div class="loading"><img src="/loading.gif" alt="Loading..."></div>
{/await}
#javascript #web-development #svelte