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

State of JS 21 - Usage

NPM Installs Weekly

GitHub Stars

Developer Tools Extension Installs

Stackoverflow Watchers

Slått sammen

Bli med å gi din stemme

g-goto.web.app/a

Antall klare: 73

Hvilken foretrekker du?

Avstemning

Stemmer: 23

Hvilken foretrekker du?

React

• Av Facebook / Meta
• Public release 2013
• Current release v18
• Library
• 2019 React hooks

React komponent

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

Angular

• Av Google
• Ikke AngularJS
• Initial release 2016
• Current release v13
• Decorators
• Dependency injection

Angular data

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

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

Vue

• Av Evan You
• Initial release 2013
• Full time siden 2016
• Progressive framework
• 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
• Initial release 2016
• Compiler

Svelte komponent

<script lang="ts">
let count = 0
</script>

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

<style>
</style>

Hva er viktig for et framework?

• Utvikler opplevelse
• Performance
• Økosystem

JavaScript eller TypeScript?

Avstemning

Stemmer: 23

JavaScript eller TypeScript?

Template

function MyComponent() {
  const world = 'CapraCon'
  return (
    <>
      <h1>Hello {world}</h1>
      <p>Do you like JSX?</p>
    </>
  );
}

<h1>Hello {{world}}</h1>
<p>Do you like HTML?</p>

<script>
const world = 'CapraCon'
</script>

<h1>Hello {world}</h1>
<p>Do you like SFC?</p>

<style></style>

Avstemning

Stemmer: 23

Template

Conditional rendering

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

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

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

Avstemning

Stemmer: 23

Conditional rendering

Liste

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

<ul>
  <li
    *ngFor="let todo of todos; trackBy: trackByFn" 
  >{{todo.text}}</li>
</ul>

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

<ul>
  {#each todos as todo (todo.id)}
    <li>{todo}</li>
  {/each}
</ul>

Avstemning

Stemmer: 22

Liste

State

const [position, setPosition] = useState({ x: 0, y: 0 })
const moveX = (x) => setPosition({...position, x: x})

class MyComponent {
  position = { x: 0, y: 0 }
  moveX(x: number){
    this.position.x = x
  }
}

const position = reactive({ x: 0, y: 0 })
const moveX = (x) => position.x = x

const position = { x: 0, y: 0 }
const moveX = (x) => position.x = x

Avstemning

Stemmer: 22

State

Beregnet verdi

const [count, setCount] = useState(0)
const double = count * 2

class MyComponent {
  count = 0
  double(){
    return this.count * 2
  }
}

const count = ref(0)
const double = computed(() => count.value * 2)

let count = 0
$: double = count * 2

Avstemning

Stemmer: 22

Beregnet verdi

Props

function MyComponent(props: { count: number }){
}

class MyComponent {
  @Input() count!: number
}

<script setup lang="ts">
defineProps<{
  count: number
}>()
</script>

<script lang="ts">
export let count: number
</script>

Avstemning

Stemmer: 28

Props

Spør meg senere om 🕙

• Global state
• Watchers/side effects
• Lifecycle methods

Utivkler opplevelse

App size - TodoMVC

App size

App size

App performance

js-framework-benchmark

App performance

Slått sammen

Metaframework

🏆 Vinner 🏆 - hva vi egentlig liker

Vinner

Slides

• gaute-talks.netlify.app

Kilder

• frontend-framework-compare
• GitHub stars
• js-framework-benchmark
• frontend-framework-size-analysis
• Metaframeworks SSG
• Metaframeworks SSR