Tech Talk: "SvelteKit and the dawn of serverless" mit Domenik Reitzner von Emakina CEE

Tech Talk: "SvelteKit and the dawn of serverless" mit Domenik Reitzner von Emakina CEE

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 first off, who am I? First of all I am a husband of 3, soon to be 4. I am Devlead at emakina CEE. I have a background in robotics. I’m a web-hobbyist turned professional and I am a performance junky. So to give you an example of what that means to me: one of my projects that I’m currently working at is the Billa Onlineshop. And I reduced the JavaScript on load by 50%. I would say that’s a pretty good job, performance-wise.

So lets jump right in: what is Svelte an why is it something that you need? Svelte is a component framework, so it's similar to React, Angular and Vue - but there's a slight difference: It is a compiler, so the component framework does most of its work in compile time and not in the browser. So that's why it doesn't need the virtual DOM and it's truly reactive. So when one value changes it surgically updates the DOM to represent that state, so there's no diffing algorithm that's going on and slows down your site. One of the themes that you find when you try Svelte is that you write less code. What that means for you is that you decrease your bugs because the bugs increase with code linearly. It doesn't depend on the language, it doesn't depend on how experienced you are – I mean a little bit maybe – but it's linear. So when you write less code, you write less bugs. And one great advantage of using Svelte is you have a huge ecosystem, it's all of JavaScript land, you can use pretty much any JavaScript library inside of Svelte with minimal configuration because it's very, very close to standard HTML, standard CSS and standard script.

So let's take a look on what it looks like. So we see here Easy Components Syntax. You have your script at the top, you have your normal HTML in the middle and you have your styles at the bottom. So I want to point out for example, the export let name, it's how you export props. So it's really intuitive, you know the export syntax from JavaScript already and you can pass in props. If you want to have a fallback in this case, devjobs, you can do that and it will be overwritten if you pass name into props. The line below, you have a reactive statement. It's what will automatically trigger the DOM to be surgically updated and this expression runs every time one of its dependencies change, so whenever name changes, the special name will automatically update. So it's like the spreadsheet syntax some would say. One of the advantages also comes with svelte is you have stores, you have animations, you have two way binding and you have scoped styles all baked into the framework because it's a compiler. It doesn't matter how huge the framework itself gets, because whatever you will not use in your code will be thrown away at compile time. So you do not ship it to the client, which makes your site really, really fast. I also want to mention that Svelte also works well with TypeScript and Sass and PostCSS – so there are a lot of preprocessing plugins already available.

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.

So let's look at some examples that I prepared. So SvelteKit originally stems from a requirement that was needed by the New York Times Corona tracking app because one of the masterminds behind Svelte and SvelteKit Rich Harris, he works at The New York Times. And they kind of needed something bigger. They needed a full blown application framework. So that's how it got started. Another thing that I built for one of our clients at our company is the Hartlauer Shop CMS preview. Because Svelte is so lightweight, it's easy to build on top of an existing full blown website and just have that little surgical update of the DOM happening in the background. Also, one of the projects that we did was the Hartlauer advent calendar. I'm sorry that I can't show you that today - you'll have to wait for December for it to take a look at. I also built up a guitar tuner where I played around with a library that enables us in JavaScript and in the browser to have multitasking, so I kind of did the processing on its own thread, which was really nice to play around with and try out. And as a musician, I also could use it in my daily routine.

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.

 

Technologien in diesem Artikel