Mastering SvelteKit with Geoff Rich | JS Drops

Level up your front-end development skills with an informative SvelteKit Training by Geoff Rich, a prominent Svelte and SvelteKit maintainer. Discover the power and efficiency of SvelteKit, a component-based UI framework that leverages a compile step for smaller and faster applications, similar to React and Vue. In the training, you'll explore routing, data loading, build optimization, form handling, server rendering, and more, while building the "Sveltunes" music browsing app to witness SvelteKit's capabilities firsthand. With seamless integration into the Vite ecosystem, expect instant refreshes, fast startups, and quick build times for a fantastic development experience.
In the form handling section of the training, Geoff introduces form actions, enabling smooth form submissions and enhancing user experience, even in scenarios where JavaScript may not be available. Learn how to use the "redirect" form action for seamless user interactions and the "use:enhance" attribute to prevent full page reloads when JavaScript is available, ensuring smoother performance.
The session management and login functionality are next on the agenda. Geoff explains how to manage session data and set user IDs in cookies using SvelteKit's hooks concept. Although it’s for demonstration purposes only and not for secure authentication, this functionality allows for conditional display of components based on the user's login state.
To enhance user experience further, Geoff demonstrates optimistic UI updates, instantly reflecting favorited albums without waiting for the server's response. Through the use of the "use:enhance" attribute and a custom function, users enjoy seamless interactions.
While the session couldn't cover all features due to time limitations, Geoff encourages attendees to explore the comprehensive SvelteKit documentation and tutorials, providing in-depth information on deployment, error handling, routing options, navigation, and data loading utilities.
The section concludes with a summary of the music app's achieved features, including server rendering, speedy client-side navigation with data prefetching, login functionality, and album favoriting with optimistic UI updates. Participants are invited to explore the GitHub repository and Jeff Rich's website for additional insights and articles. Don't miss out on this transformative training experience!

[@justmrmendez]

Great content, svelte/kit should be the way to build the modern way

[@attentiondeficitdisorder]

Literally covered all the main points without making it confusing. Great stuff.

[@ThisDotMedia]

Glad to hear it!

[@rumble1925]

Sveltekit is an awesome way to build web apps, the only big pain point so far is the route naming convention when the app grows. Really wish I could just go for a route config file and map my screen to files. I much prefer the Rails and Laravel approach, use defaults to map to files but make it easy to switch to whatever works best for the project.

[@fullbinky]

Absolutely fantastic intro to SvelteKit. Thank you much Geoff and This Dot Media

[@diegovalencr]

This was clear and effective in a whole new level. Thanks!

[@ObviouslyProgrammer]

Thank you! That preload thing got to me and now I wanna try SvelteKit even more

[@crstnio]

I don't know exactly what it is, but Geoff is a fascinating person to me.

[@riendlyf]

Good overview, very clear explanation, thank u guys

[@dukeselwood]

Great run through. Exactly what I was looking for

[@dosxmainyt9245]

So good! Very well explained. Thank you so much.

[@EladYosha]

Very helpful, thanks. Just to understand better, where does server rendering happens? If I build a static site and have a load function on server page what sveltekit is using as "server"?
Thanks!

[@henrikvilhelmberglund]

at build time (prerendering) if you're using the static adapter.

[@EladYosha]

Thanks, but then the content is static as it is prerendered in build time.
So I guess for true server app with real time content I ill need to build with node adapter.
Elad

[@johnpeap]

Thanks, very helpful!

[@boot-strapper]

this dude looks so young. Talk about a way to make me feel old.

[@mattz_zeref]

can we save components on lib folder ?
lib/compoenets/any compoenet.svelte

[@geoffrich5528]

Yes, you can put whatever you want in the lib folder and it will be available to import via $lib. So if you create `lib/components/Banner.svelte` you can import that component anywhere in your app with `import $lib/components/Banner.svelte`

[@mintez1196]

HI, guys have you got any idea how to do real time validation for inputs example email or password?

[@scaffus]

You could do some validation client side with on:change on your inputs and do stuff from there, but don't forget to also do validation server side.

[@scaffus]

see 57:55 for server side validation example

[@drivebuss8079]

may i ask of how nuch rich rich is?

[@acharafranklyn5167]

Nice video, learnt new things but where is the git link

[@blessdarah1256]

Rich Harris, then Jeff Rich! I think I need to change my name....