<commit_before># unbundling the frontend

<NAME>

  http://yoshuawuyts.com
  https://{github,twitter}.com/yoshuawuyts
  https://npmjs.org/~yoshuawuyts

```
$ npm install -g tslide
$ tslide README.md
```

Frontend Developer Meetup Ams May 2015

---

# unix philosophy

```
'Make each program do one thing well.'
```
---

# unix philosophy

```
'Make each program do one thing well.'
+ 'To do a new job, build afresh rather than complicate'
+ 'old programs by adding new features.'
```

---

# unix philosophy

- modularity - write simple parts connected by clean interfaces
- composition - design programs to be connected with other programs
- parsimony - write a big program only as a last resort
- separation - split the engine from the interface

---

# custom elements

```
Create your own HTML tags and elements
```

---

# custom elements

register a custom element:

``` js
document.registerElement('custom-button', {
  prototype: Object.create(window.HTMLButtonElement.prototype),
  extends: 'button'
})
```

---

# custom elements

render a custom element:

``` js
document.createElement('custom-button')
document.createElement('button', 'custom-button')
```

---

# custom elements

render a custom element from html:

``` html
<custom-button>foobar</custom-button>
<button is="custom-button">foobar</button>
```

---

# custom elements

lifecycle hooks:

```
.createdCallback()          // after element was created
.attachedCallback()         // after element was attached to DOM
.detachedCallback()         // after element was detached from dom
.attributeChangedCallback() // on element attribute change
```

---

# virtual-dom

```
All the benefits of React with none of the cruft
```

---

# virtual-dom

performant elements:

``` js
const createElement = require('virtual-dom/create-element')
const h = require('virtual-dom/h')

const tree = h('div', 'pumpkin pie')
const el = createElement(tree)
document.body.appendChild(el)
```<commit_msg>unbundle: fix missing js tag<commit_after># unbundling the frontend

<NAME>

  http://yoshuawuyts.com
  https://{github,twitter}.com/yoshuawuyts
  https://npmjs.org/~yoshuawuyts

```
$ npm install -g tslide
$ tslide README.md
```

Frontend Developer Meetup Ams May 2015

---

# unix philosophy

```
'Make each program do one thing well.'
```
---

# unix philosophy

```
'Make each program do one thing well.'
+ 'To do a new job, build afresh rather than complicate'
+ 'old programs by adding new features.'
```

---

# unix philosophy

- modularity - write simple parts connected by clean interfaces
- composition - design programs to be connected with other programs
- parsimony - write a big program only as a last resort
- separation - split the engine from the interface

---

# custom elements

```
Create your own HTML tags and elements
```

---

# custom elements

register a custom element:

``` js
document.registerElement('custom-button', {
  prototype: Object.create(window.HTMLButtonElement.prototype),
  extends: 'button'
})
```

---

# custom elements

render a custom element:

``` js
document.createElement('custom-button')
document.createElement('button', 'custom-button')
```

---

# custom elements

render a custom element from html:

``` html
<custom-button>foobar</custom-button>
<button is="custom-button">foobar</button>
```

---

# custom elements

lifecycle hooks:

``` js
.createdCallback()          // after element was created
.attachedCallback()         // after element was attached to DOM
.detachedCallback()         // after element was detached from dom
.attributeChangedCallback() // on element attribute change
```

---

# virtual-dom

```
All the benefits of React with none of the cruft
```

---

# virtual-dom

performant elements:

``` js
const createElement = require('virtual-dom/create-element')
const h = require('virtual-dom/h')

const tree = h('div', 'pumpkin pie')
const el = createElement(tree)
document.body.appendChild(el)
```
{'fraction_non_alphanumeric': 0.13091001525165227, 'fraction_numerical': 0.0020335536349771225, 'mean_word_length': 3.7069377990430623, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6603511', 'n_tokens_mistral': 1226, 'n_tokens_neox': 1155, 'n_words': 387}