# e2e modular architecture at the BBC
4th June 2015 — [web2day](http://web2day.co)
# Node + React + Docker…
*Hype* Driven Development?
~~~~
It is more than just names. It is about concepts, common concept.
And actually the language does not matter much.
@@@
## State + immutability + functions
It's all and only about that.
~~~~
How are they related? And are they a concern to the previous concepts?
@@@
## `stdin` + `stdout` + `stderr`
It's all and only about that.
~~~~
How are they related? And are they a concern to the previous concepts?
## 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.
## BBC R&D
Some additional context.
@@@
# *Multi-disciplinary* team
Engineering, UX, design, science etc.
@@@
# Prototyping
Iterate, *analyse*, explore.
@@@
# Pivot
Stakeholders, partnerships, user study *findings* etc.
@@@
# Quality ~ *flexibility*
~~~~
Both are important. We need both.
@@@
# *Flow* > block
~~~~
You don't want to be pushed back by your code design.
You want to bin code because you want it, not because you need to rewrite it.
# Example
@@@
@@@
# Webapp
- Web interface
- Visual elements
- Data interface
- Web Application
- Host system
- Host machine
~~~~
It is more than a single page you push over FTP.
# #1 Browser
@@@
@@@
```bash
open 'http://localhost:3000'
```
@@@
## `stdin` = URL
@@@
## `stdout` = screen buffer
@@@
## `stderr` = *Aw snap*
@@@
## State = *navigation controls*
`Cmd + R`, URL, Save as…
@@@
## Reproducibility = *varies*
Static vs. dynamic, Web application changed or not, DNS outage, in memory data etc.
# #2 UI Element
@@@
@@@
```javascript
import Component from './lib/Cover.jsx'
React.render(Component, { … })
```
@@@
## `stdin` = state data
@@@
## `stdout` = React Element
Renders as HTML, DOM tree.
@@@
## `stderr` = *varies*
Syntax, runtime.
@@@
## State = *predictable*
It is only a JavaScript object.
@@@
## Reproducibility = *exact*
Same data should guaranty same behaviour.
@@@
```javascript
exports Cover extends React.Element {
render(){
let className = this.state.active ? 'active' : '';
return (
{this.props.title}
);
}
}
```
@@@
## browserify!
Scoped assets, isolated transforms.
@@@
```javascript
// index.js
require('./stylesheet.scss');
module.exports = {
Cover: require('./lib/Cover.jsx')
};
```
# #3 WebApp
@@@
@@@
```bash
PORT=3000 npm start
# static -p ${PORT:-5000} --gzip dist/
```
@@@
## `stdin` = env variables
@@@
## `stdout` = i/o
HTTP responses.
@@@
## `stderr` = *varies*
HTTP error codes, SEGFAULT, network misconfiguration.
@@@
## State = *varies*
In memory, data store, ephemeral files.
~~~~
Nothing guarantees its integrity.
@@@
## Reproducibility = *should*
Same args should produce same result. Depends of integrity.
@@@
## `npm install`
Cannot be guaranteed.
~~~~
Package version can be deleted, semver madness, registry can be down.
@@@
## `npm shrinkwrap`
Guarantees exact same version.
@@@
## `npm pack`
Guarantees exact same artefacts.
# #4 Container
@@@
@@@
```bash
docker run -ti -p 5000:5000 bbcrd/webapp
```
@@@
## `stdin` = env variables, `VOLUME`
@@@
## `stdout` = i/o
HTTP responses.
@@@
## `stderr` = *varies*
Same as Webapp + Docker bugs.
@@@
## State = *predictable*
Data store, `VOLUME`, container to image, void containers.
@@@
## Reproducibility = *exact*
(re)start from predictable point.
@@@
## `docker {push,pull}`
Move install state over network.
# #5 System image
@@@
@@@
```bash
vagrant up
packer build
aws ec2 create-image
```
@@@
## `stdin` = env variables
@@@
## `stdout` = file
a.k.a. *Golden image*.
@@@
## `stderr` = *varies*
Linux exit codes.
@@@
## State = *predictable*
Mountable filesystem and executable environment.
@@@
## Reproducibility = *exact*
(re)start from predictable point.
@@@
## Chef, puppet, Ansible?
Reproducible provisioning. Consecutive provisioning does not guarantee state though.
# #6 Machine
@@@
```bash
aws ec2 run-instances --image-id=... --user-data=...
aws ec2 create-tags --tags ... --resources i-...
```
@@@
## `stdin` = machine tags, user data
@@@
## `stdout` = i/o
Network connections, local filesystem.
@@@
## `stderr` = *varies*
Guru meditation, monitoring alerts, internal logs.
@@@
## State = *mostly predictable*
Load and app issues will interfere (like memory leaks, memory swap etc.).
@@@
## Reproducibility = *exact*
If from immutable image.
@@@
## Chef, puppet, Ansible?
Install time increased, state not guaranteed.
@@@
# Wrap up
@@@
# Composition
*Add* and *combine* — no implicit expectation.
@@@
# State
*Explicit* over implicit.
@@@
# Functions
Simplest interface. Their internal state does not leak. Reproducible from input/arguments.
@@@
# Artifacts
Immutable and *solid assets* are best to deploy. Easier to transfer. Easier to reproduce.
@@@
# Automation / packaging / *provisionning*
More important than monolith vs. microservice sterile debate.
@@@
# Mono-myth
Balance of *flexibility* and *explorability*.
@@@
# Data layer
Maintain the data state *outside of the app* stack.
~~~~
And if no data layer, provide an API client package.
~~~~
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 👍
(en Français dans le texte)
@@@