Hvorfor er det jeg som står her?

Hva er et frontend rammeverk?

• Abstraksjon
• Oppsett/struktur for å lage HTML, JS og CSS
• Lar deg utvikle UI komponenter
• Holder på data
• Reaktiv UI basert på data
• ++

Hva er viktig å vurdere?

• Utvikler opplevelse
• Lærings kurve
• Dokumentasjon
• Performance
• Bundle size
• Skalerbarhet
• Økosystemet
• Tåler tidas tann
• Jobbmuligheter/Ansettelsesmuligheter

Hva er viktig å vurdere?

• Utvikler opplevelse
  • Lærings kurve
  • Dokumentasjon
• Performance
  • Bundle size
  • Skalerbarhet
• Popularitet
  • Økosystemet
  • Tåler tidas tann
  • Jobbmuligheter/Ansettelsesmuligheter

Hva er viktig å vurdere?

• Utvikler opplevelse
• Performance
• Popularitet

Hvem er du?

Solo prosjekt

Team

Bedrift med flere team

React

• Av Facebook / Meta
• Oppstod 2013
• Dagens versjon v18
• 2019 React hooks

React komponent

function Counter() {
  const [count, setCount] = useState(0)
  
  function increment() {
    setCount(count + 1)
  }

  return (
    <>
      <span>Count is {count}</span>
      <button onClick={increment}>Bump</button>
    </>
  );
}

Angular

• Av Google
• AngularJS oppstod 2010
• Angular oppstod 2016
• Dagens versjon v17
• 2023 signals & control flow
• 202x skal merges med Wiz

Angular data

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  count = signal(0)
  increment(){
    this.count.set(this.count() + 1)
  }
}

<span>Count is {{count}}</span>
<button (click)="increment()">Bump</button>

Vue

• Av Evan You
• Oppstod 2014
• Fulltidsprosjekt siden 2016
• Dagens versjon v3
• Progressive framework
• Eneste uavhengige populære rammeverk
• 2020 Composition API

Vue komponent

<script setup lang="ts">
const count = ref(0)
</script>

<template>
  <span>Count is {{count}}</span>
  <button @click="count++">Bump</button>
</template>

<style scoped>
</style>

Svelte

• Av Rich Harris
• Oppstod 2016
• Dagens versjon v4
• Compiler
• 202x Runes

Svelte komponent

<script lang="ts">
let count = $state(0)
</script>

<span>Count is {count}</span>
<button on:click={() => count++}>Bump</button>

<style>
</style>
        

Preact

• Av Jason Miller
• Oppstod 2016
• Dagens versjon v10
• Et mindre og raskere React
• 2022 Signals

Preact komponent

function Counter() {
  const [count, setCount] = useState(0)
  
  function increment() {
    setCount(count + 1)
  }

  return (
    <>
      <span>Count is {count}</span>
      <button onClick={increment}>Bump</button>
    </>
  );
}

Solid

• Av Ryan Carniato
• Oppstod 2018
• Versjon 1 i 2021
• Dagens versjon v1
• Fine grained reactivity

Solid komponent

function Counter() {
  const [count, setCount] = createSignal(0)
  
  function increment() {
    setCount(count() + 1)
  }

  return (
    <>
      <span>Count is {count()}</span>
      <button onClick={increment}>Bump</button>
    </>
  );
}

Lit

• Av Google
• 5/6 år gammel?
• fast, lightweight, close-to-the-platform

Lit komponent

class MyCounter extends LitElement {
  static get properties() {
    return {
      count: { type: Number },
    }
  }

  constructor() {
    super()
    this.count = 0
  }

  increment() {
    this.count++
  }

  render() {
    return html`
      <span>Count is ${this.count}</span>
      <button @click=${this.increment}>Bump</button>
    `
  }
}

Lit komponent (TS)

@customElement('my-counter')
export class MyCounter extends LitElement {
  @property()
  count: number = 0

  increment() {
    this.count++
  }
      
  render() {
    return html`
      <span>Count is ${this.count}</span>
      <button @click=${this.increment}>Bump</button>
    `
  }
}

Hva er din mentale modell?

function MyComponent(state) {
  console.log('re-render')
  return (
    <p>Hello {state.name}</p>
  );
}

function MyComponent(state) {
  console.log('component created')
  return (
    <p>Hello {state().name}</p>
  );
}

Template

<p>Kode24-dagen {{version}}</p>

const version = 0
return html`
  <p>Kode24-dagen ${this.version}</p>
`

function MyComponent() {
  const version = 3
  return (
    <p>Kode24-dagen {version}</p>
  );
}

<script>
const version = 3
</script>

<p>Kode24-dagen {version}</p>

<style></style>

Hvordan liker du å skrive dynamisk template?

{ isDay && <p>☀️</p> }

<p v-if="isDay">☀️</p>

{#if isDay}
  <p>☀️</p>
{/if}

<Show when={isDay}>
  <p>☀️</p>
</Show>

Hvordan liker du å skrive dynamisk template?

<ul>
  {todos.map(todo => 
    <li>{todo.text}</li>
  )}
</ul >

<ul>
  <li v-for="todo in todos">{{todo.text}}</li>
</ul>

<ul>
  @for (todo of todos) {
    <li>{{ todo.text }}</li>
  }
</ul>

<For each={todos()}>
  {todo =>
    <li>{todo.text}</li>
  }
</For>

Signals?

const vue = ref(0)
const [solid, setSolid] = createSignal(0)
const preactOrAngular = signal(0)
const svelte = $state(0)

• Signals holder på data, ikke ulikt useState
• Er selv ansvarlig for reaktivitet, med å si ifra til de som er avhengige av verdien

Signals fordeler

• Mer effektiv DOM oppdatering
• Frikoblet state fra komponent

import { count, increment } from './store.ts'

function Counter() {
  return (
    <>
      <span>Count is {count()}</span>
      <button onClick={increment}>Bump</button>
    </>
  );
}
function Counter() {  const [ setCount] = createSignal(0)  function () {    setCount(count() + 1)  }                           

Signals?

const [count, setCount] = useState(0)

useEffect(() => {
  console.log(count)
}, [count])

const [count, setCount] = createSignal(0)

createEffect(() => {
  console.log(count())
})

Mutable vs immutable

const [count, setCount] = useState(0)
setCount(count + 1)

const count = ref(0)
count.value++

Mutable vs immutable

const [person, setPerson] = useState({ name: 'Gaute', age: 32 })
setPerson({
  ...person,
  age: person.age + 1,
})

const person = reactive({ name: 'Gaute', age: 32 })
person.age++

Stabilitet og innovasjon

Lite endringer

Innovasjon

NPM weekly downloads

State of JS 22 - Usage

Hello world size

Svelte 4 (25 kB)

Angular (61 kB)

React (52 kB)

Solid (19 kB)

Svelte 5 (22 kB)

Vue (33 kB)

Preact (19 kB)

Lit (21 kB)

Svelte 4 (237 kB)

Angular (209 kB)

React (170 kB)

Solid (162 kB)

Svelte 5 (156 kB)

Vue (160 kB)

Preact (133 kB)

Lit (157 kB)

krausest/js-framework-benchmark

Data og DOM endringer

krausest/js-framework-benchmark

Memory

Konklusjon

• Alle sider kan lages med alle rammeverkene
• Basert på hva du vektlegger mest finnes det bedre valg