Rammer (React, Vue) — overblik

It A · STX · A-niveau · Frontend og UX

💻 Rammer (React, Vue) — overblik

Frontend-rammer (frameworks) = JavaScript-biblioteker der forenkler bygning af komplekse interaktive websider.

Hvorfor framework?:

1.

Komponent-baseret arkitektur — genbrugelige UI-byggeklodser.

2.

Reaktiv state-management — UI opdateres automatisk når data ændres.

3.

Virtual DOM — performance-optimering.

4.

Økosystem — biblioteker for routing, forms, animation.

5.

Stort jobmarked — React + Vue er top-3 efterspurgte.

Top frameworks 2024:

1.

React (Meta/Facebook, 2013) — det største, ~40% market share.

Karakteristika: JSX-syntaks (HTML i JS), én-vejs data-flow, Hooks (useState, useEffect, useContext), funktionelle komponenter, virtuel DOM.

Eksempel: function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count+1)}>{count}</button>; }.

Økosystem: Next.js (server-rendering), React Native (mobil), Redux (state), React Router.

Bruges af: Facebook, Instagram, Netflix, Airbnb, Uber, Whatsapp, Twitter (delvist).

2.

Vue.js (Evan You, 2014) — ~17% market share. Singapore/Kina-populært.

Karakteristika: template-syntaks (HTML-baseret), to-vejs data-binding (v-model), single-file components (.vue), let læringskurve.

Eksempel: <template><button @click="count++">{{ count }}</button></template>.

Økosystem: Nuxt.js (server-rendering), Pinia (state), Vue Router.

Bruges af: Alibaba, Xiaomi, GitLab, Baidu, Nintendo.

3.

Angular (Google, 2010 → 2016 ny) — ~17%. Enterpr

Læringsmål

• Redegøre for formålet med frontend-rammer som React og Vue
• Forklare komponentbaseret udvikling
• Give eksempler på hvornår en ramme er hensigtsmæssig at bruge

Sådan kan du arbejde med emnet

• Forklar, hvad et JavaScript-framework bidrager med, som vanilla JS ikke gør
• Beskriv, hvad React-komponenter og state er, og vis et simpelt eksempel
• Diskutér, hvad der er fordele og ulemper ved at bruge et framework frem for vanilla JS

Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.