Web Systems and Technologies
Svelte Documentary Document
Group 5:
Rose Marie S. Espiritu
Fritzcel P. Tapay
Jeniel Grace V. Pacilan
Jetrel L. Jarantilla
Jame Cris Bugtong
James Lloyd Handumon
Submitted to:
Mr. Ray An Quinon
What is Svelte?
Svelte is a modern JavaScript framework that simplifies web development by compiling
components into efficient JavaScript at build time. Unlike React and Vue, which use a virtual
DOM to track updates, Svelte directly updates the DOM, resulting in faster performance and
simpler code.
History of Svelte
Svelte is a modern front-end framework designed for building fast and reactive web applications.
Unlike traditional frameworks, Svelte shifts much of the work to compile time, resulting in
smaller and more efficient code.
Evolution of Svelte
2016: First release of Svelte, introducing the idea of compiling UI components instead of
using a virtual DOM.
2019 (Svelte 3): A major release that improved reactivity, making state management
more intuitive without extra functions like setState.
2023: SvelteKit became the recommended way to build complete web applications using
Svelte, offering routing and server-side rendering.
Today, Svelte is widely used for building fast web applications, interactive user interfaces,
and even mobile apps using Svelte Native.
How to Set Up Svelte ( Tools and Installation)
To start using Svelte, you need to install the right tools and set up a new project.
1. Install Node.js
Svelte requires Node.js to manage dependencies and run the development server.
Download the LTS version from nodejs.org and install it.
After installation, open a terminal (Command Prompt, PowerShell, or VS Code
Terminal) and check if Node.js is installed by running:
2. Install a Code Editor
The recommended editor is Visual Studio Code (VS Code), which you can download
from code.visualstudio.com.
Install the Svelte for VS Code extension for syntax highlighting and better support.
3. Create a New Svelte Project
Use Vite, a fast development tool, to set up a new Svelte project.
1. Open a terminal and run:
my-svelte-app is the name of your project folder.
--template svelte tells Vite to set up a Svelte project.
2. Go into the project folder:
4. Install Dependencies
Svelte needs some packages to run. Install them by running:
This will download and set up everything needed for Svelte to work.
5. Start the Development Server
To see your Svelte app in action, run:
This will start a local development server, and you’ll see an output like:
Open your browser and go to http://localhost:5173/ to see the default Svelte app running.
How Svelte Works
Svelte applications are built using components. A component is a self-contained unit that
contains three parts:
1. HTML (Structure) – Defines the page layout.
2. CSS (Styling) – Controls how the page looks.
3. JavaScript (Logic) – Adds interactivity and dynamic behavior.
Unlike other frameworks that rely on a virtual DOM, Svelte compiles components into
efficient JavaScript before the browser loads the page. This means there’s no extra processing
happening while the app runs, making it faster and more lightweight.
1. Creating and Using Components
Instead of putting all the code in App.svelte, you can split the UI into multiple components.
Step 1: Create Greeting.svelte
Inside the src folder, create a new file Greeting.svelte and add:
How It Works:
export let name = "World"; allows this component to receive a prop (custom data).
{name} dynamically displays the value passed when using this component.
Step 2: Use Greeting.svelte in App.svelte
Now, open App.svelte and import your new component:
This will display.
Why Use Components?
Reusability: You can use Greeting.svelte multiple times.
Maintainability: Your code is easier to manage.
2. Reactivity: Automatic UI Updates
One of the biggest advantages of Svelte is automatic reactivity. You don’t need functions like
setState (used in React) to update the UI—Svelte does it automatically.
Example: Counter Component (Counter.svelte)
Clicking the button automatically updates the displayed count.
Why? Svelte detects changes to count and updates the UI instantly.
Use This in App.svelte
This adds the Counter component inside App.svelte.
3. Handling User Input (bind:value)
Svelte makes working with form inputs easy using bind:value.
Example: Two-Way Data Binding
As the user types, the UI updates instantly because bind:value syncs the input field and the
variable.
4. Looping Over Data ({#each})
You can use {#each} to loop through an array and dynamically display data.
Example: Displaying a List of Names
This generates:
5. Conditional Rendering ({#if})
Svelte allows you to show or hide content dynamically using {#if} blocks.
Example: Show Message if Logged In
Clicking the button toggles between "Login" and "Logout" and updates the UI dynamically.
