Give us ⭐if you like the project. If you have any propositions - pull Requests are highly appreciated!
-
Svelte is a free and open-source front end compiler. It is used to solve the same problems for which React or Vue are used, but Svelte.js facilitates users to build applications in a declarative, component-driven way rather than to create an imperative DOM manipulation.
-
Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
Traditional frameworks like ReactJS and VueJS do the bulk of their work in the browser i.e on the run time while Svelte shifts that work into build step i.e during compile time. So, instead of updating the DOM using Virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
Using other frameworks, after being built there is still a framework. Svelte compiles code to pure, ideal JavaScript. That’s why it calls itself the “disappearing framework” – by the time the app’s code appears in the browser, there is really no framework anymore.
-
Yes. Svelte has SvelteKit, similar to Next.js of React and Nuxt.js of Vue for SSR. SSR can speed up the first render of your app and improve its SEO. For mobile app development, there’s Svelte-Native. It works on top of NativeScript.
-
- Highly reactivity apps
- Fast performance, small bundle
- Low-energy app
-
Reactivity is a term that describes a behavior when input change is automatically and immediately reflected in the Document Object Model (DOM). For example, when an app is reactive, it means that any change of values (the result of user input) will be automatically reflected in the DOM.
-
- facilitates developers to write less code. It mainly aims to build boilerplate-free components using the already known languages such as HTML, CSS, and JavaScript
- truly reactive and brings reactivity to JavaScript itself. It does not require more complex state management libraries
- does not require virtual DOM. It compiles the code to tiny, framework-less vanilla JS. That's why the Svelte.js app starts fast, loads fast, and stays fast
- comparatively better than its competitors (like React, Vue or Angular) because it provides less code, less boilerplate, smaller bundles, more speed, and better performance
-
Svelte data flow is top-down. Sometimes it is helpful to break this rule and provide two ways of data binding. Great example of such a need is the input element. Basically there we need to listen to on:input, read the event.target.value and manually set value. But with svelte we can avoid such boilerplate:
<input bind:value={color} />
-
DOM events are basically just known events from Document Object Model, such as click, change etc. You can listen to any event on an element with the
on:directive:<div on:click="{handleClick}">Element</div>
-
Event modifiers allows us to modify base event behavior:
- self - only fires the event if the clicked element is the target
- preventDefault - prevent the default action (run e.preventDefault())
- stopPropagation - prevent the event reaching the next element (run e.stopPropagation())
- once - make sure the event can fire only once (removes handler)
- capture - fires the handler during the capture phase instead of the bubbling phase
- trusted - only trigger handler if event.isTrusted is true. I.e. if the event is triggered by a user action
- passive - *improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
- nonpassive - explicitly set passive: false
Example:
<button on:click|once="{toggleModal}" /> <!-- You can chain modifiers like this: --> <button on:click|self|once="{handleClick}" />
-
Components can also dispatch events. To do so, they must create an event dispatcher.
import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); function sayHello() { dispatch("message", { text: "Hello!", }); }
And thanks to that we can listen in parent component for such custom event:
<Child on:message="{handleMessage}" />
-
If you want to listen to an event on some deeply nested component, the intermediate components must forward the event.
<Inner on:message />
Such
on:messagedirective will forward allmessageevents. -
Class directive allows us to specify with a JavaScript, what classes should be attached to HTML element:
<button class={selected === 'foo' ? 'selected' : ''}>foo</button>
That means: if
selectedis equal tofooaddselectedclass to button element.Or in other way when
selectedistrue:<button class:selected>foo</button>
-
Yup. Svelte has its own replacement for common solutions like Redux or Ngrx. It’s just called writable stores.
A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.
We have two kinds of stores:
- writable - we can read and modify data
- readable - we can only read data
- derived - create a store whose value is based on the value of one or more other stores. Store will update themselves automatically, when based stores will change
Example of writable store:
const name = writable("world");
Example of derived store:
export const name = writable("world"); export const greeting = derived(name, ($name) => `Hello ${$name}!`);
-
If a store is writable, we can bind it’s value, just as you can bind to local component state.
Example:
const name = writable('world'); <input bind:value={$name}>
-
Provides a mechanism for components to talk to each other without passing around data (avoid props drilling) and functions as props, or dispatching lots of events.
Creation of context:
import { key } from "./mapbox.js"; setContext(key, { getValue: () => value, });
Usage of context:
const { getMap } = getContext(key);
The key of context id should be Symbol:
const key = Symbol();
or any other unique value.
-
They differ in that stores are available to any part of an app (global state), while a context is only available to a component and its descendants. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others.
-
Slot is a place where we can put children through props. Like we have something like this:
<div> <p>I'm a child of the div</p> </div>
But, if we want to pass children to our component:
<!-- Box component --> <div class="box"> <slot></slot> </div>
And from the usage side:
<Box> <h2>Header</h2> <p>Paragraph</p> </Box>
-
In case when we want to pass a few slots, we can name them. Name works like an identifier and thanks to them Svelte knows where to put a specific slot.
Example:
<!-- Box component --> <div class="box"> <slot name="”first”"> </slot> <slot name="”last”"> </slot> </div> <!-- Usage of Box component --> <Box> <span slot="first"> Rafał </span> <span slot="last"> Kostecki </span> </Box>
-
Just like casual components, slots can also have props. For instance we can pass a boolean.
Example:
<!-- Hoverable component --> <div on:mouseenter="{enter}" on:mouseleave="{leave}"> <slot hovering="{hovering}"></slot> </div> <!-- Usage of Hoverable component --> <Hoverable let:hovering="{hovering}"> <div class:active="{hovering}"> {#if hovering} <p>I am being hovered upon.</p> {:else} <p>Hover over me!</p> {/if} </div> </Hoverable>