SvelteKit Demo

Housekeeping

• Week 14 schedule updated
• Achievements
  • Mini-presentation idea: Speak for 5 minutes about a potential Final Project idea
    • Get feedback from your peers
    • Include wireframes, journal entries, mood boards for extra points
• Trophies
  • Tess receives The Cleric trophy for best code journal!
    • 5 points for CPNT 265

---

1. Introduction to SvelteKit

Materials

• Tutorial: Let’s learn SvelteKit by building a static Markdown blog from scratch
  • Tony's Notes on his first Try
  • If you don't need Sass, you can skip Adding Sass to SvelteKit
  • If you don't need markdown support, you can skip Adding Markdown to SvelteKit with mdsvex.
• SvelteKit Documentation
• Comparison: Svelte vs VueJS
• Further information:
  • The Future of Svelte (Interview with Rich Harris)
  • The Road to SvelteKit 1.0 by Rich Harris

Key Takeaways

• Svelte does not use the <template> element for HTML; it floats freely inside the page.
• SvelteKit is similar to Nuxt and adds app support and server-side rendering.
• Svelte is now at version 3 but SvelteKit 1.0 is still in public beta.
• SvelteKit is "opinionated", meaning it forces you to build your apps a certain way.

Pros

• Easier to use.
• SvelteKit is "compiled away" and creates an app that uses vanilla JS, leading to smaller code with no virtual DOM.
• Great for hobby sites and simple web apps.

Cons

• SvelteKit is missing many features and components that Nuxt has.
• The SvelteKit API is still changing and is not stable.
• Not recommended for production, although this hasn't stopped companies from using it.

---

2. Stage Work - 10:30am

Mini-presentations

• Maryam: Docker Demo

Battlefield Discussion

• Battlefield Discussion: Maryam/Maha

---

3. Afternoon Main Room

• Tony - Presentation Layout with SvelteKit

---