Vefskólinn · Frontend frameworks
React, Vue and Angular. Meet the team, then build with all three.
press → to begin
Where we are
npm install · npm run dev
TypeScript
an AI agent that writes code with you
you describe, the AI builds, you decide
Nearly every real web app is built with a framework. Today you find out what that means, and which one fits you.
Why a framework at all
On the whiteboard:
count = count + 1Same features on both sides. Plain JS grows one update line per place, every click. The framework grows only the HTML; the click code stays one line.
Meet the team
click a teammate to hear their pitch
React · profile
useState, useEffect, props, JSX, keysfunction Counter() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>{count}</button> }
React · pros & cons
map, conditions are ternaries. Little new syntax to learn.Vue · profile
.vue file holds HTML, script and style together.ref, computed, v-model, v-if, v-for<script setup> const count = ref(0) </script> <template> <button @click="count++">{{ count }}</button> </template>
Vue · pros & cons
v-model does two-way binding in one word..value everywhereReactive refs need .value in script but not in templates. Easy to forget.Angular · profile
@Component, signal, computed, input(), @if / @for, the CLI@Component({ selector: 'app-counter', template: `<button (click)="count.set(count() + 1)"> {{ count() }} </button>`, }) export class Counter { count = signal(0); }
Angular · pros & cons
*ngIf, zone.js: much online Angular is out of date.One app, three ways
By the numbers
Quick game
[a, setA] → Reactv- or .value → Vue@ blocks, signal() → AngularWhich one, when
“Just ship.”
“Keep it simple.”
“Build it properly.”
Learn one deeply and you can read the other two in a week. The concepts transfer. The syntax is the small part.
The assignment · 3 days
Pick an app, list its features, sketch the screen. Same spec for all three. The AI needs it, and so do you.
Let the agent write it, you review, run and correct. Same spec, same look. Note everything it got wrong and everything you didn't understand.
Links to all three apps, a thorough side-by-side comparison, your scorecard, and your own tutorials on the hard parts. Your own interactive textbook.
Read their reports, try their apps, give written feedback. Then improve yours from the feedback you got.
Rules of the game
Pick your app
Every app needs: changing state, a list, a form, a derived value and something saved. That's where the frameworks differ.
# React npm create vite@latest my-app-react -- --template react-ts # Vue npm create vite@latest my-app-vue -- --template vue-ts # Angular (pin v20 if the CLI rejects your Node version) npx @angular/cli@20 new my-app-angular --style=css --ssr=false # then, in each folder npm install && npm run dev # Angular: npm start
or just tell the agent “scaffold a Vue + TypeScript app with Vite”
Working with the AI
Compare
| React | Vue | Angular | |
|---|---|---|---|
| How easy was it to get running?scaffold, install, first render | 3 | 3 | 3 |
| How readable is the code?could you explain every file? | 3 | 3 | 3 |
| How well did the AI do?first try correct? modern syntax? | 3 | 3 | 3 |
| How good are the errors?when you broke it, did it tell you where? | 3 | 3 | 3 |
| Would you use it again?gut feeling, be honest | 3 | 3 | 3 |
| Total | 15 | 15 | 15 |
drag the sliders
Your report
Hand-in
my-app-react/, my-app-vue/, my-app-angular/, each runs with npm install and npm run devreport/index.html in the repo, and published so classmates can open it. Links to all three apps, the comparison, the numbers, the scorecard, your tutorialsSpec, React, Vue. Feature list and sketch first. Then two apps; with an agent they go fast. Keep notes.
Angular, then the report. Expect old syntax from the AI. Measure all three. Write the comparison and your tutorials.
Review round. Two reports, two sets of apps, written feedback. Then improve yours and hand in.
good code, better people ♥
Speaker notes · N to hide
| → space | next step |
| ← | previous |
| Home End | first / last slide |
| N | speaker notes |
| F | fullscreen |
| 1 2 3 | on the quiz: answer React / Vue / Angular |
| ? | this help |