Skip to content

Latest commit

 

History

History
244 lines (179 loc) · 5 KB

presentasjon.md

File metadata and controls

244 lines (179 loc) · 5 KB











Velkommen

Svelte: Et faktisk reaktivt rammeverk

  • Hvem er jeg?
    • Kristian
    • KomTek 4. klasse
  • Hvorfor snakke om Svelte?











abakusrevyen.no

commit b9129dfedbda60305e5643b97ad558fd0b2e2ead
Author: Kristian <[email protected]>
Date:   Thu Mar 4 03:27:28 2021 +0100

    init

Permiære 5. Mars











Dagens mål:

  • Hva er Svelte
  • Hva er Sapper
  • Hvorfor bry seg om performance?
  • Et par eksempler
  • Nok kunnskap til å starte et nytt prosjekt











Hvorfor bry seg om Svelte?

adjective /svelt/ attractively thin, graceful and stylish

  • Enklere kode
  • Mindre boilerplate
  • Raskt og ressurseffektivt
    • Ingen Virtual DOM
    • Reaktiv oppdatering av variabler
  • God støtte for CSS











Typisk Svelte komponent:

Svelte komponent

Legg merke til:

  • Enkel HTML kode
  • Reaktiv:
    • Ingen states, hooks eller andre unødvendige wrappers
  • Ingen update funksjoner, binder til native HTML element











Samme komponent i 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 (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Jeeez, så mye boilerplate!











Vue er litt bedre:

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>











Stats:
React 442
Vue 263
Svelte 145

| Generel basis: Svelte 40% mindre code enn React











Hva om man ønsker litt styling i tillegg?

Svelte komponent med styling

Gjør det rett i samme komponent!











Hva er Virtual DOM?

Virtual DOM











Virtual DOM rendrer hele applikasjon internt HVER LOOP!

Untak:

  • shouldComponentUpdate
  • React.PureComponent
  • useMemo
  • useCallback

^ Dette burde jo være jobben til kompilatoren
^ Lett å gjøre feil











Hvordan oppdage og oppdatere state?

  • React setState (gammel)
  • React UseState (ny)

Vue:

data: () => ({count: 0})
this.count += 1

Under-the-hood skjer det en del magi her i runtime.
Dette er dessverre regler for javascript 😕

Men svelte bryr seg ikke! Svelte er en compiler tross alt!











Ok, svelte er kjapt, men har det noe å si?

Benchmark











Måling av User Experience:

https://rethinking-reactivity.surge.sh/#slide=24
https://rethinking-reactivity.surge.sh/#slide=25











Hva er da Sapper?

SSR (Server Side Rendering) rammeverk drevet av Svelte

  • React: Next.js, Gatsby

Eksempel prosjekt:
https://github.com/kristianvld/abakusrevyen-streamsite











SSR vs CSR?

SSR (Server-Side Rendering):

<h1>Hello World!</h1>

Server -> Browser -> DOM

CSR (Client-Side Rendering):

const h1 = document.createElement('h1');
h1.innerText = 'Hello World!';
document.body.appendChild(h1);

Server -> Browser -> Javascript Engine -> DOM











# For Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# For webpack
npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app

npm install
npm run dev
# Åpne http://localhost:3000











Så har me juksa litt

sapper-eksempel











La oss se på et lite eksempel prosjekt











For mer info og interaktiv tutorial:

svelte.dev

sapper.svelte.dev


Om du har spørsmål eller bare vil chatte:

Discord: null#3702

  • Abakus Discord: Kristian in't Veld
  • Eller still spørsmål i #koseprogg

Abakus Slack: Kristian in't Veld


Slides og eksempel prosjekt finnes her:
https://github.com/kristianvld/svelte-wtf