Getting Started With Svelte.js
Tags: javascript, svelte
Published: 2020-11-24 14:13:43

# 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.

{% youtube AdNJ3fydeao %}

# Why Svelte

✅ Works on DOM, no Virtual DOM
✅ Svelte files has .svelte extension
✅ Each <style></style> 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, <button on:click={} />
✅ 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

```bash
npx degit sveltejs/template svelte-todo-list
```
## Online REPL

In my opinion the best way to get to started is the [REPL](https://svelte.dev/repl/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p4n1ym8q59vu3g2yv42p.png)

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 

```bash
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

```javascript
<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

```javascript
<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.