Let’s start SVELTE!

Goodbye React & Vue

Dangguen Market, Byun Kyuhyun

W3C Conference Korea 2019

Who am I?

• Danggeun Market Software engineer
• AWSKRUG Serverless Group Organizer
• CircleCI User Group Organizer
• Node.js, AWS, DevOps, Serverless
• Golang, Typescript, Javascript
• https://novemberde.github.io
• https://github.com/novemberde

What is svelte?

Cybernetically enhanced web apps

*Write less code

*No virtual DOM

Write less code

            
for (let i = 0; i <= 100; i += 1) {
  if (i % 2 === 0) {
    console.log(`${i} is even`);
  }
}
            
          

            
for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);
            
          

Write less code

Write less code - How about React?

            
import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    

      
      

      
{a} + {b} = {a + b}
    
  );
};
            
          

Write less code - How about Vue?

Write less code

• React - 442 Characters
• Vue - 263 Characters
• Svelte - 145 Charaters

Write less code

Top-level elements

• React: <> or <div>
• Vue: <template>
• Svelte: As many as you want to create

Write less code - state

            
let count = 0;

function increment() {
  count += 1;
}
            
          

            
const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}
            
          

Write less code

Death to boilerplate

No virtual dom

Are you a React developer?

You may think this is nonsense

Since 2013... you heard that the virtual DOM is fast!

Few minutes later...He said:

• React is not magic.
• Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to.
• However, using C or Java or JavaScript is an order of magnitude performance improvement because you don't have to worry...about the specifics of the platform.
• With React you can build applications without even thinking about performance and the default state is fast.

Virtual DOM is slow?

the virtual DOM is usually fast enough.

• The original promise of React was that you could re-render your entire app on every single state change without worrying about performance.
• there'd be no need for optimisations like shouldComponentUpdate (which is a way of telling React when it can safely skip a component).

Virtual DOM is slow?

• Even with shouldComponentUpdate, updating your entire app's virtual DOM in one go is a lot of work.
• The React team introduced something called React Fiber which allows the update to be broken into smaller chunks.
• This means (among other things) that updates don't block the main thread for long periods of time, though it doesn't reduce the total amount of work or the time an update takes.

Where does the OVERHEAD come from?

Diffing isn't free

Unnecessary work

            
function MoreRealisticComponent(props) {
  const [selected, setSelected] = useState(null);

  return (
    

      
Selected {selected ? selected.name : 'nothing'}

      

        {props.items.map(item =>
          

            
              {item.name}
            
          
        )}
      
    
  );
}
            
          

Why do frameworks use the virtual DOM then?

• It's important to understand that virtual DOM isn't a feature.
• It's a means to an end, the end being declarative, state-driven UI development.
• Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough.
• That means less buggy code, and more time spent on creative tasks instead of tedious ones.
• But it turns out that we can achieve a similar programming model without using virtual DOM — and that's where Svelte comes in.

So, What is Svelte?

Svelte is a component framework — like React or Vue

But,

there's an important difference

Traditional frameworks allow you to write declarative state-driven code

• Penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like that eat into your frame budget and tax the garbage collector.

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

Let's see the performance examples

Result of memory usage

• React : 30 ~ 110 MB
• Svelte: 15 ~ 30 MB

WOW

SVELTE has the fantastic performance

Let's see the Svelte Syntax

Tags

            




  



  can't touch this


page {p}

...
...


            
          

Script

Reactive

Store

            
// The svelte/store module contains minimal store implementations which fulfil this contract.
// You can use these as the basis for your own stores, or you can implement your stores from scratch.
const unsubscribe = store.subscribe(value => {
  console.log(value);
}); // logs `value`

// later...
unsubscribe();

import { writable } from 'svelte/store';

const count = writable(0);
console.log($count); // logs 0

count.set(1);
console.log($count); // logs 1

$count = 2;
console.log($count); // logs 2
// https://svelte.dev/docs#svelte_store
            
          

Module

{#if ...}

            
{#if porridge.temperature > 100}
  
too hot!
{:else if 80 > porridge.temperature}
  
too cold!
{:else}
  
just right!
{/if}
            
          

{#each...}

            
Shopping list

  {#each items as item}
    
{item.name} x {item.qty}
  {/each}

            
          

on:eventname

            



  count: {count}






            
          

Immutable

SVELTE is specially stand for ...

Embedded Web & Mobile Web

SVELTE satisfied those of features

• Minimized Javascript&CSS bundling(5 ~ 20KB)
• Extremely high performance
• Easy to learn
• Rapid web app development

Beyond SVELTE

• SAPPER: Next/Gatsby-style framework. Automic SSR & Code-splitting
• SVELTE NATIVE: Based on nativescript-vue
• SVELTE GL: Like Three.js
• Generally support typescript. But... we can fix syntax errors at the build time.

How about starting development using SVELTE?

References

• https://svelte.dev/
• https://svelte.dev/blog/write-less-code
• https://svelte.dev/blog/virtual-dom-is-pure-overhead
• https://svelte.dev/blog/svelte-3-rethinking-reactivity
• https://youtu.be/AdNJ3fydeao
• https://velog.io/@ashnamuh/hello-svelte
• https://github.com/jaeseokk/ui-block-demo

We're hiring!

bit.ly/dangguen

Thank you!!

• Email:    novemberde1@gmail.com
• Blog:      https://novemberde.github.io
• Github: https://github.com/novemberde