I-As.Dev

Codevolution

SvelteKit is a framework for building high-performance web apps using Svelte. Whereas Svelte is a component framework, SvelteKit is an app framework. And it is this line, which I want to break down further, to help you understand what exactly is SvelteKit. Now if you think about building applications with just Svelte, it's not quite possible to build a full feature rich application ready to be deployed for production. Svelte is a component framework for building user interfaces. It is responsible for only the view layer of an application and you as the developer have to make decisions on other features of the app. For example, how would you implement routing, server side rendering, authentication etc. Sveltekit on the other hand is an app framework. It is a package that uses Svelte for building user interfaces, but it also comes loaded with a lot more features that enables you to build full fledged production ready applications. Features exactly like routing, server side rendering, authentication, bundle optimization etc. There's no need to install additional packages. Sveltekit provides everthing for you. You do have to keep in mind though that SvelteKit, living true to the name of being a app framework, does have opinions and conventions which need to be followed to implement the above said features. However, we don't have to worry much about that as they are conventions that are easy to follow. So to re-iterate, SvelteKit is a framework for building high-performance web apps using Svelte. Alright now that we know what SvelteKit is, lets see why you might want to learn it. The why again stems from the fact that SvelteKit simplifies the process of building a web application for production. Let me list down some of the noteworthy features which you would probably want in a web application that SvelteKit provides out of the box. The first one is File based routing. When building a SvelteKit app, you don't need a third party routing package. SvelteKit provides what is known as file based routing to simplifiy this task. The second feature is prerendering. This means that Sveltekit generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO which is something we all want. The third feature is API routes. And this might be a surprise to most of you. But let me tell you that you can create APIs with SvelteKit. So SvelteKit is really a fullstack framework if you think about it. You can write the UI code as well as APIs that can be called by the UI. SvelteKit also simplifie data fetching and sharing data through the component tree. We will learn how as we progress the series. SvelteKit provides a well optimized production build system so that you can focus more on the code and less on the configuration. There's a lot more to this list and it is a culmination of all these features which makes SvelteKit an amazing framework to work with.