Geoff Rich

Camp Counselor

Building Efficient, Resilient Web Apps With SvelteKit

Event Logo

Wednesday, July 26, 2023 - 9:00 PM UTC, for 1 hour.

Regular, 60 minute presentation

Room: African 60

svelte
javascript
frontend

Building web apps with all the modern best practices can be complicated. Not only do you want your app to be *efficient* and load data quickly and intelligently, you also want it to be *resilient* and stay upright regardless of your users’ device or network. Enter SvelteKit, a modern web framework built on top of the best-in-class Svelte JS component framework. Not only does it help you move fast with a minimal-boilerplate and *fun* developer experience, it also gives you the tools to provide an efficient, resilient user experience. This talk will move beyond the basics and show how to use SvelteKit’s powerful toolkit to handle more advanced scenarios: - preloading and streaming data for lightning-fast navigations - crafting a minimum viable experience so your app still functions when your JavaScript fails - sharing data between multiple routes by loading data in the layout - avoiding “data waterfalls” that make your users wait for no good reason - progressively enhanced forms - customizing SvelteKit’s enhanced forms to implement optimistic UI - using advanced Svelte store patterns to efficiently update data instead of over-fetching We’ll use a music collection demo app to showcase these ideas, so that they’re tied to concrete examples instead of being purely theoretical. This talk assumes you either already have some basic familiarity with Svelte & SvelteKit or are okay to speed through the basics and jump into the deep end. If you know what a Svelte component looks like, what a +page.svelte file does, and what a load function and form action are, you should be more than prepared!

Prerequisites

Basic familiarity with building websites with component frameworks (React/Vue/Svelte). Ideally you're also familiar with the basics of SvelteKit - how to create a route, return data from a load function, and access it on a page. However, I'll give a very brief refresher at the top of the talk before diving into more intermediate topics.

Take Aways

  • Understand all the different ways SvelteKit lets me load and update data, and any performance implications
  • Understand why progressive enhancement is important and what I need to consider when building a SvelteKit app
favorited by:
Tyler Thompson Geoff Rich Jason Von Ruden Cody Backhaus Steven Hicks Ellie Stevens Brett Slaski Ryan Wisniewski Jon Meer Allan Wick Alice Kim Elizabeth Groom Cody De Arkland Mario Aranda