How SvelteKit Makes Full-Stack Easy

Scrimba Discount!

• Learn to code using Scrimba with their interactive follow along code editor
• Join their exclusive discord communities and network to find your first job!
• Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Topics

Quick Full-Stack Overview

• Frontend (front-end) is the visual UI and any logic around displaying and interacting with it
• Back-end is the layer that serves dynamic content, authorizes the application, performs data manipulations, interacts with a database
• Anytime you’re pulling data from a database, sanitizing and securing it and then serving and displaying it in a UI, that can be considered full-stack

Svelte/SvelteKit

• JavaScript framework that makes building interactive and data-heavy UI’s easier
• Through the simple JavaScript-like syntax for managing complex UI manipulations like
  - Looping through and displaying data
  - Conditionally showing and hiding based on state
  - Sharing information across different components/pages
• With Kit’s ability to write Node/express API endpoints that will run only on the server it makes typing the front-end code with the backend much easier

What Makes It Easy?

• Whether you’re coming from JavaScript or another framework, the syntax (or lack thereof) of Svelte makes it quick to learn
  - Declaring a reactive variable: let count = 0
  - Declaring a property: export let count = 0
• Not having to learn a new templating language like JSX, Svelte just adds a few helpers like if, each, and keeps HTML the same. 
• Having single file components (HTML, CSS and JavaScript) can help split up work/tasks a lot easier and with less conflicts
• The backend lives in the same file structure and provides autocompletion/type-safety between front-end and back-end
  - Call the data in a +server.ts file and pass that data as a prop to the front-end
  - The front-end will know what the data from the server file is so if you accidentally write the wrong property it will give you an error
• It’s easy to deploy with services like Netlify and Vercel
  - Deploying both the front-end and back-end of an application by just pushing a change to a github repo makes iterating and testing in production super fast
• The dev server is extremely fast
  - Vite + rollup make for a crazy fast dev server experience
  - Usually my changes are saved and complied before I even have a chance to switch windows
• There isn’t much older/deprecated content yet
  - With react, the class vs hooks way of the building makes it harder to find the right answers and patterns
• Not having to deal with CORS
• One opinionated framework for the entire app is a huge advantage. There are patterns you can follow for fetching data and then passing it to the front-end

Gotchas

• Not a ton of options for UI libraries
  - Although recently shadn and radix community ports have become pretty stable
• The community still hasn’t reached a critical mass where every question has multiple answers
• Not a ton of ‘designed for svelte’ libraries
  - This is both a good and bad thing as Svelte can use any JavaScript library pretty easily but it does require a bit of thinking