Svelte is a modern JavaScript framework for building user interfaces. Unlike other frameworks like React or Vue, Svelte shifts much of the work to compile time, producing highly efficient, imperative code that updates the DOM.
- Zero-runtime overhead: Svelte compiles your code to highly efficient, vanilla JavaScript at build time.
- Reactivity: Svelte makes state management simple and intuitive.
- Component-based: Build encapsulated components that manage their own state.
- Node.js installed on your system.
-
Install the Svelte template: Open your terminal and run:
npx degit sveltejs/template svelte-app -
Navigate to your new project:
cd svelte-app -
Install dependencies:
npm install -
Start the development server:
npm run dev
src: Contains your Svelte components.public: Contains static assets.
- Svelte applications are built with components. A Svelte component is a
.sveltefile. - Components can contain HTML, CSS, and JavaScript.
- Svelte's reactivity is straightforward. Just assign a new value to a variable, and the framework updates the DOM.
- Use
$:to create reactive statements.
- Use
{#if}and{/if}to conditionally render parts of your component.
- Use
{#each}and{/each}to iterate over arrays.
- Use
on:eventnameto handle events.
- Bind values to your inputs using the
bind:valuesyntax.
- Official Documentation: Visit Svelte's official documentation for comprehensive and detailed guides.
- Tutorial Videos: https://www.youtube.com/watch?v=zojEMeQGGHs
- Advanced Concept: Store https://www.youtube.com/watch?v=T64FIL1ii-0
Svelte offers a unique approach to building web applications with its compile-time magic. It's simple, fast, and easy to learn, especially for those familiar with HTML, CSS, and JavaScript.
- Explore Svelte's official tutorials and examples.
- Build a simple project to get hands-on experience.
- Join the Svelte community for support and to stay updated.
Svelte offers several lifecycle functions that help manage different stages in the lifecycle of a component. These functions are crucial for tasks like resource management, initializing functionality, and cleaning up before a component is destroyed.
onMount is used for code that needs to run after the component is initially rendered to the DOM. It's especially useful for tasks that require DOM elements to be present.
import { onMount } from 'svelte';
onMount(() => {
// Code that runs after the component is mounted
});
onDestroy is invoked right before the component is removed from the DOM. It's the perfect spot for cleaning up to prevent memory leaks, such as removing event listeners or canceling subscriptions.
import { onDestroy } from 'svelte';
onDestroy(() => {
// Cleanup code
});
beforeUpdateruns before the component's DOM is updated in response to state changes.afterUpdateis called after the component's DOM has been updated.
These functions are great for tasks that need to be executed right before or after the DOM updates, like recalculating layout or reading DOM measurements.
import { beforeUpdate, afterUpdate } from 'svelte';
beforeUpdate(() => {
// Code that runs before DOM updates
});
afterUpdate(() => {
// Code that runs after DOM updates
});
tick is a function that returns a promise. This promise resolves after Svelte has made changes to the DOM in response to state changes. It's useful for coordinating DOM updates with asynchronous operations.
import { tick } from 'svelte';
async function updateAndAct() {
// Make state changes
await tick();
// Code that runs after the DOM has updated
}