Framework Comparisons

{/* Simple conditional */}
{isVisible && <div>Hello World</div>}

{/* If/else rendering */}
{isAuthenticated ? (
  <div>Welcome back, {username}!</div>
) : (
  <div>Please log in</div>
)}

<!-- Simple v-if -->
<div v-if="isVisible">Hello World</div>

<!-- If/else rendering -->
<div v-if="isAuthenticated">
  Welcome back, {{ username }}!
</div>
<div v-else>
  Please log in
</div>

<!-- Simple *ngIf -->
<div *ngIf="isVisible">Hello World</div>

<!-- If/else rendering -->
<div *ngIf="isAuthenticated; else loginPrompt">
  Welcome back, {{ username }}!
</div>
<ng-template #loginPrompt>
  <div>Please log in</div>
</ng-template>

<!-- Simple conditional -->
{#if isVisible}
  <div>Hello World</div>
{/if}

<!-- If/else rendering -->
{#if isAuthenticated}
  <div>Welcome back, {username}!</div>
{:else}
  <div>Please log in</div>
{/if}

{/* Two-way binding equivalent */}
<input
  type="text"
  value={username}
  onChange={(e) => setUsername(e.target.value)}
/>
<p>Hello, {username}!</p>

<!-- Two-way binding -->
<input type="text" v-model="username">
<p>Hello, {{ username }}!</p>

<!-- Two-way binding -->
<input type="text" [(ngModel)]="username">
<p>Hello, {{ username }}!</p>

<!-- Two-way binding -->
<input type="text" bind:value={username}>
<p>Hello, {username}!</p>

{/* List rendering with map */}
<ul>
  {items.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

<!-- List rendering with v-for -->
<ul>
  <li v-for="(item, index) in items" :key="item.id || index">
    {{ item }}
  </li>
</ul>

<!-- List rendering with *ngFor -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

<!-- List rendering with each block -->
<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

{/* Simple click event */}
<button onClick={handleClick}>Click me</button>

{/* Event with parameter */}
<button onClick={(e) => handleClick(e)}>With Event</button>

{/* Key events */}
<input onKeyUp={(e) => handleKeyUp(e)} />

<!-- Simple click event -->
<button @click="handleClick">Click me</button>

<!-- Event with parameter -->
<button @click="handleClick($event)">With Event</button>

<!-- Key events -->
<input @keyup="handleKeyUp">

<!-- Simple click event -->
<button (click)="handleClick()">Click me</button>

<!-- Event with parameter -->
<button (click)="handleClick($event)">With Event</button>

<!-- Key events -->
<input (keyup)="handleKeyUp($event)">

<!-- Simple click event -->
<button on:click={handleClick}>Click me</button>

<!-- Event with parameter -->
<button on:click={(e) => handleClick(e)}>With Event</button>

<!-- Key events -->
<input on:keyup={handleKeyUp}>

{/* Class binding */}
<div className={dynamicClass}>Dynamic class</div>
<div className={condition ? 'active' : 'inactive'}>Conditional</div>

{/* Style binding */}
<div style={dynamicStyles}>Dynamic styles</div>
<div style={{ color: textColor }}>Dynamic color</div>

<!-- Class binding -->
<div :class="dynamicClass">Dynamic class</div>
<div :class="{ active: isActive, 'text-danger': hasError }">
  Multiple classes
</div>
<div :class="[baseClass, condition ? 'active' : '']">
  Array syntax
</div>

<!-- Style binding -->
<div :style="dynamicStyles">Dynamic styles</div>
<div :style="{ color: textColor, fontSize: size + 'px' }">
  Dynamic color
</div>

<!-- Class binding -->
<div [class]="dynamicClass">Dynamic class</div>
<div [class.active]="condition">Conditional</div>

<!-- Style binding -->
<div [style]="dynamicStyles">Dynamic styles</div>
<div [style.color]="textColor">Dynamic color</div>

<!-- Class binding -->
<div class={dynamicClass}>Dynamic class</div>
<div class:active={condition}>Conditional</div>

<!-- Style binding -->
<div style={dynamicStyles}>Dynamic styles</div>
<div style:color={textColor}>Dynamic color</div>

// MyComponent.jsx
function MyComponent({ name }) {
  const [message] = useState('Hello World');
  
  const sayHello = () => {
    console.log(`Hello ${name}!`);
  };
  
  return (
    <>
      <h1>{message}</h1>
      <button onClick={sayHello}>Greet</button>
    </>
  );
}

<!-- MyComponent.vue -->
<script setup lang="ts">
interface Props {
  name: string
}

const props = defineProps<Props>()
const message = ref('Hello World')

function sayHello() {
  console.log(`Hello ${props.name}!`)
}
</script>

<template>
  <h1>{{ message }}</h1>
  <button @click="sayHello">Greet</button>
</template>

// my-component.ts
@Component({
  selector: 'app-my-component',
  template: `
    <h1>{{ message }}</h1>
    <button (click)="sayHello()">Greet</button>
  `
})
export class MyComponent {
  @Input() name: string;
  message = 'Hello World';
  
  sayHello() {
    console.log(`Hello ${this.name}!`);
  }
}

<!-- MyComponent.svelte -->
<script>
  export let name;
  let message = 'Hello World';
  
  function sayHello() {
    console.log(`Hello ${name}!`);
  }
</script>

<h1>{message}</h1>
<button on:click={sayHello}>Greet</button>

function MyComponent() {
  const [firstName, setFirstName] = useState('John');
  const [lastName, setLastName] = useState('Doe');
  
  const fullName = useMemo(() => 
    `${firstName} ${lastName}`, 
    [firstName, lastName]
  );
  
  return <div>{fullName}</div>;
}

<script setup lang="ts">
const firstName = ref<string>('John')
const lastName = ref<string>('Doe')

const fullName = computed<string>(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

<template>
  <div>{{ fullName }}</div>
</template>

export class MyComponent {
  firstName = 'John';
  lastName = 'Doe';
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

<!-- Template -->
<div>{{ fullName }}</div>

<script>
  let firstName = 'John';
  let lastName = 'Doe';
  
  $: fullName = `${firstName} ${lastName}`;
</script>

<div>{fullName}</div>

function MyComponent() {
  const nameInput = useRef();
  
  const focusInput = () => {
    nameInput.current.focus();
  };
  
  return (
    <>
      <input ref={nameInput} type="text" />
      <button onClick={focusInput}>Focus</button>
    </>
  );
}

<script setup>
const nameInput = ref(null)

function focusInput() {
  nameInput.value.focus()
}
</script>

<template>
  <input ref="nameInput" type="text">
  <button @click="focusInput">Focus</button>
</template>

<!-- Template -->
<input #nameInput type="text">
<button (click)="focusInput(nameInput)">Focus</button>

// Component class
export class MyComponent {
  focusInput(input: HTMLInputElement) {
    input.focus();
  }
}

<script>
  let nameInput;
  
  function focusInput() {
    nameInput.focus();
  }
</script>

<input bind:this={nameInput} type="text">
<button on:click={focusInput}>Focus</button>