What Is Svelte
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
Why Svelte
✅ Works on DOM, no Virtual DOM
✅ Svelte files has .svelte extension
✅ Each written in svelte files are scoped css.
✅ You can use its internal store apis. No need to install an external library
✅ Build by Rollup with default configuration. However, you can also use Parsel and Webpack.
✅ You can subscribe any variable easily, but it has some hacky ways to detect array mutations. (This one which i didnt like)
✅ You can write both javascript, html and styles in svelte files like you are writing a html file. ( has minor difference)
✅ You access DOM events with on: prefix such as,
✅ You do not need to pass callbacks from child to parents.
✅ You can use createEventDispatcher.
✅ You start a block with {#} and ends with {/} such as {#if}…{/if}
Getting Started With Svelte
Using NPX
You can use this command to start a to do list app
npx degit sveltejs/template svelte-todo-list
Online REPL
In my opinion the best way to get to started is the REPL
Once you are happy with your app you can download all the code for your app in a zip file. Once you've unzipped your file, CD into the folder and run
npm install && npm run dev
you can save your app in the REPL or edit it from your code editor from there.
I made a quick app on the REPL
App.svelte
<script>
import ContactCard from "./ContactCard.svelte";
let name = "Max";
let title = "";
let image = "";
let description = "";
let formState = "empty";
let createdContacts = [];
function addContact() {
if (
name.trim().length == 0 ||
title.trim().length == 0 ||
image.trim().length == 0 ||
description.trim().length == 0
) {
formState = "invalid";
return;
}
createdContacts = [
...createdContacts,
{
id: Math.random(),
name: name,
jobTitle: title,
imageUrl: image,
desc: description
}
];
formState = "done";
}
function deleteFirst() {
createdContacts = createdContacts.slice(1);
}
function deleteLast() {
createdContacts = createdContacts.slice(0, -1);
}
</script>
<style>
#form {
width: 30rem;
max-width: 100%;
}
</style>
<div id="form">
<div class="form-control">
<label for="userName">User Name</label>
<input type="text" bind:value={name} id="userName" />
</div>
<div class="form-control">
<label for="jobTitle">Job Title</label>
<input type="text" bind:value={title} id="jobTitle" />
</div>
<div class="form-control">
<label for="image">Image URL</label>
<input type="text" bind:value={image} id="image" />
</div>
<div class="form-control">
<label for="desc">Description</label>
<textarea rows="3" bind:value={description} id="desc" />
</div>
</div>
<button on:click={addContact}>Add Contact Card</button>
<button on:click={deleteFirst}>Delete First</button>
<button on:click={deleteLast}>Delete Last</button>
{#if formState === 'invalid'}
<p>Invalid input.</p>
{:else}
<p>Please enter some data and hit the button!</p>
{/if}
{#each createdContacts as contact, i (contact.id)}
<h2># {i + 1}</h2>
<ContactCard
userName={contact.name}
jobTitle={contact.jobTitle}
description={contact.desc}
userImage={contact.imageUrl} />
{:else}
<p>Please start adding some contacts, we found none!</p>
{/each}
ContactCard.svelte
<script>
export let userName;
export let jobTitle;
export let description;
export let userImage;
const initialName = userName;
</script>
<style>
.contact-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
max-width: 30rem;
border-radius: 5px;
margin: 1rem 0;
background: white;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: 7rem;
}
.thumb {
width: 33%;
height: 100%;
}
.thumb-placeholder {
background: #ccc;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-data {
width: 67%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 1rem;
}
h1 {
font-size: 1.25rem;
font-family: "Roboto Slab", sans-serif;
margin: 0.5rem 0;
}
h2 {
font-size: 1rem;
font-weight: normal;
color: #5a5a5a;
margin: 0;
margin-bottom: 0.5rem;
}
.description {
border-top: 1px solid #ccc;
padding: 1rem;
}
</style>
<div class="contact-card">
<header>
<div class="thumb" class:thumb-placeholder="{!userImage}">
<img src={userImage} alt={userName} />
</div>
<div class="user-data">
<h1>{userName} / {initialName}</h1>
<h2>{jobTitle}</h2>
</div>
</header>
<div class="description">
<p>{description}</p>
</div>
</div>
as a fairly new developer and someone who is new to react I found svelte way easier to understand. In terms of making your app reactive I feel svelte is a great way to go especially if you aren't a huge fan of react.
Top comments (0)