Svelte hololive fan booth project

This deck was made for a talk at the Svelte Vienna meetup in October 2023.

Transcript

1. SvelteKit: From landing pages to PWAs Powering interactive experiences at Germany’s largest anime con!
2. Who am I? https://danpetrov.xyz
3. Who am I? https://danpetrov.xyz Frequent con goer, traveller, landscape and cosplay photographer, video game streamer, coffee nerd etc.
4. 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
5. About DoKomi Germany’s largest anime and japan expo (~155K visitors this year). Organized since around a decade ago. Largely community and volunteer driven.
6. The hololive fan booth project
7. What’s hololive anyway?
8. 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.
9. Let’s make a stamp rally!
10. 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
11. Offline - Progressive Web App (PWA) Options 1 2 3 Fast and lightweight - Svelte DevX - Svelte
12. How does the stamp rally work?
14. 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.
16. Architecture
17. 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!
18. Example
19. 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.
20. 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
21. 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!
23. 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!
24. 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/
25. And yes, we are hiring platogo.com/hiring
26. Thank you!