SvelteKit is my mistress

Key Takeaways

it is December 15 2022 and you're watching the code report after what felt like a lifetime of waiting spelled kit officially hit version 1.0 yesterday which is a full stack framework for the world's most loved UI Library when I tried spell for the first time over three years ago it left me extremely titillated it had an Innovative compiler elegant reactivity and we just had so much fun together as the years went on I continued working with react and angular but truth be told I would often close my eyes and pretend that they were actually spell I was web developmentally frustrated but luckily just in time for Christmas we've achieved a glorious climax that makes it possible to use felt in a server-rendered application let's take a look at some code and see if it lives up to all of these innuendos spelled kit is very similar to other JavaScript meta Frameworks Like nextjs Remix and nuxt like next js13 it uses file system routing but made a somewhat controversial decision of using reserved names to represent different types of UI like page layout loading and error in addition any file that has significance to the framework is prefixed with a plus sign there's been a lot of discussion around this approach and not everybody likes it because you end up with tons of files in the project with the exact same name which can lead to migraines if you expand all the directories in your editor on the other hand though these conventions keep your project clear and consistent page.spelt contains a component that will be server rendered when you navigate to that route after the initial page load it will hydrate and then the client-side router takes over from there this is what we call SSR and I think it's the most sensible default however in spelled kit you can mix and match other rendering strategies like you can pre-render static HTML for Jam stack style websites or if no server is required you can use client rendering to do everything in the browser or on the flip side if you don't want any JavaScript at all you can render everything on the server like a traditional multi-page application what's awesome though is that you can choose the best rendering strategy for a page with a simple configuration option you're not locked into just one rendering Paradigm that's awesome but the other big thing you'll want to know about the developer experience is how data fetching works every page.svelt file can have a matching page.js or TS file that exports a load function the return value from this function will automatically be made available in the page.spilt file via this data variable it's incredibly simple and also provides end-to-end type safety the load function can run both server side and client-side however if you want to limit it to just the server you can do that by adding server to the file name and speaking of server I love spell Kit's convention for building apis you create a server.js file then export functions named as HTTP verbs like get post patch and so on that's nice but here's where things get really cool in many applications you need to fetch data at multiple levels like you might have user data at the root than a dashboard with an order then some comments below it fetching all this data is complex and people have come up with all kinds of complex State Management libraries that try to Wrangle the complexity in spell kit you can do nested routing with layouts that can share UI with their children and also fetch data that's accessible by the children but what's special about svelte is that it has built-in stores the page store gives you access to all the data on the current page and can be subscribed to with reactive updates from anywhere in the application by putting a dollar sign in front of it angular has actually been doing stuff like this for years with its async pipe and I can tell you from experience that patterns like this eliminate tons of complexity when it comes to State Management now it's also important to know that when fetching data you can have error and loading files that represent the UI for those special States this pattern is basically identical to nextjs version 13. in addition spell kit has form actions which allow you to Define functions on the server that handle form submissions at this point pretty much every modern framework has stolen this feature from remix which itself got the idea from the way every other PHP framework has worked since the beginning of time and another piece of bonus news is that spelled kit is also getting a library very similar to next auth for user authentication Rich Harris the creator of spelled and spell kit works at versel and the team from next auth developed this Library which is awesome because that means it's getting world-class tools proven to work at the largest scale overall spelled kit is a genre defining Masterpiece if you want to penetrate deeper into this topic stay tuned for a full uncensored tutorial on Beyond fireship this has been the code report thanks for watching and I will see you in the next one