# End-to-end *modular architecture* at the BBC
27th November 2015 — [Node.js @ BBC][] {.footer}
[Node.js @ BBC]: https://bbc.github.io/nodejs-at-the-bbc/
## 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.
# What is a **function**?
@@@
## `fn(...args)`
@@@
## `const result = fn(...args)`
@@@
## `try { fn(...args) }`
## `catch (err) { ... }`
~~~~
The error is a signal, this is not *nothing*.
@@@
## `const emitter = fn(...args)`
## `emitter.on('success', ...)`
@@@
## `fn(...args).then(...)`
@@@
## To sum it up, a *function* is…
- a predictable output for a given input
- the function itself **does not persist** its own output
- **reproductible** at will
~~~~
Matrices d'environnement : versions d'interpréteur, de navigateur etc.
## BBC R&D
Who are we?
@@@
# **Multidisciplinary** teams
Engineers, UX, design, researchers etc.
@@@
# Prototyping
Two weeks sprints, **studies**, exploration.
@@@
# **Pivot**
Beyond the idea: internal partners, political decisions, studies results etc.
@@@
# Quality and **flexbility**
@@@
# Programming = **facilitating**
~~~~
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
@@@
@@@
# What is a
**Web app**?
@@@
A Web app is a *browser rendering* of some *HTML code* served by an *HTTP server*,
which itself is compiled or *interpreted* by a *program* before being provisioned
on a *computer machine*.
(Eventually, the data transit safely transit between the end user and the servers,
without being captured by a third party – even if funded by our taxes)
# #1 **Web browser**
@@@
@@@
## `open URL`
@@@
## `echo URL | open`
# #2 **UI** component
@@@
@@@
@@@
@@@
```javascript
import { Cover } from '@project/element'
React.render(Cover, { … })
```
@@@
## **Autonomous**
We *bundle* CSS, images et tooling.
@@@
```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* are isolated and chainables.
@@@
## `npm publish`
~~~~
`.npmrc` pour cibler le registre privé.
@@@
## **Movable**
(iframe rendering, then react-rails, then gulp, then pure npm)
@@@
# **Demo**
@@@
> This is how I'd like to work on all the projects I am involved in.
— Diego, UI designer
# #3 **Application**
@@@
@@@
```bash
npm install --save @project/element
PORT=3000 npm start
# static -p ${PORT:-5000} --gzip dist/
```
@@@
## ENV = **portability**
(think of it as a function argument)
@@@
## Problem
`npm install` can fail (for various reasons).
~~~~
Package version can be deleted, semver madness, registry can be down.
@@@
## `npm pack`
Solid artifact.
@@@
## Something is **missing**
Install, build and and run are lost in a README.
# #4 **Container**
@@@
@@@
```bash
docker run -ti \
-p 5000:5000 \
-e STREAM_API_URL=https://... \
bbcrd/webapp
```
@@@
## *Application* as a **function**
`docker run -d ...` * `n`
@@@
## **System** dependencies
Application + dependencies {runtime, system, resources}.
@@@
## **Continuous Integration**
`docker-compose -f ci.yml run npm test`
(we hide it behind `make test`)
@@@
## **CPU** matters
(x86, ARMv6 etc.)
@@@
## `docker push`
@@@
# **Demo**
# #5 **Machine**
@@@
@@@
```bash
aws ec2 run-instances --image-id=... --user-data=...
aws ec2 create-tags --tags ... --resources i-...
```
@@@
## *Machine* as a **function**
@@@
## **OS** as an artifact
`AWS_ACCESS_KEY_ID=... packer build search-app.json`
# #6 **Data**
@@@
```bash
curl -X POST -d '{ "uri": "...", "callback_url": "..." }' \
https://api.../analyse
```
@@@
## **Code** = *data*
@@@
@@@
## **Distributed event loop**
@@@
## Dependency **tree**
Polyglot processing.
@@@
@@@
# **Wrap-up**
@@@
A Web app is a *browser rendering* of some *HTML code* served by an *HTTP server*,
which itself is compiled or *interpreted* by a *program* before being provisioned
on a *computer machine*.
@@@
A Web app is a blend of *UI components* organised against *business rules* and
served by a *wrapped process* which is orchestrated by a *provisioned* machine.
@@@
@@@
# **Composition**
*Add* and *combine* — no implicit expectations.
@@@
# **State**
*Explicit* rather than implicit.
@@@
# **Functions**
Pure interfaces. Isolated state. Reproductible at will.
@@@
# **Artifacts**
Persisted *outputs*.
Movables, labeled and reproductibles.
@@@
# **Discoverability**
Every layer of our approach, by our own team and other teams.
**Functions** > *Frameworks*
@@@
# **Data**
The glue between our *systems*. Their *throughput* impacts the health of our functions.
~~~~
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 👍