Course Preview

Svelte Fundamentals

Svelte is a web user-interface framework that compiles components written with HTML, CSS, and JavaScript into browser code. It tracks reactive state so the page updates when application data changes.

itWeb development | OpenSkills.info

Course pathWalk it in order

Look it upDip in anytime

Go furtherLeaves this page

Don't Panic — Svelte Fundamentals

Svelte is a way to build browser interfaces from components, with a compiler doing much of the book-keeping before the browser enters the room. A component keeps markup, behavior, and scoped CSS in a .svelte file. The compiler turns those relationships into JavaScript and CSS that update the DOM, which is the browser's tree of page elements. Nobody has to hand-deliver notices to every button.

The important bit is the dependency graph. Props and state are inputs. Markup reads them. A derived value calculates from them. When an event changes state, Svelte knows which part of the rendered page needs attention. This is why a derived value belongs in $derived, not in a second state variable being ceremonially copied around by an effect.

Then there is $effect, the rune for speaking to systems outside Svelte. Use it for a canvas, media player, browser title, or third-party widget. It runs in the browser after rendering, so it cannot supply essential server-rendered content. This distinction is mildly annoying only until it prevents a page from arriving with the wrong answer and correcting itself later, which is the sort of surprise that develops a personality.

Components are also negotiations about ownership. Props carry values downward. A callback reports an interaction upward. A bind: directive permits writing in both directions, which is useful for an input but should not quietly turn every child into co-owner of its parent's state. For a repeating list, give every row a stable key such as task.id; an array index knows where a row is, not who it is.

Read the Intro for the component model, lifecycle, and framework boundary. Use Slides for the flow from a state write to a DOM update. Keep the Cheatsheet nearby when choosing runes, blocks, bindings, and error boundaries. The practice reference and exercise turn that model into a small task list, where reordering data is allowed to reveal whether the code knows the difference between a task and its seat number.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources