SvelteKit, a framework for building full-stack web applications using the Svelte UI component framework, has reached 1.0 status.
Unveiled December 14, the milestone release makes SvelteKit the recommended way to build all Svelte applications, the Svelte development team said. Svelte team members said Svelte makes it easier to build user interfaces than working with the DOM directly. Svelte’s approach differs from frameworks such as Vue and React in that work usually done in the browser is shifted to a compile step on the server when building an app.
SvelteKit defaults to client-side navigation after the initial server-rendered page load, enabling faster page transitions, state that persists between pages, and less data usage. SvelteKit also avoids rerunning third-party scripts like analytics on every page load. Also, developers can use one language instead of having two tightly coupled apps, one to generate HTML and one to handle client-side interaction. Because SvelteKit runs wherever JavaScript runs, developers can deploy an app as a traditional Node.js server or by using serverless functions.
To get started, developers can visit the docs and an interactive tutorial. Developers, the Svelte team said, can build apps with personalized data without performance-hindering, layout-shifting effects of fetching from the browser after page loads. SvelteKit allows a page being viewed to be prerendered while the REPL is rendered with dynamic data. Switching between the two uses a single line of code. Apps built with this approach are called transitional apps.
While the SvelteKit CLI needs Node.js installed locally, the framework itself has no dependencies on any platform. SvelteKit leverages the Vite build tool, with out-of-the-box support for hot module reloading and TypeScript. When starting a SvelteKit project, developers will be asked if they want to add TypeScript, ESLint for code analysis, Prettier for code formatting, Playwright for browser tests, and Vitest for unit tests. If an entire app is suitable for prerendering or is a single-page app, developers can use adapter-static to turn SvelteKit into a static site generator for any web server including GitHub Pages.
Looking forward, the Svelte technology roadmap includes capabilities such as incremental static generation, granular control over the deployment region and runtime, and image optimization.
Copyright © 2022 IDG Communications, Inc.
