What is Svelte?
Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there’s a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector.
Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you’re able to write ambitious applications with excellent performance characteristics.
Interested to know more about Svelte?
I discovered Svelte only a few months ago, and I amazed by how easy is to get started and how powerful it is. I strongly recommend to spend a couple minutes on Svelte 3: Rethinking reactivity and definitely watch the amazing talk by Rich Harris (Creator of Svelte.js).
Show me some code!
This article assumes that you already know what two way binding (or two way data binding) is.
2 way binding on input text element
On input text we just use bind:value="{someVariable}" to connect the value attribute of the input element to the variable inputVariable.
<script>
let inputValue = '';
</script><input type="text" bind:value="{inputValue}"
2 way binding on dropdown select
On select element we use the same approach. Notice that since selectValue = "Green" the option with value “Green” will be preselected.
<script>let selectValue = "Green";</script><select bind:value="{selectValue}"><option value="Red">Red</option><option value="Green">Green</option></select>
2 way binding on input radio
Below we have 2 radio inputs, and we want the user to select either Male or Female as a gender. In that case we use bind:group="{someVariable}" and in that case the variable will hold either Male or Female. Notice that both inputs have the same name attribute but different values. That will ensure that only one of the radio inputs will be checked.
<script>let radioValue = "Male";</script>Select Gender: <br><label><input type="radio" name="gender" value="Male" bind:group="{radioValue}">Male</label>
<label><input type="radio" name="gender" value="Female" bind:group="{radioValue}">Female</label>
2 way binding on input checkbox
Below we have 3 check boxes, and we want the user to select his favorite frameworks. In that case we allow the user to select multiple values. Again we will use bind:group="{someVariable}" but in that case, the variable should be an array because the value of each check box will be placed inside the array if the check box is checked.
<script>let checkboxValue = [];</script><label><input type="checkbox" name="framework" value="Vue" bind:group="{checkboxValue}">Vue</label><label><input type="checkbox" name="framework" value="Svelte" bind:group="{checkboxValue}">Svelte</label><label><input type="checkbox" name="framework" value="React" bind:group="{checkboxValue}">React</label>
If we want to bind to a single check box and knowing if it is checked or not, we should use bind:checked="{someVariable}" and the variable will hold either true or false indicating that the checkbox is checked or not.
<script>let singleCheckbox = false;</script><label>Svelte is awesome. Do you agree?<input type="checkbox" bind:checked="{singleCheckbox}"></label>
2 way binding on custom element (component)
The custom component below it is just an input element which is bindable from the parent component. Notice export let prop . This is the way to set up props in svelte. So in parent component we connect the exported variable from child to a variable in parent component. Specifically bind:prop="componentValue"
// Parent Component
<script>
import Input from './Input.svelte';let componentValue = "";</script><Input bind:prop="{componentValue}"/>//Child Component<script>export let prop;</script><input type="text" placeholder="Type Something" bind:value="{prop}">
In the above example, in the custom component I have used the name of the prop to be prop . Of course you can use any name you want.
In this codesanbox example you can find all the code I have used in this article.
Read Svelte Docs about Element bindings.
Feel free to comment and ask any question. I will be happy to help.
