Hey I'm Domenik from Emakina CEE and I'm here to talk to you about SvelteKit and the dawn of serverless. So lets take a look at our agenda today: I’ll first introduce myself a little bit, than I introduce Svelte and lets look also at what’s the hype about SvelteKit, why we do need serverless and then jump into some examples.
So why SvelteKit? I mean, it sounds similar to Svelte and that's because it is powered by Svelte. But the difference is the Svelte itself, it’s a component framework, but SvelteKit is the application framework that builds on top of Svelte.
So you get a lot of good things coming with SvelteKit. You get server side rendering, you can do single page applications, you have seamless navigation when you switch between pages and you have a lot of options that you can choose from. And there are five different adapters currently: you can do either one of the serverless platforms, or you can run a simple node server or you can do a static site generation. So you also get – as a great benefit – lightning fast developer experience because under the hood it uses Vite 2.O or 2.X. I think it's still on 2.O. And the advantage you get whenever you call a route, it just looks at the dependencies for that route. So you can have a thousand different routes, but when you develop, it will only compile those dependencies that you need for exactly that one route that you're currently calling and working on. So it's really, really fast. You don't have to compile ahead of time. And of course, you get code splitting for the routes and styles will also be generated for each route.
So we just take a look at a basic project structure. You have your source folder. Inside of the source folder you get a lib folder – this is where you all your shared logic and shared components live in. And the nice thing is you can reference them. It doesn't matter from where just with a $lib shortcut, so you don't need to take care of nesting and when you move something, all the nesting gets destroyed. And then you have to routes folder and it's just a file and folder based layout. You can also use Regex, you can use placeholders. So a lot of great things come packed with SvelteKit.
So how do I serverless? Why do we even need to do serverless with SvelteKit? It's pretty easy. You just select your preferred platform, you can do Begin, Cloudflare, Netlifly or Vercel or do any other of the adapters. But those four are supported by the platform itself. You auto deploy with Git as soon as you set it up and set up the the configuration. Then you enjoy your fast web app and lean back and let your client be wowed by how fast it gets.
And also built a recipe app where all the ingredients can be managed and then out of these ingredients you build recipes and it automatically calculates you the stats for that recipe. So let's take a look at the those examples that a just mentioned.
So here you can see the Hartlauer shop and on the bottom right there is this little, very small icon where you can say: okay, I want to add one of this components to the CMS preview and I want to fetch the preview data from the CMS and replace whatever is there with the preview data. So right now I added it to the preview data but the problem is, currently there is no preview data available, it’s the same data as the livedata – so nothing did change. So whenever I want to switch between preview and livedata I can just toggle this little toggle here. Oh, it does even change – there is one little space you can see at “Unsere Topkategorien” jumping around. So it takes no time, it is really, really fast.
So this is the look of the guitar tuner: I built it to look like one of my physically guitar tuners that I had. If you press the button it should tune if the microphone gets picked up – probably not because I am connected to the cable.
And this is the recipe app where you have your recipes, where you have your ingredients – those are connected to a Firebase store where you have all your data. And if you look at the orange juice for example – you have all the stuff there and whenever you click update it automatically updates.
So, thank you for listening, it was lovely to be here, the topic is #done. Thank you for your attention and have a nice day.