Web News

How SvelteKit Makes Full-Stack Easy

June 13, 2023
June 21, 2023
Episode Number:

Full-stack development is one of the most difficult web development positions as it covers both the frontend and backend of a website. The frontend is responsible for the user interface, including any logic that powers that interface (ie animations, show/hide elements). The backend is responsible for features working from a server, typically handling security-heavy functions (ie credit card usage), and data manipulation (ie saving your profile changes). Luckily the combination of Svelte on the frontend and SvelteKit on the backend can make full-stack development easier than you might think with a fast development server, easy-to-follow file structure, and syntax that is easily picked up if you're coming from another JavaScript framework. This week Matt and Mike discussed how Svelte and SvelteKit can help you develop full-stack websites and apps faster than some of the other tools out there.


Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes

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:


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


  • 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


  • 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