So, what about the hype?

Stackoverflow most loved web framework 2022

State of JS 2021

Why do we need hype?

Ecosystem!

What exactly is Svelte?

Frontend component framework

Component frameworks?

            
function component() {
 
}
            
function component() {
  const p = document.createElement('p');
  return p;
}
            
function component() {         
  const p = document.createElement('p');
  let toggled = false;     
  p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`;
  return p;
}
            
function component() {
  const p = document.createElement('p');
  let toggled = false;     
  p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`;
  p.addEventListener('click', () => {
    toggled = !toggled;
    p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`;
  });
  return p;
}
						
				

          
function component() {
        const [toggled, setToggled] = useState(false);
        const handleClick = () => setToggled(prev => !prev);
        return (
          <p onClick={handleClick}>
            State is {toggled ? 'ON' : 'OFF'}
          </p>
        );
}

          
function component() {
        const [toggled, setToggled] = useState(false);
        const handleClick = () => setToggled(prev => !prev);
        return (
          <p onClick={handleClick}>
            State is <strong>{toggled ? 'ON' : 'OFF'}</strong>
          </p>
        );
}

          
function component() {
  const p = document.createElement('p');
  let toggled = false;     
  p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`;
  p.addEventListener('click', () => {
    toggled = !toggled;
    p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`;
  });
  return p;
}
          
function component() {
  const p = document.createElement('p');
  let toggled = false;     
  const strong = document.createElement('strong');
  strong.textContent = toggled ? 'ON' : 'OFF';
  p.addEventListener('click', () => {
    toggled = !toggled;
    p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`;
  });
  return p;
}
          
function component() {
  const p = document.createElement('p');
  let toggled = false;     
  const strong = document.createElement('strong');
  strong.textContent = toggled ? 'ON' : 'OFF';
  p.append(
    document.createTextNode('State is '),
    strong
  );
  p.addEventListener('click', () => {
    toggled = !toggled;
    strong.textContent = toggled ? 'ON' : 'OFF';
  });
  return p;
}
          

            
function component() {
  const p = document.createElement('p');
  let toggled = false;     
  const strong = document.createElement('strong');
  strong.textContent = toggled ? 'ON' : 'OFF';
  p.append(
    document.createTextNode('State is '),
    strong
  );
  p.addEventListener('click', () => {
    toggled = !toggled;
    strong.textContent = toggled ? 'ON' : 'OFF';
  });
  return p;
}
          

            
function component() {
  const [toggled, setToggled] = useState(false);
  const handleClick = () => setToggled(prev => !prev);
  return (
    <p onClick={handleClick}>
      State is <strong>{toggled ? 'ON' : 'OFF'}</strong>
    </p>
  );
}

DX++😁

But at what cost?🤔

UX--😥

The magical disappearing framework

Personal experience

Svelte has shallow learning curve

Close to native JS with little to no API = less boilerplate

Passing props

              
<Component {name} {options} />

              
return (
  <Component name={name} options={options} />
);

Using state

              
let name = '';
const updateState = (value) => name = value;

              
const [name, setName] = useState('');
const updateState = (value) => setName(value);

Two way binding

              
<script>
  let name = '';
<／script>
<input bind:value={name} type="text" />

              
const [name, setName] = useState('');
const handleChange = (e) => setName(e.target.value);
return (
  <input value={name} onChange={handleChange} type="text" />
);

Reactive values

              
<script>
  let name = '';
  $: greeting = expensiveGreetingGeneration(name);
<／script>
<input bind:value={name} type="text" />
<p>{greeting}</p>

              
const [name, setName] = useState(false);
const handleChange = (e) => setName(e.target.value);
const greeting = React.useMemo(
  () => compicatedGreetingGeneration(name),
  [name]
);
return (
  <>
    <input value={name} onChange={handleChange} type="text" />
    <p>{greeting}</p>
  </>
);

Around 40% less code generated vs React

Industry Average: "about 15 - 50 errors per 1000 lines of delivered code."

Microsoft Applications: "about 10 - 20 defects per 1000 lines of code during in-house testing

Harder to introduce performance issues

Svelte was written with performance in mind

Internal state management through stores

No need to introduce tools like redux

            import { writable } from 'svelte/store';
export const count = writable(0);
          

            <script>
  import { count } from './stores.js';
  const increment = () => $count += 1;
<／script> 
  
<p>{$count}</p>
<button on:click={increment}>Increment</button>
          

Drawbacks

• Young age
• Quite barebones
• Shipping size might get bigger in large applications

Where to start

• Svelte.dev tutorial and REPL
• Frontendmasters.com Rich Harris' introduction to Svelte
• Rich Harris' Rethinking Reactivity - reasons behind Svelte
• JS Party no 205 podcast with Rich Harris
• Svelte Radio podcast

Summary

• Great DX
• Better performance
• Ease to introduce less experienced developers
• Worth considering especially in smaller projects

DEMO 🤓

Thank you for your attention!

github.com/szuvi/svelte