Paul Krill
Editor at Large

SvelteKit 1.0 brings a full stack to Svelte

news
Dec 16, 20222 mins

Milestone release makes SvelteKit the recommended way to build all Svelte applications, the Svelte team said.

colors paper stacks lines rainbow
Credit: Sarabbit

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.

Paul Krill

Paul Krill is editor at large at InfoWorld. Paul has been covering computer technology as a news and feature reporter for more than 35 years, including 30 years at InfoWorld. He has specialized in coverage of software development tools and technologies since the 1990s, and he continues to lead InfoWorld’s news coverage of software development platforms including Java and .NET and programming languages including JavaScript, TypeScript, PHP, Python, Ruby, Rust, and Go. Long trusted as a reporter who prioritizes accuracy, integrity, and the best interests of readers, Paul is sought out by technology companies and industry organizations who want to reach InfoWorld’s audience of software developers and other information technology professionals. Paul has won a “Best Technology News Coverage” award from IDG.

More from this author