### JSX

```jsx
<Window content={
  <div>
     <h1>Hello!</h1>
     <button onClick={function () { alert("why not onclick?!"); }}>Click me!</button>
  </div>
} />
```

Why is it `className` and `htmlFor` and why `onClick` and why does `onChange` get remapped to `oninput`? But I have to admit it's nice that at least whatever is in braces is actual JavaScript and some other framework-specific derivative of it, as it is for the next one ...

### Riot

```html
<h3>{ opts.title }</h3>

<ul>
  <li each={ item, i in items }>{ item }</li> <!-- the argument to each is definitely not JS -->
</ul>

<form onsubmit={ add }>
  <input ref="input">
  <button>Add #{ items.length + 1 }</button> <!-- why is it #{} here and {} for the h3? -->
</form>
```

### Vue

Messing with attribute values is definitely not enough though. Let's prefix attribute names with funny sigils:

```html
<textarea :value="input" @input="update"></textarea>
```

But at least some things are admittedly solved with well formed XML:

```xml
<div v-bind:id="dynamicId"></div>
```

Where others just go bonkers ...

### Angular

Until you've seen Angular, you ain't seen nothing:

```html
<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}
<button [hidden]="isUnchanged" (click)="deleteHero()">Delete</button><!-- What does this even mean? -->
```