<commit_before>#HSLIDE

### True Separation of
### V
### in MVC

#HSLIDE

#### What is the problem?

Most view-components of current web apps ...
- ... are designer-unfriendly <!-- .element: class="fragment" -->
- ... impede the collaboration between designers and developers <!-- .element: class="fragment" -->
- ... hinder designer to leverage their skills <!-- .element: class="fragment" -->

#VSLIDE

#### HTML obscured by extensive display logic
```HTML
 <#if ((products?size % (columns * 2) > 0 && products?size %
  (columns * 2) <= columns - 1 )) && menuProperties?? &&
  showBanner>
            <a href="/product">Product</a>
<#elseif
  (isRowEven || (isRowUneven && (!menuProperties?? ||
   !showBanner))) && product_has_next>
            <hr class="line"/>
</#if>
```

#VSLIDE

#### HTML obscured by framework code 

```JavaScript
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({date: new Date()});
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toTimeString()}.</h2>
      </div>
    );
  }
}
```

#VSLIDE

#### Visual verification impossible
- without running server <!-- .element: class="fragment" -->
- shipping test data  <!-- .element: class="fragment" -->
- <!-- .element: class="fragment" -->(plus [underpowered templates](http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html))  
```HTML
<div ng-app=""
     ng-init="vals=['Potential','Long','Testdata']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="x in vals">
      {{ x }}
    </li>
  </ul>
</div>
```

#HSLIDE

#### Why is this a problem? I

"I am a full stack developer, I do not need a dedicated designer."

- Being excellent on all levels is really hard.   <!-- .element: class="fragment" -->
- A bounded context is still beneficial.   <!-- .element: class="fragment" -->

#VSLIDE

#### Why is this a problem? II

"Designers can hand over mockups or concept art and developers implement them."

- In this way, designers produce throw away artefacts. <!-- .element: class="fragment" -->
- Designers could instead iterate directly in HTML and get feedback immediately.    <!-- .element: class="fragment" -->
- This kind of collaboration will boost misunderstandings.  <!-- .element: class="fragment" --><commit_msg>Update presentation.<commit_after>#HSLIDE

### True Separation of
### V
### in MVC

#HSLIDE

#### What is the problem?

Most view-components of current web apps ...

 1. ... impede the collaboration between designers and developers  <!-- .element: class="fragment" -->
 2. ... make it difficult for designers to contribute in the same way as developers  <!-- .element: class="fragment" -->
 3. ... hinder designer to leverage their skills  <!-- .element: class="fragment" -->

#VSLIDE

####  ... impede the collaboration between designers and developers
Example: No collaboration on the same artifacts
```HTML
 <#if ((products?size % (columns * 2) > 0 && products?size %
  (columns * 2) <= columns - 1 )) && menuProperties?? &&
  showBanner>
            <a href="/product">Product</a>
<#elseif
  (isRowEven || (isRowUneven && (!menuProperties?? ||
   !showBanner))) && product_has_next>
            <hr class="line"/>
</#if>
```

#VSLIDE

####  ... make it difficult for designers to contribute in the same way as developers
Example: "React makes it easy for designers to contribute." That is wishful thinking.

```JavaScript
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({date: new Date()});
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toTimeString()}.</h2>
      </div>
    );
  }
}
```

#VSLIDE

#### ... hinder designer to leverage their skills
Example: Visual verification impossible
- without running server <!-- .element: class="fragment" -->
- or shipping test data  <!-- .element: class="fragment" -->
- <!-- .element: class="fragment" -->(plus [underpowered templates](http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html))  
```HTML
<div ng-app=""
     ng-init="vals=['Potential','Long','Testdata']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="x in vals">
      {{ x }}
    </li>
  </ul>
</div>
```

#HSLIDE

#### Why is this a problem? I

"I am a full stack developer, I do not need a dedicated designer."

- Being excellent on all levels is really hard.   <!-- .element: class="fragment" -->
- A bounded context is still beneficial.   <!-- .element: class="fragment" -->

#VSLIDE

#### Why is this a problem? II

"Designers can hand over mockups or concept art and developers implement them."

- In this way, designers produce throw away artifacts. <!-- .element: class="fragment" -->
- Designers could instead iterate directly in HTML and get feedback immediately.    <!-- .element: class="fragment" -->
- This kind of collaboration will boost misunderstandings.  <!-- .element: class="fragment" -->
{'fraction_non_alphanumeric': 0.17238833517903285, 'fraction_numerical': 0.006459948320413436, 'mean_word_length': 3.213841368584759, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '553937', 'n_tokens_mistral': 1679, 'n_tokens_neox': 1618, 'n_words': 514}