SvelteKitart 1

Compiled Web Apps

You're probably familiar with Svelte by now. Svelte is in a heated battle with Next/React. React hit the ground running by correcting a faux pas of only presenting SEO web crawler with a div-tag with a new App function sitting in it. The web site done this way is dark. Next.js corrected this with client-side routing and server-side rendering presenting the crawler with a look at what makes up the web site.

Svelte's claim to fame was code that is run through a compiler at build time so the client-side code runs super fast and presents the whole code to a crawler. What the kit does is along the lines of what Next.js did and that's use a file structure that when honored configures the whole web app without having to generate a mess of redundant code that is common to most web designs. If you put your code into a page directory, you get auto-routing at the URL box. Each file with a suffix of .svelte gets you a fully functional functioning template of the page with javascript/HTML/styling all on the same page. You can still have global styles and any customization. Like Next.js, you can create a layout page to hold all the common element of all pages like navbars, etc.

All these Node.js based frameworks have complex configuration file because JavaScript as a language is spread out over several versions. SvelteKit is no exception but the option are while explained and comprehensive like turning on TrueScript, SaSS, static build outputs, service-workers, and various adaptors to configure build outputs of various kinds. In the end, the fact that it's compiled code means it's very fast.

Svelte's server-side rendering turn you app into a single-page app. There are modules you can call to set up database calls and state control that's available to all parts of the app. These same things can be done in a React based app, but it's much more complex through a nest of Hooks and support library calls. Svelte's direct comprehensive code syntax makes these common jobs code easily. The prefetch and configurable rendering for both browser or server really tucks away all the tedious coding so familiar to React programming - ugh.

Here's where to go to get started: kit.svelte.dev SvelteKit is in beta right now so the other shoe hasn't fallen yet... but soon. I hope they just commit to a Svelte 2.0 and bundle the technology into the mothership. Later.