Svelte, consistently voted in the last few years as the Web framework with the highest retention among the top 4 frameworks (next to React, Angular, and Vue), furthers enterprise readiness with SvelteKit's general availability, a new interactive tutorial, and the Svelte 4 roadmap.
The first major iteration of SvelteKit, an application framework based on top of the Svelte UI framework, was recently released after two years of development. While SvelteKit replicates many features of other JavaScript application frameworks (e.g., Next.js, Remix), Astro), SvelteKit differs in that it defaults to client-side navigation after the initial server-rendered page load. The release note explains:
This enables 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.
With SvelteKit, developers can select a rendering strategy (e.g., pre-rendering, server-side rendering) at the page level:
In a SvelteKit app, you can make these choices with as much granularity as you need — for example the [release note] page […] is prerendered, but the REPL is rendered with dynamic data. Switching between the two is a single line of code. We call apps built with this approach ‘transitional apps’.
SvelteKit applications can be deployed to any JavaScript runtime for which an adapter exists. SvelteKit ships with a default adapter (adapter-auto) that allows deploying to Vercel, Netlify, Cloudflare Pages, and Azure Static Web Apps. The default adapter automatically chooses the SvelteKit adapter for the current environment, if possible. Applications can also be deployed to a Node server with adapter-node. Additional adapters maintained by the open-source community include support for Deno, Bun, Firebase, App Engine, AWS Lambda, and others.
The Svelte UI framework (targeting single-page applications) on which SvelteKit is based has seen growing awareness and adoption in the last few years. Enterprise readiness however implies addressing a range of enterprise requirements: security, stable and proven toolset, deployment options, change management (e.g., migration, updates), full conformance to standards (e.g., web components), accessibility, internationalization, performance optimization, data visualization capabilities, documentation, and support.
The Svelte and SvelteKit roadmap may further address many of the aforementioned requirements. The SvelteKit roadmap includes built-in internationalization support, granular control over deployment region and runtime, incremental static regeneration, image optimization, and more. The Svelte 4 roadmap includes modernizing Svelte’s toolset and improving the interoperability of custom elements with Svelte components. Svelte 5 may include a revamped Svelte compiler and error boundaries.
Developers can learn both Svelte and SvelteKit with an online tutorial that leads learners through exercises to solve in an interactive code playground. The playground leverages the WebContainers API recently released for public use by StackBlitz. WebContainers are a micro-operating system based on WebAssembly designed to allow spinning up Node.js servers locally inside a browser tab. The WebContainers API is used by the StackBlitz classic editor, the Codeflow IDE, and Web Publisher. MacOS developers using Safari 16.4 and above should be able to do the tutorials from their iPhones and iPads.
Svelte as of today includes 19 accessibility warnings (e.g., a11y-aria-attributes, a11y-hidden, a11y-unknown-role, a11y-mouse-events-have-key-events) at compile time.
Rich Harris, the creator of Svelte and former graphics editor at the New York Times and the Guardian, extensively used Svelte’s built-in support for animation, motion, and transitions to add interactive data-rich visualizations to published articles.
Newsrooms present a particularly challenging environment as they often require highly customized and interactive graphics under strict deadlines. Harris explained the newsroom constraints as follows:
I’ve used [Svelte] a number of times to build things at the New York Times and the people have built things with it too. And so, yeah, it’s very much informed by the demands of building high-performance interactive applications on a very tight deadline.
[…] When Notre Dame burnt down […], my colleagues turned around this interactive scroll-driven webGL 3D reconstruction of how the fire spread through the cathedral in less than 24 hours, which was absolutely mind-blowing.
Developers interested in data visualization can compare the same visualization using the D3 visualization library only, Svelte and D3, and React and D3. Amelia Wattenberger has made available online complete examples of interactive graphics with Svelte and D3.
Svelte, like many other UI frameworks (with the notable exception of React), fully supports web components. The team however plans to overhaul its support of web components to better integrate custom elements and Svelte components, and by so doing fix a number of outstanding issues.
While SvelteKit is new, it has already been used in production for some time. The 1.0 release signals API stability. Developers can follow Svelte 4’s development in the corresponding GitHub branch. Svelte’s blog is regularly updated with the latest developed features (e.g., Streaming, snapshots, and other new features since SvelteKit 1.0, What’s new in Svelte: March 2023).
Svelte is open-source software available under the MIT license. Contributions are welcome under the Svelte contribution guidelines.