Introduction to SvelteJS

There’s a lot to be said for going back to basics. Over the years, web development has evolved from simple HTML to HTML and javascript, to jQuery, and then to frameworks like Angular and React. Many of these developments have been innovative and some great ideas have come out of them, like the web-component model. But it’s fair to say things have gotten a lot more complicated too.

SvelteJS takes you right back to the beginning. It’s a framework but not in the usual sense. It doesn’t add lots of new stuff and there’s very little to learn. All it does is build your code into a series of optimized javascript instructions. Most of the work is done during compilation so that there’s very little happening in the browser at runtime. This makes for a lightning-fast application with a small footprint.

This article will focus on introducing Sveltejs through a quiz app. It will show you a picture of an animal or Boris Johnson — you’ve got to guess which is which. If you answer correctly, you get to keep the animal, and it gets added to a list at the bottom of the page. What is the point of this nonsense, I hear you ask? Well, there is none. Just like there’s no point to my depressing existence.

Creating Your Project

Make sure you have node and npm, then run:

npm i npx

NPX is a tool that lets you directly execute npm package binaries without downloading them. Once that’s complete, run: