Svelte and SvelteKit are a rapidly growing web development alternative for the React/Next and Vue/Nuxt ecosystems and a “must-know” technology set for web developers and data scientists with a strong focus on rapid prototyping, data visualization and efficient execution at runtime.
The biggest benefit of Svelte is its unique approach to building web interfaces — it compiles components to highly efficient imperative code at build time, rather than relying on a virtual DOM at runtime. This results in faster runtime performance and much smaller bundle sizes.
Whereas Svelte is a language, compiler and component framework, SvelteKit is an app framework (or metaframework) that solves the problems of building something production-ready including Routing, SSR, Data fetching, Service workers, Prerendering, SPAs and more.
This article shows the strength of Svelte and SvelteKit on an exemplary server-side rendered (SSR) web app including the Skeleton UI Toolkit and Chart.js for advanced charting.
This is a 100% free setup and a great starting point to learn and experiment with SvelteKit, Skeleton and Chart.js.
Our final demo app will be based on three web pages in an App Shell including a Header- and LeadSpace -component and will show two responsive, clickable cards that will hold Chart.js charting examples: