SvelteKit: From landing pages to PWAs Powering interactive experiences at Germany’s largest anime con!

Who am I? https://danpetrov.xyz

Who am I? https://danpetrov.xyz Frequent con goer, traveller, landscape and cosplay photographer, video game streamer, coffee nerd etc.

Bit more background - Some basic knowledge of React - Pretty decent at TypeScript - Started with a small hobby project in Svelte before once 1.0 of Kit was released - Went on to mostly make some promo websites - Mostly spend my work time in the backend side of things

About DoKomi Germany’s largest anime and japan expo (~155K visitors this year). Organized since around a decade ago. Largely community and volunteer driven.

The hololive fan booth project

What’s hololive anyway?

What? VTuber? Hololive Production is a virtual YouTuber agency owned by Japanese tech entertainment company Cover Corporation. A virtual YouTuber (streamer) that uses face and body tracking technology to stream games and other activities online.

Let’s make a stamp rally!

Requirements Convention network can be spotty and unreliable. 1 2 3 Primary target is smartphones, which can be ancient Android devices. Strict deadlines and limited human resources. Offline first Fast and lightweight Good DevX

Offline - Progressive Web App (PWA) Options 1 2 3 Fast and lightweight - Svelte DevX - Svelte

How does the stamp rally work?

No content

Features - QR code scanning and validation - Information about each rally vendor and how to find them - Real time events - An online leaderboard - Bonus “gacha” game! First implementation included core features like the QR scanner, other things added later.

No content

Architecture

Phoenix.js Why Phoenix Channels? - Already existing experience in Elixir and Phoenix - Incredible flexibility in pubsub configuration - All benefits of Elixir like remote shell for remote debugging Easily integrate with Phoenix Channels using your custom client!

Example

PWAs! What is mostly supported now? - Asset and request caching - Background sync - Over the air updates - “Installable” Progressive Web Apps (PWA) have become nearly as fully featured as native apps in past years.

How to PWA in SvelteKit then? Start with making sure your src/service-worker.js exists. There are a few options, for example: a) SvelteKit low level boilerplate b) Use workbox directly yourself

Don’t do it from scratch! Introducing: workbox Set of modules that massively simplify work with service workers. SvelteKit doesn’t include it by default!

No content

Conclusions? - SvelteKit is great for SSR, as well as client-focused PWAs - Ecosystem not as huge as for React/Vue, but good enough for most projects - Very great metrics out of the box, fantastic documentation - Built in animations are fantastic! - Using Phoenix JS client directly is not so scary! - Not sure about a new stack? Try it out in a smaller project first, and scale from there!

Links! - https://github.com/watsonindustries/holoquest - https://kit.svelte.dev/docs/service-workers - https://web.dev/learn/pwa/workbox/ - https://www.npmjs.com/package/phoenix - https://danpetrov.xyz - https://hololivepro.com/en/

And yes, we are hiring platogo.com/hiring

Thank you!