SvelteKit, a framework for building web applications based on Svelte, has been released. Svelte is a front-end, open-source JavaScript UI component framework.

As reported in The State Of JavaScript 2021, despite being very new Svelte had the highest satisfaction score among Front End Frameworks in last year's annual survey of JavaScript delevopers conducted by Sacha Greif attracting over 16,000 repsonses. 89% of developers who had used it said they would use it again compared to 84% for React, 80% for Vue and only 45% for Angular.

Svelte uses a compiler that lets developers create concise components that do minimal work in the browser. While Svelte can be used for similar purposes to other frameworks such as React and Vue, where those do most of their work in the browser, Svelte precompiles the code when the app is built. It also avoids using a virtual DOM by updating the DOM when the state of your app changes.

SvelteKit uses Vite with a Svelte plugin to provide a fast and feature-rich development experience with Hot Module Replacement (HMR), where changes to your code are reflected in the browser instantly. Vite is a frontend build tooling designed to improve the frontend development experience. It consists of a dev server that serves your source files over native ES modules, and a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

By switching to client-side navigation after the initial server-rendered page load, the developers say SvelteKit achieves faster page transitions, state that persists between pages (such as a sidebar’s scroll position), and less data usage. It also avoids re-running third party scripts like analytics on every single page load.

The developers say this approach also avoids the need to have two tightly-coupled apps (one to generate HTML, one to handle client-side interaction). Instead, because SvelteKit runs wherever JavaScript runs, you can deploy your app as a traditional Node server, or using serverless functions. The approach also opens the option of building apps with personalised or dynamic data without the need to fetch it from the browser after the page loads.

SvelteKit supports the ability to mix and match prerendered pages for performance with dynamic server-side rendering for flexibility. Developers can use client-side routing with automatic preloading. and can protect users with automatic CSRF protection and Content Security Policy configuration. Data can be loaded directly from databases, and SvelteKit offers type-safe data loading and built-in form actions that work with or without JavaScript.

SvelteKit 1.0 is available now. 

More Information

Svelte Website

Related Articles

The State Of JavaScript 2021

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info