# Design d'*architecture modulaire* à la BBC
28 octobre 2015 — [Blend Webmix](http://2015.blendwebmix.com/) {.footer}
## Bonjour,
I am **Thomas**
[thom4.net](https://thom4.net) – [@thom4parisot](https://twitter.com/thom4parisot) {.footer}
@@@
@@@
## BBC R&D
[github.com/bbcrd](https://github.com/bbcrd)
[bbc.co.uk/rd](http://bbc.co.uk/rd)
@@@
[thom4.net/node.js](https://thom4.net/node.js)
@@@
[sudweb.fr](http://sudweb.fr)
@@@
~~~~
And photography.
# C'est quoi une **fonction** ?
@@@
## `fn(...args)`
@@@
## `let result = fn(...args)`
@@@
## `try { fn(...args) }`
## `catch (err) { ... }`
~~~~
L'erreur est un signal, ce n'est pas rien.
@@@
## `let emitter = fn(...args)`
## `emitter.on('success', ...)`
@@@
## `fn(...args).then(...)`
@@@
## Bref, une fonction c'est …
- à entrée identique, sortie **identique**
- le produit de la fonction n'est **pas persisté** par la fonction
- **reproductible** à l'infini*\**
*\** moyennant un environnement favorable {.footer}
~~~~
Matrices d'environnement : versions d'interpréteur, de navigateur etc.
## BBC R&D
C'est quoi ?
@@@
# Équipes **pluridisciplinaires**
Ingénieurs, UX, design, science etc.
@@@
# Prototypage
Itérations de 2 semaines, **analyse**, exploration.
@@@
# **Pivot**
Au-delà de l'idée : partenaires, directions politiques, résultats de recherche etc.
@@@
# Qualité & **flexibilité**
@@@
# Coder = **faciliter**
~~~~
Jeter le code n'est pas grave tant que c'est dans l'optique projet.
C'est un peu comme l'exemple d'agriculture pris auparavant.
# Example
@@@
@@@
# C'est quoi une **Web app** ?
@@@
Une Web app est un *rendu navigateur* de *code HTML* servi par un *serveur HTTP*
compilé ou *interprété* par un *programme* puis mis à disposition sur une *machine informatique*.
(Accessoirement, ces données transitent de manière intelligible *uniquement*
entre vous et le serveur sans captation par un tiers — même si vous lui confiez vos impôts)
# #1 **Navigateur**
@@@
@@@
## `open URL`
@@@
## `echo URL | open`
# #2 Élément **graphique**
@@@
@@@
@@@
@@@
```javascript
import { Cover } from '@project/element'
React.render(Cover, { … })
```
@@@
## **Autonomie**
On *embarque* CSS, images et outillage.
@@@
```javascript
require('./cover.scss');
import { Component } from 'react';
exports default class Cover extends Component {
render (){
let className = this.state.active ? 'active' : '';
return (
{this.props.title}
);
}
}
```
@@@
## **browserify** all the way!
*transforms* isolés et chainables.
@@@
## `npm publish`
~~~~
`.npmrc` pour cibler le registre privé.
@@@
> C'est comme ça que j'aimerais travailler sur tous mes projets.
— Diego, UI designer
# #3 **Application**
@@@
@@@
```bash
npm install --save @project/element
PORT=3000 npm start
# static -p ${PORT:-5000} --gzip dist/
```
@@@
## ENV = **portabilité**
(penser arguments de fonction)
@@@
## Problème
`npm install` marche pas à tous les coups.
~~~~
Package version can be deleted, semver madness, registry can be down.
@@@
## `npm pack`
Extraction solide
@@@
## **Transportabilité**
(rendu iframe, puis rails-react puis gulp)
# #4 **Container**
@@@
@@@
```bash
docker run -ti \
-p 5000:5000 \
-e STREAM_API_URL=https://... \
bbcrd/webapp
```
@@@
## *Application* as a **function**
`docker run -d ...` * `n`
@@@
## Dépendances **système**
Application + dépendances {langage, système, ressources).
@@@
## **Intégration Continue**
`docker-compose -f ci.yml run npm test`
(mais on le cache derrière un `make test`)
@@@
## Le **CPU** compte
(x86, ARMv6 etc.)
@@@
## `docker push`
@@@
# **Demo sympa**
# #5 **Machine**
@@@
@@@
```bash
aws ec2 run-instances --image-id=... --user-data=...
aws ec2 create-tags --tags ... --resources i-...
```
@@@
## *Machine* as a **function**
@@@
## **OS** comme artéfact
`AWS_ACCESS_KEY_ID=... packer build search-app.json`
# #6 **Data**
@@@
```bash
curl -X POST -d '{ "uri": "...", "callback_url": "..." }' \
https://api.../analyse
```
@@@
## **Code** = *data*
@@@
@@@
## **Event loop distribuée**
@@@
## Arbre de dépendance
@@@
@@@
# **Récap**
@@@
Une Web app est un *rendu navigateur* de *code HTML* servi par un *serveur HTTP*
compilé ou *interprété* par un *programme* puis mis à disposition sur une *machine informatique*.
@@@
Une Web app est un ensemble de *composants visuels* organisés selon des *règles métiers* et servi
par un *processus encapsulé* et *orchestré* par une machine *pré-parée*.
@@@
@@@
# **Composition**
*Ajouter* et *combiner* — pas d'attente implicite.
@@@
# **State**
*Explicite* plutôt qu'implicite.
@@@
# **Fonctions**
Interfaces pures. État interne isolé. Reproductibles à souhait.
@@@
# **Artéfacts**
Persistance de nos *sorties*.
Transférable, étiquetables et reproductibles.
@@@
# **Découvrabilité**
Chaque niveau, par votre équipe et d'autres équipes.
**Fonction** > *Framework*
@@@
# **Données**
Liant entre nos *systèmes*. Leur *débit* impacte la santé des fonctions.
~~~~
Although we talked about programming, humans are also good at repetition. As human beings, we need variables and variability to maintain our sanity, and to sustain a good *state* of mind.
@@@
# Merci 👍